Conditions for each column
Use column filters appropriate to value types, such as text or numbers.
Options
Changes below update the Grid and code immediately.
Column filters are enabled in this menu. Enter Atlas in the Product filter below the header.
View code
Sample data included in the code · 6 rows
Usage guide
#Use conditions on different columns, such as product name and quantity, to retain only relevant orders.
Try it yourself
- Find per-column inputs
Column filters are enabled in this menu. Enter Atlas in the Product filter below the header.
- Combine conditions
Adding another column filter retains only rows satisfying both conditions. Numeric columns use numeric conditions.
- Clear filters
Clear your conditions and verify orders return. Turning off the column-filter option also changes filter-row visibility.
Only matching orders appear. Inspect the changed column and conditions in filterChanged.
This example uses only column filters. If fewer rows appear than expected, check conditions remaining in other columns.
Useful terms
- headerFilterRow
- A setting displaying filter inputs below headers.
- filter
- The column's filter type, such as text or number.
API reference
#Key properties
| Attribute / Property | Type / Default | Description |
|---|---|---|
| headerFilterRow | booleanDefault: false | render an inline filter row under the column headers (AG Grid "floating filters"). Scalar columns get an input that edits the current condition's value in place; set/multi/range states show a summary that opens the full dropdown. Default `false`. |
Events2
| Events | Detail type | Description |
|---|---|---|
GridFilterChangedDetail | Fires when a column filter is applied, replaced, or cleared. | |
GridFilterModifiedDetail | Fires when a lifecycle filter reports an unapplied UI modification. |
Methods8
| Method / Arguments | Return type | Description |
|---|---|---|
Promise<SyGridFilterSlice> | The complete global filter model (built-in, custom, quick, condition). | |
| model: SyGridFilterSlice | null | Promise<FilterSliceApplyResult['report']> | Replace the global filter model; `null` clears every filter family. Custom models flow through the Phase C facade and are awaited, so the returned report reflects async completion. Fail-closed: an invalid model returns its issues in `invalidBuiltIn` semantics with zero writes. |
| columnId: string | Promise<
GridFilterInstance<GridData, TColumnValue, TModel, unknown> | null
> | Return the mounted lifecycle filter instance for one column. |
| columnId: string | Promise<TModel | null> | Read the canonical lifecycle-filter model owned by the grid facade. |
| columnId: string, model: TModel | null | Promise<boolean> | Set one lifecycle-filter model and await floating/peer synchronization. |
Promise<void> | Synchronize models after an advanced caller mutates a raw filter instance. Prefer setColumnFilterModel for normal application code. | |
| columnId: string | Promise<boolean> | Destroy a lifecycle filter and schedule deterministic lazy recreation. |
| columnId: string, options?: { preserveModel?: boolean } | Promise<boolean> | Recreate a mounted lifecycle filter, optionally retaining its model. |
ColumnDef2
| ColumnDef | Type / Required | Description |
|---|---|---|
PRO OPTION | | ColumnFilterDecl
| string
| GridFilterDefinition<TData, TValue, unknown, TContext>Optional | Filter type. `true` enables the built-in text filter; `false` disables it. an ordered array stacks several kinds on this column in one dropdown, AND-combined — see . |
| string
| GridFloatingFilterDefinition<unknown, TContext>Optional | Optional lifecycle floating filter rendered in the header filter row. |
Explore each feature
Learn when to use each feature and how to configure it. Each guide identifies live examples and features you connect in your app.