---
meta:
title: Data Table Filter
description: An inline filter bar for data tables. Each active filter is a pill whose dropdown sets its value, alongside an add-filter control and a clear.
layout: component
---
```html:preview
```
Filters render inline rather than in a slideout. Each active filter is a pill showing its name, and its value once set; the pill's dropdown lists the filter's `options` as checkable values, or a text input for a filter that declares none. Each pill carries an X that drops that filter. `+ Add filter` lists the filters that are not yet active, and `Clear` removes them all.
A filter starts on its **first declared operator**. Declare more than one and the pill offers a choice: a value editor gets a row of operator chips above it, an options menu lists the operators above its values, and the pill then reads `Age ≥ 18` rather than `Age: 18`. Switching operator keeps the value — a date is re-encoded for the new comparator.
Declare `in` or `nin` to let a filter hold several values at once — the pill then counts them, e.g. `Role (2)`, and its dropdown stays open so you can pick more. Any other operator holds a single value: the dropdown closes on select, and picking the same value again clears it.
Picking a filter from `+ Add filter` opens its pill straight away, with a text field focused, so naming a filter and giving it a value is one pass. A typed value is one value however many spaces it contains; only a comma starts another.
`default-filters` takes a comma-separated list of filter ids to show a pill for up front. Inside a `zn-data-table` the bar is hidden until the header's filter toggle is clicked, and `activeCount` reports how many filters currently hold a value.
```html:preview
```
The component emits `zn-filter-change` and exposes the query on `value`, encoded exactly as `zn-query-builder` encodes it — base64 of `[{key, comparator, value}]` — so a backend built against the query builder needs no changes.
Setting `value` round-trips: assigning that same base64 string back — for example restoring it from a shared URL via `zn-data-table`'s [`sharable`](/components/data-table#shareable-url-state) sync — rebuilds the active pills, so the bar reopens in the state it was encoded in. Restoration needs the `filters` schema present to resolve each key, and it stands down once any filter already holds a value, so a shared filter still wins over an empty `default-filters` pill while a filter the user is mid-way through setting is never clobbered.
One caveat: a restored **date** filter shows its raw encoded value on the pill (a timestamp, or a minutes-from-now offset) rather than a formatted date, because the human-readable label is not part of the encoded query. The filter still applies correctly; only the pill text differs until the value is re-picked.
### Long Option Lists
An option list caps its height at 320px and scrolls inside the panel rather than running off the
screen, with the scrollbar drawn rather than left to the platform's overlay one. Past eight options
the pill also gains a search field, merged into the top of the panel and pinned there, that narrows
the list case-insensitively.
```html:preview
```
### Typeahead
Inside a `zn-data-table` a text filter suggests values from the rows the table has already loaded, matched case-insensitively against what has been typed, keyed on the column whose name matches the filter's id. Set `suggestions` yourself — `{[filterId]: string[]}` — to offer something else.
## Examples
### Basic Text Filters
Create simple text-based filters with equality and fuzzy search operators.
```html:preview
```
### Number Filters with Operators
Use number type filters with comparison operators like equal, greater than, less than. The pill's
editor shows a chip per operator; `>`, `≥`, `<` and `≤` keep their symbols, and the rest read as words.
```html:preview
```
### Date Filters
Filter by dates with before, after, and equal operators. A `date` pill opens a calendar and closes
once a day is picked; a `dateTime` pill adds a time selector and stays open while it's set.
Values are encoded the way `zn-query-builder` encodes them, so `dateSubmitFormat` picks the wire
format: `legacy` (the default — seconds for `eq`/`neq`, otherwise minutes from now, negated for
`before`), `timestamp` (milliseconds) or `iso`.
```html:preview
```
### Dropdown Options
Use predefined options for select-based filtering.
```html:preview
```
### Limited Options Display
Control how many options are initially visible using `maxOptionsVisible`.
```html:preview
```
### Mixed Filter Types
Combine different field types in a single filter component.
```html:preview
```
### Employee Filter Example
A practical example for filtering employee data.
```html:preview
```
### E-commerce Filter Example
Filter products with various criteria.
```html:preview
```
### Content Library Filter
Filter media content like books, movies, or articles.
```html:preview
```