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.