leek / filament-header-filters
Inline header filter components for Filament tables — attach any BaseFilter to a column header.
Package info
github.com/leek/filament-header-filters
Language:JavaScript
pkg:composer/leek/filament-header-filters
Requires
- php: ^8.2
- filament/filament: ~5.10.3
- spatie/laravel-package-tools: ^1.15
Requires (Dev)
- laravel/pint: ^1.0
- orchestra/testbench: ^9.0 || ^10.0 || ^11.0
- pestphp/pest: ^3.0 || ^4.0
- pestphp/pest-plugin-laravel: ^3.0 || ^4.0
Suggests
- leek/filament-right-click: Right-click context menus for the tables you filter.
- leek/filament-ui-plus: Horizontal-scroll tables, dual sub-navigation, loading bar, and more UI enhancements.
Provides
None
Conflicts
None
Replaces
None
This package is auto-updated.
Last update: 2026-10-20 21:17:15 UTC
README
Inline header filters for Filament tables. Attach any BaseFilter to a column header — select dropdowns, date pickers, min/max ranges, custom multi-field schemas — as a richer alternative to searchable(isIndividual: true).
Screenshot
Requirements
- PHP 8.2+
- Filament v5.10.x (from v5.10.3)
The package replaces Filament's table view with a copy that adds the header filter row, so each release supports one Filament minor version. For Filament v4.x and earlier v5.x versions, use v2.x of this package.
Installation
composer require leek/filament-header-filters
Add the HasHeaderFilters trait to any Livewire component that uses InteractsWithTable (resource list pages, custom Livewire table components):
use Filament\Resources\Pages\ListRecords; use Leek\FilamentHeaderFilters\Concerns\HasHeaderFilters; class ListOrders extends ListRecords { use HasHeaderFilters; }
Styles
Add the package stylesheet to the panel theme configured with ->viteTheme(...). Place it after Filament's theme import so it can adjust the table and header filter styles:
@import '../../../../vendor/filament/filament/resources/css/theme.css'; @import '../../../../vendor/leek/filament-header-filters/resources/css/filament-header-filters.css';
Then rebuild your app assets:
npm run build
If you are using Vite locally, restart or keep running:
npm run dev
Usage
Call ->headerFilter() on any column and pass a filter instance.
Dropdown filter
Use SelectFilter for exact-match column filtering. The default placeholder is "All".
use App\Enums\OrderStatus; use Filament\Tables\Columns\TextColumn; use Filament\Tables\Filters\SelectFilter; TextColumn::make('status') ->badge() ->headerFilter( SelectFilter::make('status') ->options(OrderStatus::class) ->native(false) )
Min/max range filter
Use a custom Filter with two TextInput fields and ->columns(2) for a side-by-side numeric range:
use Filament\Forms\Components\TextInput; use Filament\Tables\Columns\TextColumn; use Filament\Tables\Filters\Filter; use Illuminate\Database\Eloquent\Builder; TextColumn::make('total_price') ->headerFilter( Filter::make('total_price_range') ->columns(2) ->schema([ TextInput::make('min')->numeric()->placeholder('Min'), TextInput::make('max')->numeric()->placeholder('Max'), ]) ->query(fn (Builder $query, array $data): Builder => $query ->when($data['min'] ?? null, fn (Builder $q, $v): Builder => $q->where('total_price', '>=', $v)) ->when($data['max'] ?? null, fn (Builder $q, $v): Builder => $q->where('total_price', '<=', $v)) ) )
Date range filter
Use DatePicker fields for a two-date range:
use Filament\Forms\Components\DatePicker; use Filament\Tables\Columns\TextColumn; use Filament\Tables\Filters\Filter; use Illuminate\Database\Eloquent\Builder; TextColumn::make('created_at') ->label('Order date') ->date() ->headerFilter( Filter::make('order_date_range') ->columns(2) ->schema([ DatePicker::make('from')->placeholder('From')->native(false), DatePicker::make('until')->placeholder('Until')->native(false), ]) ->query(fn (Builder $query, array $data): Builder => $query ->when($data['from'] ?? null, fn (Builder $q, $v): Builder => $q->whereDate('created_at', '>=', $v)) ->when($data['until'] ?? null, fn (Builder $q, $v): Builder => $q->whereDate('created_at', '<=', $v)) ) )
Behavior
- Header filters share state with panel filters (
$tableFilters). Filter indicators, reset, and session persistence all work. - Header filters are always live — they apply immediately on change, regardless of
deferFilters(). - Field labels inside header filters are auto-hidden; the column header acts as the label.
- Hidden columns' header filters are not applied to the query.
Tips
Hide the filters button when only using header filters
If a table has only header filters and no panel filters, hide the filters dropdown so the button doesn't render empty:
use Filament\Tables\Enums\FiltersLayout; public function table(Table $table): Table { return $table ->filtersLayout(FiltersLayout::Hidden) ->columns([ TextColumn::make('status')->headerFilter(/* ... */), // ... ]); }
Filacheck false positive
Filacheck's missing-table-filters rule doesn't recognize ->headerFilter() and will flag tables that only use header filters. Publish the config and disable the rule:
php artisan vendor:publish --tag=filacheck-config
// config/filacheck.php 'missing-table-filters' => [ 'enabled' => false, ],
How it works
The package ships:
Column::macro('headerFilter', ...),getHeaderFilter(),hasHeaderFilter()BaseFilter::macro('columnName', ...),getColumnName(),isHeaderFilter()Table::macro('getHeaderFilters', ...),hasHeaderFilters()- A
HasHeaderFiltersLivewire trait that wires filters into the table, seeds header filter state, and exposesgetTableHeaderFiltersForm() - A view override (
filament-tables::index) that renders the header filter row under the column search row - A small CSS file raising the z-index and lifting overflow clipping so dropdown / date picker popups escape the table container
The view override is a patched copy of Filament's table view. If you upgrade Filament and something breaks, please open an issue.
Testing
composer test
More Filament plugins by Leek
Premium
- Filament UI Plus — Enhanced UI components: dual sub-navigation, animated sidebar, horizontal-scroll tables, loading bar, and more.
- Filament Workflow Engine — Automated workflows with a visual builder, triggers/actions, async execution, and audit logging.
- Filament Decision Tables — Business rules engine with spreadsheet-style decision tables.
Free & open source
- Filament Right Click — Right-click context menus for table rows.
- Filament Subtenant Scope — Second-level tenancy scoping via a topnav dropdown.
- Filament DiceBear — DiceBear avatar provider with 31 styles.
License
MIT. See LICENSE.md.
