Grid Grouped View

ProNew

A virtualised grid grouped by one or more columns, with expandable group rows, row counts and per-group aggregates.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Use it for reports where rows share a category and totals per category matter. Groups are built in memory, so group the filtered rows.


pnpm dlx shadcn@latest add @tealmac-pro/grid-grouped-view

Prop	Type	Description
`columns`	`GridColumn<T>[]`	Column definitions.
`rows`	`T[]`	Rows to group.
`groupBy`	`string[]`	Column ids, outermost first.
`aggregates`	`Record<string, AggregateFn>`	Figures shown on each group row.
`defaultExpanded`	`string[] \| "all"`	Group paths open at the start. Default all.
`height / rowHeight`	`number`	Scroll area and row sizes.

Group rows are full-width rows holding a disclosure button; the grid keeps its grid roles while groups open and close.
Row indexes stay correct for virtualised rows, so screen readers announce the right position.

Guide and examples

Use it for reports where rows share a category and totals per category matter. Groups are built in memory, so group the filtered rows.


pnpm dlx shadcn@latest add @tealmac-pro/grid-grouped-view

Prop	Type	Description
`columns`	`GridColumn<T>[]`	Column definitions.
`rows`	`T[]`	Rows to group.
`groupBy`	`string[]`	Column ids, outermost first.
`aggregates`	`Record<string, AggregateFn>`	Figures shown on each group row.
`defaultExpanded`	`string[] \| "all"`	Group paths open at the start. Default all.
`height / rowHeight`	`number`	Scroll area and row sizes.

Group rows are full-width rows holding a disclosure button; the grid keeps its grid roles while groups open and close.
Row indexes stay correct for virtualised rows, so screen readers announce the right position.