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 |
const [density, setDensity] = useState<DataTableDensity>("comfortable");
<DataTable.Root columns={columns} data={projects} density={density} />;API
| Prop | Type | Default | |
|---|---|---|---|
density | DataTableDensity | required | The current row height. Controlled — this toggle holds no state. |
onDensityChange | (density: DataTableDensity) => void | required | Called with the picked density. Pass the same value to DataTable.Root. |
label | string | "Density" | Text on the trigger. This package ships no translations. |
labels | Record<DataTableDensity, string> | { comfortable: "Comfortable", compact: "Compact" } | Names for the two options, as shown in the menu. |
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-density-toggle.tsx.
The toggle holds no state: pass the same value to it and to
DataTable.Root's density, so the control and the
rows cannot disagree. compact fits about a third more rows on a screen, which
is the right default for a table people scan for one line rather than read.