Spreadsheet.NestedInput · ui.voila.dev

A cell whose value is a whole sub-table, summarized closed and edited in a popover.

<Spreadsheet.NestedInput
	summary={`${tiers.length} tiers`}
	ariaLabel="Quantity discounts"
	title="Quantity discounts"
>
	<Spreadsheet.Root>{/* the nested grid */}</Spreadsheet.Root>
</Spreadsheet.NestedInput>;

API

Prop	Type	Default
`ariaLabel`	`string`	required	Accessible name for the trigger (the summary alone rarely identifies it).
`children`	`ReactNode`	required	The nested table (or any editor) shown once open.
`summary`	`string`	required	What the closed cell reads, e.g. "2 paliers" or an em-dash when empty. The cell is a summary; the detail lives in the popover.
`title`	`string`	required	Heading of the popover.
`className`	`string`	—	Classes for the trigger button that sits in the cell.
`contentClassName`	`string`	—	Width of the popover; the nested table sets its own column widths.
`description`	`string`	—	Optional sentence under the title explaining what the rows mean.
`invalid`	`boolean`	—	Tints the cell and raises its destructive ring, like any invalid control.

Plus every <button> prop. Source: spreadsheet/components/nested-table-input.tsx.

summary is what keeps the row scannable — it is the only thing visible until the popover opens, so make it count the things inside ("3 tiers"), not name them. children is any editor at all; a nested Spreadsheet.Root is the common case but nothing here assumes one.