Supporting Laravel-vue-datatable

Introduction

if you want to create DataTable easy and quickly with crazy features, this package is for you.

These two Laravel packages are for making easy and quickly DataTable for your work with several features like:

Searching
Sorting
Adding New Relations
Support for astrotomic/laravel-translatable Package: Seamlessly integrate with the astrotomic/laravel-translatable package for - multilingual support.
Multiple Selections
Delete/Delete All
Restructuring Data
Permission Access
Response Notifications for Events
Pagination

The goal is to create Datatable in easy way using ajax, with interesting features, just with little steps, you can create it

Official Documentation

Documentation for Laravel Vue Datatable can be found here here

Demo

DataTable Demo

Quick Example

Start create Grid Class

// app/DataGrid/PostGrid.php

namespace App\\DataGrid;

use Yazan\DataTable\Mysql\Eloquent\Eloquent;

class PostGrid
{
	use Eloquent;

    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];

}

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>

Recommend Projects