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:

   use Yajra\DataTables\Html\Builder;
   
   public function boot(): void
   {
       Builder::useVite();
   }
   

3. Basic Usage in a controller:

   use Yajra\DataTables\Facades\DataTables;
   
   public function index()
   {
       return DataTables::of(User::query())
           ->addColumn('action', 'users.action')
           ->make(true);
   }
   

4. Render in Blade:

   {!! DataTables::table(['id', 'name', 'email'], 'users') !!}
   

First Use Case: Quick Table with Actions

// Controller
public function users()
{
    return DataTables::of(User::query())
        ->addColumn('action', function($user) {
            return '<a href="'.route('users.edit', $user).'">Edit</a>';
        })
        ->rawColumns(['action'])
        ->make(true);
}

// Blade
{!! DataTables::table(['id', 'name', 'email', 'action'], 'users') !!}

Implementation Patterns

Core Workflows

1. CRUD Table with Server-Side Processing

// Controller
public function index()
{
    return DataTables::of(User::query())
        ->editColumn('name', function($user) {
            return ucfirst($user->name);
        })
        ->addColumn('status', function($user) {
            return $user->active ? '<span class="badge bg-success">Active</span>' : '<span class="badge bg-danger">Inactive</span>';
        })
        ->rawColumns(['status'])
        ->make(true);
}

2. Dynamic Columns Based on User Role

public function adminUsers()
{
    $columns = ['id', 'name', 'email'];
    if (auth()->user()->isSuperAdmin()) {
        $columns[] = 'api_token';
    }

    return DataTables::of(User::query())
        ->columns($columns)
        ->make(true);
}

3. Livewire Integration

// Livewire Component
public function mount()
{
    $this->dataTable = DataTables::of(User::query())
        ->addColumn('action', 'users.livewire_action')
        ->make(true);
}

// Blade
<div wire:ignore>
    {!! $this->dataTable->table(['id', 'name', 'action'], 'users') !!}
</div>

4. Bulk Actions with Buttons

public function users()
{
    return DataTables::of(User::query())
        ->addButton('bulkDelete', 'Delete Selected', 'post', route('users.bulk'), 'danger')
        ->addButton('bulkExport', 'Export', 'get', route('users.export'), 'primary')
        ->make(true);
}

Integration Tips

Vite Optimization

// app/Providers/AppServiceProvider.php
public function boot(): void
{
    Builder::useVite();
    // Optional: Customize DataTables CSS/JS paths
    Builder::setAssetPath('vendor/yajra/datatables-html/resources/assets');
}

Custom Column Rendering

// Blade template (resources/views/users/action.blade.php)
<a href="{{ route('users.edit', $user->id) }}" class="btn btn-sm btn-primary">Edit</a>

// Controller
->addColumn('action', 'users.action')

Editor Integration

public function editableUsers()
{
    return DataTables::of(User::query())
        ->addColumn('name', function($user) {
            return $user->name;
        })
        ->editColumn('name', 'users.name_editor')
        ->make(true);
}

Layout Customization

public function customLayout()
{
    return DataTables::of(User::query())
        ->setTableAttribute('class', 'table-striped')
        ->setTableAttribute('id', 'custom-users-table')
        ->make(true);
}

Gotchas and Tips

Common Pitfalls

1. Vite Module Issues

   • Problem: DataTables not loading with Vite.
   • Fix: Ensure Builder::useVite() is called in AppServiceProvider before any DataTables usage.
   • Debug: Check browser console for Uncaught ReferenceError: $ is not defined. Add:

     Builder::setScriptPath('https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js');
     

2. Raw Columns Not Rendering

   • Problem: HTML in rawColumns is escaped.
   • Fix: Use ->rawColumns() after adding the column:

     ->addColumn('action', '<a href="#">Edit</a>')
     ->rawColumns(['action']);
     

3. Livewire Conflicts

   • Problem: DataTables not updating with Livewire.
   • Fix: Use wire:ignore on the table and manually trigger updates:

     // Custom script
     $(document).on('livewire:init', () => {
         $.fn.dataTable.isDataTable();
     });
     

4. Pagination Mismatch

   • Problem: Pagination counts don’t match displayed rows.
   • Fix: Ensure your query uses ->paginate() or ->simplePaginate() before passing to DataTables:

     DataTables::of(User::query()->paginate(10))
     

5. Editor Not Saving

   • Problem: Inline edits fail silently.
   • Fix: Verify your editor route and CSRF token:

     ->editColumn('name', 'users.name_editor', 'name')
         ->addEditor('name', 'users.name_editor');
     

Debugging Tips

1. Inspect Generated HTML/JS

   • Use browser dev tools to check if DataTables scripts are loaded:

     Builder::setScriptPath(public_path('vendor/datatables/js'));
     Builder::setStylePath(public_path('vendor/datatables/css'));
     

2. Enable Query Logging

   DataTables::of(User::query()->toBase()->getQuery())
       ->addColumn('name', function($user) {
           \Log::debug($user->toArray());
           return $user->name;
       });
   

3. Check for JavaScript Errors

   • Common causes:
     • Missing jQuery (Builder::setScriptPath()).
     • Conflicting DataTables initializations (use unique table IDs).

Extension Points

1. Custom Templates

   // Override default table template
   DataTables::of(User::query())
       ->setTableTemplate('<div class="custom-wrapper">{table}</div>');
   

2. Dynamic Column Visibility

   ->columns(['id', 'name', 'email'])
       ->visibleIf('email', fn() => auth()->user()->isAdmin());
   

3. Conditional Buttons

   ->addButton('export', 'Export', 'get', route('users.export'))
       ->addButton('import', 'Import', 'get', route('users.import'))
       ->visibleIf('import', fn() => auth()->user()->can('import-users'));
   

4. Custom Scripts

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

5. Livewire 4+ Compatibility

   // For Livewire 4.x
   Builder::useLivewire4();
   

Configuration Quirks

1. Bootstrap Version Mismatch

   • Ensure Paginator::useBootstrapFive() (or Four) matches your frontend CSS.

2. Vite Asset Paths

   • If using custom Vite paths, update:

     Builder::setAssetPath('resources/js/datatables');
     

3. Editor Field Types

   • For non-standard fields (e.g., select2), use:

     ->addEditor('role', 'users.role_editor')
         ->field('role')
         ->field('role_id');
     

4. Server-Side Processing

   • For complex queries, use ->serverSide() with custom query logic:

     ->serverSide(function($query) {
         $query->where('active', $request->get('active', 1));
     });