Livewire Datatable Bs4 Laravel Package

## Getting Started

### Minimal Setup
1. **Installation**:
   ```bash
   composer require emmanuel/livewire-datatable-bs4
   php artisan vendor:publish --tag="livewire-datatable-bs4"

This publishes the Bootstrap 4 views for livewire-datatables under resources/views/vendor/livewire-datatable-bs4.

2. Basic Usage: Extend your Livewire datatable component with the new views:

   use MedicOneSystems\LivewireDatatable\View\ViewFactory;
   
   public function configureViewFactory()
   {
       return ViewFactory::new()
           ->withBootstrap4();
   }
   

3. First Use Case: Replace the default datatable view in a component like this:

   use MedicOneSystems\LivewireDatatable\View\ViewFactory;
   
   class UserDatatable extends Datatable
   {
       public function configureViewFactory()
       {
           return ViewFactory::new()
               ->withBootstrap4()
               ->withColumns([
                   Column::make("ID", "id"),
                   Column::make("Name", "name"),
               ]);
       }
   }
   

   Then render it in a Blade view:

   <livewire:user-datatable />
   

Implementation Patterns

Common Workflows

1. View Customization: Override specific parts of the datatable (e.g., pagination, table headers) by publishing the views and modifying them:

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

   Then edit files in resources/views/vendor/livewire-datatable-bs4.

2. Column Styling: Use Bootstrap 4 classes directly in column definitions:

   Column::make("Status", "status")
       ->sortable()
       ->searchable()
       ->addClass('text-center') // Bootstrap 4 class
       ->format(fn($value) => '<span class="badge ' . ($value === 'active' ? 'badge-success' : 'badge-danger') . '">' . $value . '</span>');
   

3. Integration with Jetstream/Jetstrap: If using Jetstrap, leverage its components for consistency:

   <x-jetstrap::card>
       <livewire:user-datatable />
   </x-jetstrap::card>
   

4. Dynamic Column Rendering: Use Blade components for reusable column logic:

   Column::make("Actions", "actions")
       ->format(fn($row) => view('components.datatable-actions', ['row' => $row])),
   

5. Theming: Override the default Bootstrap 4 CSS by extending the package’s styles:

   /* resources/css/app.css */
   @import 'vendor/livewire-datatable-bs4/css/datatable.css';
   .livewire-datatable-bs4 {
       --bs-primary: #your-color;
   }
   

Gotchas and Tips

Pitfalls

1. View Publishing Overwrite:

   • Publishing views (vendor:publish) will overwrite your customizations. Use --force cautiously.
   • Solution: Keep a backup of modified views or use update instead of publish for incremental changes.

2. Bootstrap 4 Dependency:

   • The package assumes Bootstrap 4 is installed. Conflicts may arise if using Bootstrap 5 or other CSS frameworks.
   • Solution: Check for class collisions (e.g., .table, .form-control) and override them in your CSS.

3. Livewire Datatables Version Lock:

   • This package is tied to MedicOneSystems/livewire-datatables. Major version mismatches (e.g., v1 vs. v2) will break functionality.
   • Solution: Pin the dependency in composer.json:

     "mediconesystems/livewire-datatables": "^1.0"
     

4. JavaScript Conflicts:

   • The package includes minimal JS, but custom scripts (e.g., for tooltips or modals) may conflict with Livewire’s reactivity.
   • Solution: Use Livewire’s @this or @entangle directives for dynamic elements.

5. Pagination Styling:

   • Bootstrap 4’s pagination classes (e.g., .page-link) may not align perfectly with the package’s defaults.
   • Solution: Customize the pagination.blade.php view or use a third-party pagination component.

Debugging Tips

1. Inspect Rendered HTML: Use browser dev tools to verify classes/structure. Example:

   @dump($this->datatable->html())
   

   (Requires MedicOneSystems/livewire-datatables@dev for this method.)

2. Check Published Views: After publishing, verify files exist in:

   resources/views/vendor/livewire-datatable-bs4/
   

3. Livewire Logs: Enable Livewire logging to debug component interactions:

   LIVEWIRE_LOG_LEVEL=debug
   

Extension Points

1. Custom Views: Extend the package by creating a new view service provider:

   // app/Providers/DatatableServiceProvider.php
   use MedicOneSystems\LivewireDatatable\View\ViewFactory;
   
   class DatatableServiceProvider extends ServiceProvider
   {
       public function register()
       {
           ViewFactory::macro('withCustomStyles', function () {
               return $this->withView('custom-datatable');
           });
       }
   }
   

2. Localization: Override language files in resources/lang/vendor/livewire-datatable-bs4.

3. Headless Mode: For API-only use, disable views entirely:

   public function configureViewFactory()
   {
       return ViewFactory::new()->withoutViews();
   }
   

4. Server-Side Processing: Combine with livewire-tables for large datasets:

   use LivewireTables\Column\Column;
   use LivewireTables\Views\ViewFactory;
   
   public function configureViewFactory()
   {
       return ViewFactory::new()
           ->withBootstrap4()
           ->withColumns([
               Column::make("ID", "id"),
           ]);
   }
   

---