Data display
Filtering controls
The field a data surface narrows its rows from
Service
Environment
State
reports
production
healthy
search
staging
degraded
media
production
healthy
gateway
staging
healthy
billing
production
paused
“” · 5 of 5 rows · name “Filter rows” · hint “Filter…”
Usage
import { TableFilterField } from "@gpuixui/data";
<TableFilterField
value={query}
label="Filter services"
onValueChange={setQuery}
/>;The field owns no query state: the table holds value and narrows on each
onValueChange. The field reports every edit at once — a debounce is the
caller's, as DataToolbar's search is — so a table that wants one wraps it.
API
TableFilterField
| Prop | Type | Default | Consequence |
|---|---|---|---|
value | string | — | the query the field shows; the table owns it |
onValueChange | (next: string) => void | — | receives every edit, not a debounced one |
label | string | Filter rows | the field's accessible name; a blank name reads as the default |
placeholder | string | Filter… | the hint a reader sees in the empty field; a blank hint reads as the default |
width | number | — | the wrapper's width in pixels; unset, the field fills its row |
testId | string | — | the input's handle, for an automation host |
Edit this page on GitHubpackages/data/docs/table-filtering.mdx