Filter Indicator not showing for Filament table with custom filter

I have implemented a custom table filter in Filament that searches the country_names table for all countries to create select options, then queries the 'distrib' field in the scientific_names table of the selection. The code below in my ScientificName model is functional , except no indicator is showing in the filament table to show that the filter is active. Any idea how I could deal with this issue?

use Illuminate\Database\Eloquent\Builder;
use App\Models\ScientificName;
use App\Models\CountryName;
use Filament\Tables\Filters\Filter;
use Filament\Forms\Components\Select;

Filter::make('Distribution')
    ->indicator(function ($state) {
        return $state['distrib'] ? 'Country: ' . $state['distrib'] : null;
    })
    ->form([
        Select::make('distrib')
            ->options(function () {
                return CountryName::query()
                    ->whereNotNull('country_name')
                    ->where('country_code', 'cycads native')
                    ->orderBy('country_name', 'asc')
                    ->pluck('country_name', 'country_name')
                    ->toArray();
            })
    ])
    ->query(function (Builder $query, array $data): Builder {
        return $query->when(
            isset($data['distrib']),
            function (Builder $query) use ($data) {
                return $query->where('distrib', 'LIKE', '%' . $data['distrib'] . '%');
            }
        );
    });

LaryAI

1 year ago

Level 58

To address the issue of the filter indicator not showing in your Filament table, you need to ensure that the filter state is correctly set and that the indicator function is properly configured to reflect the active state of the filter.

Here's a revised version of your code with some adjustments to ensure the filter indicator works as expected:

use Illuminate\Database\Eloquent\Builder;
use App\Models\ScientificName;
use App\Models\CountryName;
use Filament\Tables\Filters\Filter;
use Filament\Forms\Components\Select;

Filter::make('Distribution')
    ->form([
        Select::make('distrib')
            ->options(function () {
                return CountryName::query()
                    ->whereNotNull('country_name')
                    ->where('country_code', 'cycads native')
                    ->orderBy('country_name', 'asc')
                    ->pluck('country_name', 'country_name')
                    ->toArray();
            })
    ])
    ->query(function (Builder $query, array $data): Builder {
        return $query->when(
            isset($data['distrib']),
            function (Builder $query) use ($data) {
                return $query->where('distrib', 'LIKE', '%' . $data['distrib'] . '%');
            }
        );
    })
    ->indicator(function ($state) {
        return isset($state['distrib']) && $state['distrib'] ? 'Country: ' . $state['distrib'] : null;
    });

Key Adjustments:

Indicator Function: Ensure the indicator function checks if the distrib key is set and not null. This ensures the indicator text is only shown when the filter is active.
Filter State: The indicator function should correctly reflect the state of the filter by checking the distrib key in the $state array.

Explanation:

Form Configuration: The Select component is configured to fetch options from the CountryName model.
Query Modification: The query method modifies the query based on the selected distrib value.
Indicator: The indicator function returns a string indicating the active filter state, which will be displayed in the Filament table.

By ensuring the indicator function correctly checks the filter state, the indicator should now display when the filter is active.

mcalonje

1 year ago

Level 2

I tried Lary Ai's solution, but I still have the same issue. The filter works, but it doesn't show up in the indicator.

mcalonje

1 year ago

Best Answer

Level 2

I found a solution using ->indicateUsing instead of indicator() which doesn't appear to work with custom filter forms. Below is the corrected code which now works:

                Filter::make('Distribution')
                    ->indicateUsing(function ($state) {
                        return isset($state['distrib']) && $state['distrib'] ? 'Country: ' . $state['distrib'] : null;
                    })
                    ->form([
                        Select::make('distrib')
                            ->options(function () {
                                return CountryName::query()
                                    ->whereNotNull('country_name')
                                    ->where('country_code', 'cycads native')
                                    ->orderBy('country_name', 'asc')
                                    ->pluck('country_name', 'country_name')
                                    ->toArray();
                            })
                    ])
                    ->query(function (Builder $query, array $data): Builder {
                        return $query->when(
                            isset($data['distrib']),
                            function (Builder $query) use ($data) {
                                return $query->where('distrib', 'LIKE', '%' . $data['distrib'] . '%');
                            }
                        );
                    }),
```

1 like

Please or to participate in this conversation.