Table Group

Rows grouped under a header that folds them away: issues by status, orders by day.

The snippet an agent gets

import { TableGroup, TableCell, TableRow } from '@basiiik/ui';<TableGroup label="In review" columns={4}><TableRow><TableCell>Cache map tiles</TableCell></TableRow></TableGroup>

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it ships.

Example values were filled in for the required props label, columns: replace them with your own.
Values in braces are your own variables, handlers or data, such as const [open, setOpen] = useState(false).
Open follows open or defaultOpen (default open); Hover and Focused are CSS on the fold button.
Compose with: table-row.
Storybook: Data display/Table group.

Install

npm install @basiiik/uiimport { TableGroup } from '@basiiik/ui';

Props

Prop	Type	Default
`open`	`boolean`	`–`
`label`	`ReactNode`	`Required`
`count`	`number`	`–`
`columns`	`number`	`Required`
`children`	`ReactNode`	`Required`
`icon`	`ReactNode`	`–`
`defaultOpen`	`boolean`	`–`
`onOpenChange`	`(open: boolean) => void`	`–`

Native attributes such as className, id and data-* go to the root element.

States. Open follows open or defaultOpen (default open); Hover and Focused are CSS on the fold button.

Accessibility

Tab moves to each group's button
Enter or Space folds or unfolds the group's rows
Each group is its own row group; its header cell spans every column with scope="rowgroup"
The button's name is the group name and its count ("In review 3 rows")
Folded rows are removed, not just hidden

Use it when

Rows that fall into a few known groups: issues by status, orders by day, files by folder

Do not use it when

A flat list that people sort or filter (use Table with sorting)
Nested groups more than one level deep

Rules for agents

Pass columns equal to the table's column count so the header row spans it
Pass count with the number of rows in the group
Give a status icon when the groups are statuses
Keep the same columns in every group

Avoid

Grouping and sorting the same table by the same field
A group header written as an ordinary row
More than about eight groups (use a filter)

Colour tokens it reads

color.bg.brand.subtlecolor.bg.mutedcolor.bg.subtlecolor.bg.surfacecolor.border.subtlecolor.icon.secondarycolor.text.brandcolor.text.primarycolor.text.secondary

2 Figma variantsTry it in the live demo