Create DataTable Easily with Combo of Laravel & Vue Packages

Yazan Alnugnugh introduced laravel and vue dataTable packages with which you can build amazing data tables. You can use these two packages for making easy and quick DataTable for your work. The goal is to create Datatable in an easy way using ajax, with interesting features like:

• Searching
• Sorting
• Add new relations
• Multiple selections
• Delete/Delete all
• Restructing data
• Permession access
• Response notifications for events
• Pagination.

Requirements

• Vue.js => 2.x
• Laravel => 8.x
• Tailwind => 3.*

Installation

To install and setup the packages we will work on the server-side and the client-side , using a few steps:

Server Side

Step 1

composer require yazan/laravel-datatable

Step 2

create grid class

php artisan make:data-grid exampleGrid

Client Side

Step 1

npm i @yazan.alnughnugh/vue-datatable

Step 2

// app/resources/js/app.js

 Vue.component('data-table', require('@yazan.alnughnugh/vue-datatable').default);

Quick Example

Start create Grid Class

// app/DataGrid/PostGrid.php

<?php


namespace App\DataGrid;

use Yazan\DataTable\DataGrid;

class PostGrid extends DataGrid
{

    public $model = "App\Models\Post";


}

Make an instance from PostGrid class and return the collection

// app/Http/Controller/PostController.php

public function all(Request $request)
{ 
  $posts = (new PostGrid())->render();
    
  return ['success' => true, 'collection' => $posts];

}

Next, you have to use the data-table component in your blade

// resources/posts/index.blade.php

    <data-table
        :config="{
        url: `posts/all?page=1`,
            },
        }"
        :columns="[
        {
        label: 'ID',
        column: 'id',
        show: true,
            sort:{
              sortable: false,
              sortColumn: 'id',

            },

       },
        {
        label: 'Title',
        column: 'title',
         show: true,
            sort:{
             sortable: true,
             sortColumn: 'title',
             sortDir: 'asc',
            },
       },
       {
        label: 'CreatedAt',
        column: 'created_at',
        show: true,
             sort:{
                sortable: true,
                sortColumn: 'created_at',
                sortDir: 'asc',
             },
       },
       {
        label: 'UpdatedAt',
        column: 'updated_at',
        show: true,
             sort:{
                sortable: true,
                sortColumn: 'updated_at',
                sortDir: 'asc',
             },
       },
        ]
        "

    ></data-table>

Selection filter for relations

Client-Side

• to add select input for relation column you will add filters prop as below, the selection object contains all filter selection data
• show: to disable or enable selection filter
• data: the object is array contains all select input options
• label: name appears beside select input
• relation: relation name you will get it
• column: column you will get it.
• rows: all rows from the database as JSON

// resources/posts/index.blade.php

    <data-table
                :filters="{
                    selection:{
                        show: true,
                        data:[
                            {
                            label: 'Admins',
                            relation: 'createdBy',
                            column: 'first_name',
                            rows: {{json_encode($admins)}}
                            },
                        ]
                    }
               }"
            

    ></data-table>

For more details, You can visit Github.