Laravel Livewire Tables Advanced Filters Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require lowerrocklabs/laravel-livewire-tables-advanced-filters
   

   Publish the config (if needed):

   php artisan vendor:publish --provider="LowerRockLabs\LaravelLivewireTablesAdvancedFilters\ServiceProvider"
   

2. Basic Usage Extend your existing LivewireTable class to include advanced filters:

   use LowerRockLabs\LaravelLivewireTablesAdvancedFilters\Traits\HasAdvancedFilters;
   
   class UserTable extends LivewireTable
   {
       use HasAdvancedFilters;
   
       // ...
   }
   

3. First Use Case Add a numeric range filter to a column:

   $this->addColumn('price', 'Price', 'text')->addFilter(
       new \LowerRockLabs\LaravelLivewireTablesAdvancedFilters\Filters\NumericRangeFilter('price')
   );
   

Implementation Patterns

Workflows

1. Filter Integration

   • Numeric Range: Use for columns like price, quantity, or age.

     $this->addColumn('salary', 'Salary')->addFilter(
         new \LowerRockLabs\LaravelLivewireTablesAdvancedFilters\Filters\NumericRangeFilter('salary')
     );
     

   • Date Range: Ideal for created_at, updated_at, or custom date fields.

     $this->addColumn('created_at', 'Created At')->addFilter(
         new \LowerRockLabs\LaravelLivewireTablesAdvancedFilters\Filters\DateRangeFilter('created_at')
     );
     

2. Smart Select (Select2-like)

   • Fetch dynamic options via a method (e.g., getStatusOptions()) and bind to a column:

     $this->addColumn('status', 'Status')->addFilter(
         new \LowerRockLabs\LaravelLivewireTablesAdvancedFilters\Filters\SmartSelectFilter('status', $this->getStatusOptions())
     );
     
     public function getStatusOptions()
     {
         return ['active' => 'Active', 'inactive' => 'Inactive'];
     }
     

3. Customizing Filters

   • Override default behavior in your table class:

     public function configureNumericRangeFilter($filter)
     {
         $filter->min = 0;
         $filter->max = 1000;
         $filter->step = 10;
     }
     

4. Blade Integration

   • Use the provided filter components in your table view:

     @livewireTablesAdvancedFilters.scripts
     @livewireTablesAdvancedFilters.styles
     
     @livewireTablesAdvancedFilters.numericRange('price')
     @livewireTablesAdvancedFilters.dateRange('created_at')
     @livewireTablesAdvancedFilters.smartSelect('status', $options)
     

Integration Tips

• Query Builder Compatibility Ensure your buildQuery method handles the filter inputs:

  public function buildQuery()
  {
      if ($this->filters['price_min'] || $this->filters['price_max']) {
          $query->whereBetween('price', [
              $this->filters['price_min'] ?? null,
              $this->filters['price_max'] ?? null
          ]);
      }
  }
  

• Tailwind/Bootstrap Support Configure the package to match your frontend framework:

  // config/livewire-tables-advanced-filters.php
  'view' => [
      'tailwind' => true, // or 'bootstrap'
  ],
  

• Localization Override default labels in your language files (e.g., resources/lang/en/livewire-tables.php):

  'numeric_range' => [
      'min' => 'Minimum',
      'max' => 'Maximum',
  ],
  

Gotchas and Tips

Pitfalls

1. Filter Persistence

   • Filters are not automatically persisted across table reloads. Manually save/load them if needed:

     protected $persistentFilters = ['price_min', 'price_max'];
     
     public function mount()
     {
         $this->loadPersistentFilters();
     }
     

2. Date Format Mismatch

   • Ensure your database date format matches the filter’s expected format (e.g., Y-m-d for DateRangeFilter):

     $filter = new \LowerRockLabs\LaravelLivewireTablesAdvancedFilters\Filters\DateRangeFilter('created_at');
     $filter->format = 'Y-m-d';
     

3. Select2 Dependencies

   • The SmartSelectFilter requires Select2. Include its assets in your layout:

     <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
     <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
     

4. Query Performance

   • Avoid complex filters on large datasets. Use database indexes or lazy-loading:

     $query->whereBetween('price', [...])->latest();
     

Debugging

1. Filter Inputs Dump filter inputs to debug:

   dd($this->filters);
   

2. Component Rendering Check if the filter component is rendering by inspecting the Blade view. Ensure:

   • The @livewireTablesAdvancedFilters directives are correctly placed.
   • The wire:model bindings match the filter properties (e.g., price_min, price_max).

3. JavaScript Errors

   • Clear browser cache if Select2 or datepicker assets fail to load.
   • Verify no global JavaScript conflicts (e.g., duplicate $ or jQuery bindings).

Extension Points

1. Custom Filters Extend the base filter class to create reusable filters:

   class CustomRangeFilter extends \LowerRockLabs\LaravelLivewireTablesAdvancedFilters\Filters\BaseFilter
   {
       public $min;
       public $max;
   
       public function apply($query)
       {
           $query->whereBetween('custom_field', [$this->min, $this->max]);
       }
   }
   

2. Override Default Views Publish and modify the package views:

   php artisan vendor:publish --tag=livewire-tables-advanced-filters-views
   

   Edit files in resources/views/vendor/livewire-tables-advanced-filters/.

3. Dynamic Filter Options Fetch options asynchronously for SmartSelectFilter:

   $this->addColumn('country', 'Country')->addFilter(
       new \LowerRockLabs\LaravelLivewireTablesAdvancedFilters\Filters\SmartSelectFilter(
           'country',
           $this->getCountries()
       )
   );
   
   public function getCountries()
   {
       return Country::pluck('name', 'code')->toArray();
   }
   

4. Conditional Filters Show/hide filters based on user roles or column visibility:

   if (auth()->user()->can('manage_prices')) {
       $this->addColumn('price')->addFilter(new \LowerRockLabs\LaravelLivewireTablesAdvancedFilters\Filters\NumericRangeFilter('price'));
   }