How to dynamically update Province select based on Region select in Filament Tables filter?
Hi everyone,
I’m using Filament Tables and have two dependent filters: Region and Province. I want the Province select options to update dynamically when a Region is selected, without refreshing the entire page.
Here’s my current setup:
php
Copier le code
->filters([
SelectFilter::make('region_id')
->label('Region')
->searchable()
->options(Region::pluck('name', 'id'))
->query(fn($query, $data) => $data ? $query->whereHas('province', fn($q) => $q->where('region_id', $data)) : null),
SelectFilter::make('province_id')
->label('Province')
->searchable()
->options(fn() => request()->input('tableFilters.region_id')
? Province::where('region_id', request()->input('tableFilters.region_id'))->pluck('name', 'id')->toArray()
: [])
->query(fn($query, $data) => $data ? $query->where('province_id', $data) : null),
])
The Province select doesn’t update after selecting a Region unless the page is refreshed.
Is there a way to dynamically update the Province options upon Region change, using a Filament-native approach or Livewire?
Thanks in advance!
Solution:Jump to solution
->filters([
Filter::make('region_and_province')
->label('Région & Province')
->form([
Select::make('region_id')...
10 Replies
I’d start by adding ->live() to the region select. Without it nothing will refresh.
live() It’s not working on filters 😦
Might need to modify the query itself since they are two different filters. https://filamentphp.com/docs/3.x/tables/filters/custom
Or a filter that has both so they can be dependent on the same scope.
thank you for the suggestion! I’ll explore the option of combining the two filters into one or creating a custom filter as outlined in the documentation. I’ll update here if I find a working solution. 😊
Thank you for the suggestion! I implemented a custom filter combining both Region and Province as described in the documentation, and it works perfectly. Appreciate your help! 😊
If you can, please provide your solution to help future people who may have the same issue.
And mark it as the solution.
am new on discord where can i do this ?
Solution
->filters([
Filter::make('region_and_province')
->label('Région & Province')
->form([
Select::make('region_id')
->label('Région')
->searchable()
->options(Region::pluck('name', 'id'))
->reactive()
->afterStateUpdated(function ($state, callable $set) {
// Réinitialise la province lorsque la région change
$set('province_id', null);
}),
Select::make('province_id')
->label('Province')
->searchable()
->options(function (callable $get) {
$regionId = $get('region_id'); // Récupérer l'état actuel de la région
if (!$regionId) {
return []; // Si aucune région n'est sélectionnée, retourne une liste vide
}
return Province::where('region_id', $regionId)->pluck('name', 'id')->toArray();
}),
])
->query(function ($query, $data) {
// Applique les filtres Région et Province au query
if (isset($data['region_id']) && $data['region_id']) {
$query->whereHas('province', function ($q) use ($data) {
$q->where('region_id', $data['region_id']);
});
}
if (isset($data['province_id']) && $data['province_id']) {
$query->where('province_id', $data['province_id']);
}
}),
])
That’s good enough. Thank you.