Livewire Datatable Views Bs4 Laravel Package

Getting Started

Minimal Steps

1. Install Dependencies

   composer require stevenyangtw/livewire-datatable-views-bs4
   composer require livewire/livewire mediconesystems/livewire-datatables
   

   (Optional but recommended: composer require nascent-africa/jetstrap for enhanced UI components.)

2. Publish Views

   php artisan vendor:publish --tag="livewire-datatable-views-bs4"
   

   This publishes Bootstrap 4-compatible views to resources/views/vendor/livewire-datatable-views-bs4.

3. First Use Case: Basic Datatable Create a Livewire component (e.g., UserTable) and extend MedicOneSystems\LivewireDatatable\View\View:

   use MedicOneSystems\LivewireDatatable\View\View;
   use StevenYang\LivewireDatatableViewsBs4\View as Bs4View;
   
   class UserTable extends View
   {
       public function configure(): void
       {
           $this->setView(Bs4View::class); // Override default view with BS4
           $this->column('id');
           $this->column('name');
           $this->column('email');
       }
   }
   

   Render it in a Blade view:

   <livewire:user-table />
   

Implementation Patterns

Core Workflows

1. View Overrides

   • Replace default datatable views (e.g., table.blade.php, pagination.blade.php) by publishing and modifying files in resources/views/vendor/livewire-datatable-views-bs4.
   • Example: Customize pagination controls in pagination.blade.php:

     <nav aria-label="Page navigation">
         <ul class="pagination">
             @if ($paginator->hasPages())
                 <li class="page-item {{ $paginator->currentPage === 1 ? 'disabled' : '' }}">
                     <a class="page-link" href="{{ $paginator->previousPageUrl() }}">Previous</a>
                 </li>
                 <!-- Customize middle pages here -->
                 <li class="page-item {{ $paginator->currentPage === $paginator->lastPage ? 'disabled' : '' }}">
                     <a class="page-link" href="{{ $paginator->nextPageUrl() }}">Next</a>
                 </li>
             @endif
         </ul>
     </nav>
     

2. Component Integration

   • Extend MedicOneSystems\LivewireDatatable\View\View and inject BS4 views:

     class ProductTable extends View
     {
         public function configure(): void
         {
             $this->setView(Bs4View::class);
             $this->column('sku')->sortable();
             $this->column('price')->format('$###,###.00');
         }
     }
     

   • Use wire:model for dynamic interactions (e.g., search, sorting):

     <livewire:product-table :key="$refreshId" />
     

3. Theming with Jetstrap

   • Leverage Jetstrap’s components (e.g., modals, alerts) for actions like bulk delete:

     <x-jetstrap::modal wire:model="showDeleteModal">
         <x-slot name="title">Confirm Deletion</x-slot>
         <x-slot name="content">
             Are you sure you want to delete these {{ $selectedRows }} items?
         </x-slot>
         <x-slot name="footer">
             <button wire:click="deleteSelected" class="btn btn-danger">Delete</button>
         </x-slot>
     </x-jetstrap::modal>
     

4. Dynamic Columns

   • Define columns programmatically (e.g., for admin panels):

     public function configure(): void
     {
         $this->setView(Bs4View::class);
         $this->columns = collect(request('columns', []))
             ->map(fn ($column) => $this->column($column['name'])->label($column['label']));
     }
     

Gotchas and Tips

Pitfalls

1. View Publishing Overwrite

   • Publishing views overwrites existing files. Backup resources/views/vendor/livewire-datatable-views-bs4 before customizing.
   • Fix: Use git checkout or cp -r to preserve changes.

2. Bootstrap 4 vs. 5 Conflicts

   • The package uses BS4 classes (e.g., .pagination). If your project uses BS5, conflicts may arise (e.g., .form-control styles).
   • Fix: Override specific classes in your CSS or use a BS4/5 hybrid setup.

3. Livewire Datatables Version Lock

   • This package depends on mediconesystems/livewire-datatables (v1.x). Ensure compatibility:

     composer require mediconesystems/livewire-datatables:^1.0
     

   • Gotcha: Newer versions of Livewire Datatables may break views.

4. Language Files Missing

   • The package includes limited language support. For custom translations:
     • Publish language files (if available) or extend the AppServiceProvider:

       public function boot(): void
       {
           $this->loadTranslationsFrom(__DIR__.'/../resources/lang', 'datatable');
       }
       

Debugging Tips

1. View Resolution Issues

   • If the datatable doesn’t render, verify:
     • The view path is correct (resources/views/vendor/livewire-datatable-views-bs4).
     • The component extends View and calls setView(Bs4View::class).
   • Debug: Temporarily add {{ dd($this->view) }} in the component to check the view class.

2. CSS/JS Conflicts

   • BS4 datatables may need manual styling for:
     • Responsive tables: Add table-responsive wrapper.
     • Tooltips: Include Popper.js (@popperjs/core).
   • Fix: Extend the published styles.blade.php:

     @push('styles')
         <link href="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="...">
     @endpush
     

3. Performance with Large Datasets

   • For >10,000 rows, enable server-side processing:

     public function configure(): void
     {
         $this->setView(Bs4View::class);
         $this->enableServerSide(); // Critical for performance
     }
     

Extension Points

1. Custom Actions

   • Add buttons to rows using action():

     $this->action('Edit', 'edit', function ($row) {
         return '<a href="/users/'.$row->id.'/edit" class="btn btn-sm btn-primary">Edit</a>';
     })->format('html');
     

   • Style with BS4 classes (e.g., btn btn-warning for "View").

2. Modal-Based Edits

   • Combine with Jetstrap modals for in-place editing:

     <livewire:user-table @this.deleted="showSuccessToast" />
     <x-jetstrap::toast wire:model="showToast" />
     

3. Export Buttons

   • Add CSV/Excel exports via action():

     $this->action('Export', 'export', function () {
         return '<a href="/users/export" class="btn btn-sm btn-success">Export</a>';
     });
     

4. Conditional Columns

   • Hide/show columns based on user roles:

     $this->column('secret_data')->visible(auth()->user()->isAdmin());