Reference | Client | Role | Status | Amount |
|---|---|---|---|---|
PRJ-001 | Riverside Studio | Designer | Confirmed | $180 |
PRJ-002 | Northgate Labs | Developer | Pending | $240 |
PRJ-003 | Harbour Media | Copywriter | Confirmed | $150 |
PRJ-004 | Eastfield Group | Designer | Completed | $210 |
PRJ-005 | Southbank Digital | Consultant | Pending | $320 |
<DataTable.Root
columns={columns}
data={projects}
toolbar={(table) => (
<DataTable.Toolbar>
<DataTable.Actions>
<DataTable.ViewOptions table={table} />
<DataTable.Export table={table} filename="projects.csv" />
</DataTable.Actions>
</DataTable.Toolbar>
)}
/>;toolbar takes a render prop when a control needs the table instance — the
column menu and the exporter both do.
API
| Prop | Type | Default | |
|---|---|---|---|
table | Table<TData> | required | The live table instance. Get it from DataTable.Root's toolbar render
prop — this control reads the column list off it. |
label | string | "Columns" | Text on the trigger. This package ships no translations. |
loading | boolean | — | Show a leading spinner and mark the button aria-busy, disabling
interaction while an async action is in flight (e.g. a form submit). |
shape | "default" | "pill" | — | pill forces a fully rounded button; default follows the theme's
--radius, so it changes with the brand. |
size | "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xs" | "lg" | "sm" | "xs" | — | Height and horizontal padding. The icon-* set is square, for a button
whose entire content is one icon — give those an aria-label. |
variant | "brand" | "default" | "destructive" | "ghost" | "highlight" | "link" | "outline" | "primary" | "secondary" | — | Weight of the action. default is the one thing the page exists for, at
most one per view; secondary an equal-weight alternative; outline
for toolbars and anything that repeats in a row; ghost inside dense
surfaces; destructive for what cannot be undone; link for an action
that reads as navigation. |
className | string | ((state: ButtonState) => string | undefined) | — | CSS class applied to the element, or a function that returns a class based on the component's state. |
focusableWhenDisabled | boolean | — | Whether the button should be focusable when disabled. |
nativeButton | boolean | — | Whether the component renders a native <button> element when replacing it
via the render prop.
Set to false if the rendered element is not a button (for example, <div>). |
render | ComponentRenderFn<HTMLProps, ButtonState> | 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: ButtonState) => CSSProperties | undefined) | — | Style applied to the element, or a function that returns a style object based on the component's state. |
Plus the DOM props of the element it renders. Source: data-table/components/data-table-view-options.tsx.
table is the live instance, which is why toolbar has to be a render prop
here: the menu builds itself from the column list at render time, so a column
added later appears without touching this.