Data display
Data toolbars
The row of controls a data surface acts from
Service
Environment
State
reports
production
queued
search
staging
running
media
production
done
gateway
staging
queued
billing
production
done
identity
staging
running
typed “” · reported “” · 6 of 6 rows · wait 150 ms
Usage
import { DataToolbar } from "@gpuixui/data";
<DataToolbar search={{ value: query, onValueChange: setQuery }}>
<Button onActivate={reset}>Reset</Button>
</DataToolbar>;API
DataToolbar
| Prop | Type | Default | Consequence |
|---|---|---|---|
children | ReactNode | — | the controls the row holds |
search | ToolbarSearch | — | the field at the head of the row; a null a store wrote for an absent field paints no field |
className | string | — | joined after the recipe |
testId | string | — | the field derives from it: ${testId}-search |
ToolbarSearch
| Field | Type | Default | Consequence |
|---|---|---|---|
value | string | — | the query the field shows; the toolbar owns no state |
onValueChange | (next: string) => void | — | receives the debounced query |
placeholder | string | Search… | the hint a reader sees in the empty field; a blank one reads as the default |
label | string | Search | the field's accessible name; a blank name reads as Search |
debounceMs | number | 150 | how long the query waits before it is reported; 0 reports every edit at once, and a value that is not finite or is negative reads as 150 |
Edit this page on GitHubpackages/data/docs/data-toolbar.mdx