Gallery view · ui.voila.dev

Riverside Studio

Design studio

Northgate Labs

Research

Harbour Media

Media production

Eastfield Group

Consulting

Southbank Digital

Software

Old Town Press

Publishing

Westside Ventures

Finance

Lakeside Health

Healthcare

const [view, setView] = useState<DataTableView>("table");
 
<DataTable.Root
	columns={columns}
	data={organizations}
	view={view}
	renderGalleryCard={(organization) => (
		<>
			<CardGallery.Logo src={organization.logo}>
				{organization.name.charAt(0)}
			</CardGallery.Logo>
			<CardGallery.Title>{organization.name}</CardGallery.Title>
			<CardGallery.Description>{organization.category}</CardGallery.Description>
		</>
	)}
	toolbar={
		<DataTable.Toolbar>
			<DataTable.Actions>
				<DataTable.ViewToggle view={view} onViewChange={setView} />
			</DataTable.Actions>
		</DataTable.Toolbar>
	}
/>;

view="gallery" swaps the table for a CardGallery grid built from the same sorted, filtered row model, so the toolbar's search and filters keep working unchanged. renderGalleryCard fills each tile — the tile itself is supplied, stays clickable through onRowClick, and the grid adapts its column count to the container on its own.

Pagination is the consumer's call, exactly as in table view: pass the pagination prop and the footer stays; omit it and the grid shows everything at once. Sorting set in table view carries over — the columns still exist underneath.

API

DataTable.ViewToggle

Prop	Type	Default
`onViewChange`	`(view: DataTableView) => void`	required	Called with the picked layout. Pass the same value to `DataTable.Root`.
`view`	`DataTableView`	required	The current layout. Controlled — this toggle holds no state.
`labels`	`Record<DataTableView, string>`	`{ table: "Table view", gallery: "Gallery view" }`	Accessible names for the two options. This package ships no translations.
`orientation`	`"horizontal" \| "vertical"`	—
`size`	`"default" \| "lg" \| "sm"`	—	Control height. Match it to the controls beside it.
`spacing`	`number`	—
`variant`	`"default" \| "outline"`	—	`outline` gives the toggle a border, so it stays visible against a surface that already has a fill.
`className`	`string` \| `((state: ToggleGroupState) => string` \| `undefined)`	—	CSS class applied to the element, or a function that returns a class based on the component's state.
`defaultValue`	`readonly string[]`	—	The pressed state of the toggle group represented by an array of the values of all pressed toggle buttons. This is the uncontrolled counterpart of `value`.
`disabled`	`boolean`	—	Whether the toggle group should ignore user interaction.
`loopFocus`	`boolean`	—	Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys.
`multiple`	`boolean`	—	When `false` only one item in the group can be pressed. If any item in the group becomes pressed, the others will become unpressed. When `true` multiple items can be pressed.
`onValueChange`	`((groupValue: string[], eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element \| undefined; }) => void)`	—	Callback fired when the pressed states of the toggle group changes.
`render`	`ComponentRenderFn<HTMLProps, ToggleGroupState>` \| `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: ToggleGroupState) => 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-toggle.tsx.

The table ⇄ gallery switch, at home in DataTable.Actions. It holds no state: pass view back to DataTable.Root.