# Conditions for each column

Column filters apply conditions to individual columns. Text, numbers, and dates use different inputs and comparisons; conditions across columns narrow results together.

Canonical: https://grid.syidax.com/docs/features/column-filters/

<a id="understand"></a>

## How it works and when to use it

Distinguish filter UI drafts from the applied model. For asynchronous behavior such as custom filters, await the report returned by setFilterModel.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

- [Installation and integration · Shared sample data](https://grid.syidax.com/docs/guides/getting-started.md)

<a id="example-1"></a>

## Example 1. Product name and quantity inputs

Enable basic filters appropriate to each column type.

```javascript
grid.headerFilterRow = true;
grid.columnDefs = [{ field: 'product', headerName: 'Product', filter: 'text' },
  { field: 'quantity', headerName: 'Quantity', filter: 'number' }];
```

Verify the result: Search product names with text conditions and quantities with numeric conditions. Verify source types so string 100 and numeric 100 do not produce unintended differences.

<a id="example-2"></a>

## Example 2. Save user filters

Store the applied model and restore it with the same column definitions.

```javascript
const saved = await grid.getFilterModel();
const report = await grid.setFilterModel(saved);
console.log(report);
```

Verify the result: Restoration requires compatible model structure and column types. Inspect unapplied entries in the returned report.

<a id="example-3"></a>

## Example 3. Reset conditions

Clear all filter families when search results are empty.

```javascript
await grid.setFilterModel(null);
grid.addEventListener('filterChanged', event => console.log(event.detail));
```

Verify the result: null clears the global filter model. To clear one column while preserving other conditions, use the setColumnFilterModel contract.

<a id="pitfalls"></a>

## Combining features and troubleshooting

Test handling of empty strings, null, and numeric strings. Date conditions also require consistent time zones and storage formats.

Column filters, quick search, external filters, and advanced conditions may overlap. When results are sparse, inspect each remaining condition.

<a id="related-api"></a>

## APIs used by this feature

- [headerFilterRow](https://grid.syidax.com/docs/options/headerFilterRow.md) — Displays a row of per-column filter controls below the headers.
- [filter](https://grid.syidax.com/docs/columns/filter.md) — Built-in filter type or custom filter definition for this column.
- [floatingFilterComponent](https://grid.syidax.com/docs/columns/floatingFilterComponent.md) — Custom filter input component displayed below the header.
- [getFilterModel](https://grid.syidax.com/docs/methods/getFilterModel.md) — Reads combined state across current filter families.
- [setFilterModel](https://grid.syidax.com/docs/methods/setFilterModel.md) — Applies a validated combined filter model. null clears all filter families; inspect reports for invalid models.
- [getColumnFilterInstance](https://grid.syidax.com/docs/methods/getColumnFilterInstance.md) — Queries a column's custom filter instance. May return null if absent or not yet created.
- [getColumnFilterModel](https://grid.syidax.com/docs/methods/getColumnFilterModel.md) — Reads one column's current filter model.
- [setColumnFilterModel](https://grid.syidax.com/docs/methods/setColumnFilterModel.md) — Sets one column's filter model and returns the result. Separate from setFilterModel, which changes combined filter state.
- [onFilterChanged](https://grid.syidax.com/docs/methods/onFilterChanged.md) — Signals changed filter conditions and recalculates current row filtering.
- [destroyColumnFilter](https://grid.syidax.com/docs/methods/destroyColumnFilter.md) — Destroys a column's filter instance.
- [recreateColumnFilter](https://grid.syidax.com/docs/methods/recreateColumnFilter.md) — Recreates a column's filter instance.
- [filterChanged](https://grid.syidax.com/docs/events/filterChanged.md) — Emitted when applied filters change. Distinguish from filterModified, which describes input changes.
- [filterModified](https://grid.syidax.com/docs/events/filterModified.md) — Emitted when filter input changes. Filters with an Apply button may not yet have updated result rows.

<a id="next"></a>

## Related reading

- [How rows, columns, and IDs relate](https://grid.syidax.com/docs/guides/concepts.md)
- [Connect results and events](https://grid.syidax.com/docs/guides/data-event-access.md)
- [Explore in Features](https://grid.syidax.com/grid/column-filters) — The guide describes which interactions are available to try.