Filter

Composable filter pills and bar for building advanced data filtering interfaces.

Installation

dotnet add package Lumeo.DataGrid

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

@using Lumeo

<Filter />

Tested Tier 3 · A11y + behavior

Render Behavior A11y Keyboard Scale E2E

21 tests across 4 files (no render-contract smoke — covered by its own tests). Auto-generated from the test suite.

Filters with various field types

Filters with search input

Filters with multi-select

Filters with data table

ID	Task	Status	Priority	Assignee
1001	Migrate database to PostgreSQL 16	Active	High	JD John Davis
1002	Redesign onboarding flow	Active	Medium	SC Sarah Chen
1003	Q1 campaign landing page	Pending	High	LP Lisa Park
1004	Fix checkout timeout errors	Active	Critical	MT Mike Torres
1005	Update sales deck for Enterprise	Inactive	Low	JD John Davis
1006	Implement SSO integration	Active	High	SC Sarah Chen
1007	Customer feedback analysis	Pending	Medium	LP Lisa Park
1008	Design system color audit	Inactive	Low	MT Mike Torres

Showing 8 of 8 results

Data-driven Filters model

Price > 100

Status is Active

Name contains lumeo

FilterPill styles

Status: Active

Priority: High

Category: Engineering

Assignee: Sarah Chen

Search: "database"

Prop	Type	Default	Description
Label	string	""	The filtered field's name, shown as the pill's leading label (and in the dismiss button's aria-label).
Operator	string?	—	Optional comparison operator shown between Label and Value (e.g. "=", ">", "contains"). When null the pill reads "Label: Value". (#319)
Value	string	""	The filter's display value, shown after Label (and Operator when set).
Class	string?	—	Additional CSS classes merged onto the pill's underlying Badge.
AdditionalAttributes	Dictionary<string, object>?	—	Unmatched attributes splatted onto the pill's underlying Badge.

Events

OnDismiss

EventCallback

Invoked when the pill's dismiss (×) button is clicked.

Prop	Type	Default	Description
ChildContent	RenderFragment?	—	Content rendered above the pills row — typically the filter input controls (dropdowns, search box) that produce the active filters.
Pills	RenderFragment?	—	Manually-composed filter pills, rendered alongside any pills generated from Filters.
Actions	RenderFragment?	—	Trailing content rendered after the pills row — typically a "clear all" button or similar bulk action.
Filters	IReadOnlyList<FilterDescriptor>?	—	Data-driven filter model (#319): when supplied, the bar renders a dismissable FilterPill per descriptor (Field / Operator / Value) and raises OnRemoveFilter on dismiss. The Pills slot still works and renders alongside, so this is purely additive.
Class	string?	—	Additional CSS classes merged onto the root container.
AdditionalAttributes	Dictionary<string, object>?	—	Unmatched attributes splatted onto the root container.

Events

OnRemoveFilter

EventCallback<FilterDescriptor>

Invoked with the descriptor of a data-driven pill (from Filters) when its dismiss (×) button is clicked.