@yazan.alnughnugh/vue-datatable

Supporting Laravel-vue-datatable

• Become sponsor on Patreon.
• One-time donation via crypto-currencies.

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>