Laravel Livewire Tables Documentation

🎉 Enjoying this package? Consider sponsoring me on GitHub or buying me a beer.

This is the documentation for v3. You can switch versions in the menu at the top. Check your current version with the following command:

composer show rappasoft/laravel-livewire-tables

Livewire Custom Filter (Beta)

IN BETA This feature is currently in beta, and use in production is not recommended.

Usage

This allows you to use a child/nested Livewire Component in place of the existing Filters, giving you more control over the look/feel/behaviour of a filter.

To use a LivewireComponentFilter, you must include it in your namespace:

1use Rappasoft\LaravelLivewireTables\Views\Filters\LivewireComponentFilter;

When creating a filter:

  • Specify a unique name
  • Set the path to a valid Livewire Component
  • Define a filter() callback to define how the returned value will be used.
1public function filters(): array
2{
3 return [
4 LivewireComponentFilter::make('My External Filter')
5 ->setLivewireComponent('my-test-external-filter')
6 ->filter(function (Builder $builder, string $value) {
7 $builder->where('name', 'like', '%'.$value.'%');
8 }),
9 ];
10}

Configuring Your Livewire Filter Component

A basic example (replicating the Text Filter) looks like the below, note the usage of the "IsExternalFilter" trait.

1<?php
2 
3namespace App\Livewire;
4 
5use Livewire\Component;
6use Rappasoft\LaravelLivewireTables\Views\Traits\IsExternalFilter;
7 
8class MyTestExternalFilter extends Component
9{
10 use IsExternalFilter;
11 
12 public function render()
13 {
14 return view('livewire.my-test-external-filter');
15 }
16}

Should you prefer not to use the IsExternalFilter trait, the below contains all relevant code:

1<?php
2 
3namespace App\Livewire;
4 
5use Livewire\Component;
6use Livewire\Attributes\Modelable;
7 
8class MyTestExternalFilter extends Component
9{
10 #[Modelable]
11 public $value = '';
12 
13 public $filterKey = '';
14 
15 public function render()
16 {
17 return view('livewire.my-test-external-filter');
18 }
19}

Important Notes for Livewire Component Filter Blade

  • You must update the "value" property on your component in order to return a value to the DataTableComponent. This is setup via the "IsExternalFilter" trait.
  • You should use "debounce" rather than "live" to avoid repetitive updates to the DataTableComponent

An example "my-test-external-filter.blade.php" is given below:

1<div role="menuitem">
2 <div class="rounded-md shadow-sm" >
3 <input wire:model.debounce.1000ms="value"
4 type="text"
5 id="my_test_external_filter_input"
6 class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
7 placeholder=""
8 >
9 </div>
10</div>

Important Notes For The livewire-component-filter.blade.php

  • It is strongly recommmended not to publish, nor update this file, while this feature is in beta, as it is subject to change at short notice, which may lead to breaking changes.