Laravel Datatables Html Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require yajra/laravel-datatables-html:^13
   

2. Configure Vite (Laravel 12+): In AppServiceProvider@boot():

   use Yajra\DataTables\Html\Builder;
   Builder::useVite();
   

3. First Usage (Blade View):

   use Yajra\DataTables\Facades\DataTables;
   DataTables::of(User::query())
       ->addColumn('action', function($user) {
           return '<button>Edit</button>';
       })
       ->make(true);
   

First Use Case

Render a paginated, sortable table with server-side processing:

// routes/web.php
Route::get('/users', function() {
    return DataTables::of(User::query())
        ->editColumn('name', 'Name')
        ->addColumn('status', function($user) {
            return $user->active ? '<span class="badge bg-success">Active</span>' : '<span class="badge bg-danger">Inactive</span>';
        })
        ->make(true);
});

Implementation Patterns

Core Workflow

1. Query Integration:

   DataTables::of(Post::query())
       ->select(['id', 'title', 'body'])
       ->where(function($query) {
           $query->where('published', true);
       });
   

2. Column Configuration:

   ->addColumn('author', function($post) {
       return $post->user->name;
   })
   ->editColumn('created_at', 'Published', function($post) {
       return $post->created_at->format('M d, Y');
   })
   ->rawColumns(['author', 'action']);
   

3. Client-Side Features:

   ->addIndexColumn()
   ->orderColumns(['id', 'title'])
   ->selectInput('status', ['active', 'draft'])
   ->filterColumn('title', function($query, $keyword) {
       $query->where('title', 'like', "%{$keyword}%");
   });
   

Integration Patterns

1. Livewire Integration:

   use Yajra\DataTables\Html\Builder;
   Builder::useLivewire();
   

   // Livewire Component
   public function table()
   {
       return DataTables::of(User::query())
           ->make(true);
   }
   

2. Vite Asset Handling:

   // app.blade.php
   @vite(['resources/js/app.js', 'resources/js/datatables.js'])
   

   // datatables.js
   import 'datatables.net-dt/js/dataTables.dataTables';
   

3. Reusable Column Macros:

   // app/Providers/AppServiceProvider.php
   use Yajra\DataTables\DataTables;
   DataTables::macro('statusColumn', function($column) {
       return $this->addColumn($column, function($model) {
           return $model->active ? 'Active' : 'Inactive';
       });
   });
   

   // Usage
   DataTables::of(User::query())
       ->statusColumn('account_status');
   

4. Button Integration:

   ->addButton([
       'name'  => 'export',
       'title' => 'Export',
       'extend' => 'collection',
       'buttons' => [
           ['extend' => 'csv', 'title' => 'CSV'],
           ['extend' => 'excel', 'title' => 'Excel'],
       ]
   ]);
   

Gotchas and Tips

Common Pitfalls

1. Vite Script Loading:

   • Issue: Missing DataTables JS after Builder::useVite().
   • Fix: Ensure Vite processes the DataTables assets:

     // vite.config.js
     export default defineConfig({
         build: {
             rollupOptions: {
                 external: ['datatables.net-dt']
             }
         }
     });
     

2. Server-Side Processing Mismatch:

   • Issue: Client-side errors when server-side processing is enabled.
   • Fix: Verify ->make(true) is used for server-side processing.

3. Column Visibility:

   • Issue: Columns not rendering despite being added.
   • Fix: Use ->rawColumns() for HTML columns or ->visible() for conditional visibility:

     ->addColumn('hidden_column', function($user) {
         return $user->hidden_data;
     })
     ->visibleIf(function() {
         return auth()->user()->can('view_hidden');
     });
     

4. Livewire Conflicts:

   • Issue: Livewire not updating DataTables.
   • Fix: Use ->useLivewire() and ensure Livewire’s Alpine.js compatibility:

     Builder::useLivewire()
             ->useAlpine();
     

Debugging Tips

1. Inspect Generated HTML/JS:

   ->toHtml(['table' => 'datatable', 'script' => 'datatable-script'])
   

   Outputs:

   <table id="datatable" class="display"></table>
   <script>
       $(document).ready(function() {
           $('#datatable').DataTable({...});
       });
   </script>
   

2. Check for JavaScript Errors:

   • Use browser dev tools to verify DataTables JS is loaded and no 404s exist for:
     • dataTables.net-dt.js
     • dataTables.net-buttons/js/dataTables.buttons.js

3. Server-Side Debugging:

   ->toJson()
   

   Returns raw server-side data for validation.

Extension Points

1. Custom Templates:

   ->template('custom_template')
   ->template('
       <div class="custom-wrapper">
           {table}
       </div>
       <div class="custom-footer">
           {footer}
       </div>
   ');
   

2. Dynamic Column Rendering:

   ->addColumn('dynamic', function($model) {
       return view('columns.dynamic', ['model' => $model]);
   });
   

3. Event Listeners:

   ->addScript('
       $(document).on("draw.dt", function() {
           console.log("Table redrawn");
       });
   ');
   

4. Editor Integration:

   use Yajra\DataTables\Editor;
   Editor::of(User::class)
       ->field('name')
       ->field('email')
       ->createButton();