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

->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']);
}
}),
])