Download the PHP package zvizvi/filament-column-filters without Composer

Filament Column Filters

Excel-style column header filters for Filament tables.

Adds a small filter icon to the header of any table column. Clicking it opens a popup toolbar — just like the column filters you know from Excel — with a filter type you choose per column:

• Search — a free-text search on the column.
• Date — a date range with quick presets (today, yesterday, this week, last week, this month, last month, last 7 days, last 30 days, this year, last year) and a custom from/until range.
• Select — a single or multi value picker.
• Range — a numeric from/until range with two number inputs side by side.

The header filters are backed by real Filament table filters, so they apply to the table query like any other filter and show the standard filter indicators (with working remove buttons) — but they do not clutter the standard filters dropdown. When you sync with an existing filter you already have on the table (via syncWith()), the popup reads and writes that filter's state, so choosing a value in the header popup updates the regular filter — dropdown included — and vice versa.

RTL is fully supported and Hebrew translations are included.

Installation

Register the plugin on each panel that should have column filters. This is required — the columnFilter() method and the header popups only become available on panels where the plugin is registered:

Usage

Attach a filter to any table column with the columnFilter() method:

That's it. Each configured column gets a filter icon in its header, and a matching filter is automatically registered on the table behind the scenes. The auto-registered filter shows up as a regular filter indicator when active (removable as usual), but it does not appear in the standard filters dropdown — the popup is its only editing UI. If you want it in the dropdown too, define a regular filter yourself and connect the two with syncWith().

Filter types

Search

Performs a LIKE %value% search on the column.

Date

Filters records between the chosen from / until dates (each side optional). The quick-select presets fill the custom range for you.

Select

When there are many options, a search field appears at the top of the popup to filter the option list (client-side).

Range

Filters records between the entered minimum / maximum values (each side optional).

Syncing with an existing table filter

If the table already has a regular Filament filter for the same value, the column filter syncs with it instead of registering its own — the header popup reads and writes that filter's state, so both stay in sync and only one indicator shows.

This happens automatically when a regular filter matches the column: a filter named exactly like the column, or — for select filters — any SelectFilter on the same attribute. In that case options and single/multiple mode are read from the existing filter too, and no configuration is needed:

When the names don't line up (or the filter's state keys differ), point the column filter at the right filter by name with syncWith():

For a select sync, the options and single/multiple mode are read automatically from the existing SelectFilter (you can still override with ->options()).

For filters with custom form field names, map the popup's fields to your filter's state keys:

The search filter maps its single field the same way: ->syncWith('name', ['value' => 'q']).

Common options

All filter types support:

Columns whose name contains a dot (e.g. author.name) are filtered through the relationship automatically using whereHas().

Tables built outside a Livewire request

The plugin registers its generated filters from Livewire's mount, hydrate, call and render events, which covers every path Filament itself takes. It does not cover code that builds the table headlessly — instantiating the page class and reading getTable() with no Livewire request behind it, which is how a custom endpoint or a table-driving package may work. There, none of those events fire, the generated filters never reach the table, and applying one fails with The filter [cf_name] does not exist.

Add the trait to such a page:

It registers (and decorates) from the component's own boot, which both paths run. Everything stays idempotent, so a normal request does no extra work. Apply it to the page class itself rather than a parent — Livewire resolves these hooks in class_uses_recursive() order, and being last is what guarantees the table already exists.

Styling

Every colour is exposed as a CSS variable, so you can restyle the trigger and the panel without overriding rules. Declare the ones you want in a stylesheet loaded after the plugin's:

Most variables derive from --fcf-accent, so overriding that alone recolours the active icon, the dot, the primary button, the links, the checkboxes and the active date presets.

Translations

English and Hebrew translations are included. Publish them to customize:

Development

License

The MIT License (MIT). Please see License File for more information.