CSV export · ui.voila.dev

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.Export table={table} filename="projects.csv" />
			</DataTable.Actions>
		</DataTable.Toolbar>
	)}
/>;

dataTableToCsv(table) returns the same string if you want to send it somewhere other than a download. Fields are RFC 4180 quoted.

API

Prop	Type	Default
`table`	`Table<TData>`	required	The live table instance, from `DataTable.Root`'s `toolbar` render prop. What gets exported is the current view — sorted, filtered, visible columns only — not the whole `data` array.
`filename`	`string`	`"export.csv"`	Name of the downloaded file.
`label`	`string`	`"Export"`	Text on the button. 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-export.tsx.

table is the live instance, so what lands in the file is the current view — sorted, filtered, visible columns only — not the data array. That is the whole point of taking the instance rather than the rows.