Reference | Client | Role | Status | Amount |
|---|---|---|---|---|
PRJ-001 | Riverside Studio | Designer | Confirmed | $180 |
PRJ-004 | Eastfield Group | Designer | Completed | $210 |
const [search, setSearch] = useState("");
<DataTable.Root
columns={columns}
data={projects}
globalFilter={search}
toolbar={
<DataTable.Toolbar>
<DataTable.Search
value={search}
onChange={(event) => setSearch(event.target.value)}
/>
</DataTable.Toolbar>
}
/>;Leave globalFilter undefined for server-side search: drive DataTable.Search
yourself and filter in the query.
API
| Prop | Type | Default | |
|---|---|---|---|
className | string | ((state: InputState) => string | undefined) | — | CSS class applied to the element, or a function that returns a class based on the component's state. |
defaultValue | string | number | readonly string[] | — | The default value of the input. Use when uncontrolled. |
onValueChange | ((value: string, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; }) => void) | — | Callback fired when the value changes. Use when controlled. |
render | ComponentRenderFn<HTMLProps, InputState> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
style | CSSProperties | ((state: InputState) => CSSProperties | undefined) | — | Style applied to the element, or a function that returns a style object based on the component's state. |
value | string | number | readonly string[] | — | The value of the input. Use when controlled. |
Plus the DOM props of the element it renders. Source: data-table/components/data-table-search.tsx.
The input is a plain search field, so its value is yours. What decides whether
search is client- or server-side is globalFilter on
DataTable.Root, not anything here.