grouping

What problem does it solve?

This Skill helps you group TanStack Table rows by one or more column values and automatically compute per-group aggregates so you can build drill-down datagrids without hand-rolling group-by logic.

Core Features & Use Cases

• Column grouping with grouped row models: Create grouped projections using groupedRowModel and the groupedRowModel stage.
• Aggregation-aware rendering: Render three distinct cell states—grouped, aggregated, and normal—via cell.getIsGrouped(), cell.getIsAggregated(), and cell.getIsPlaceholder().
• Correct drill-down UX via expansion pairing: Pair grouping with rowExpandingFeature so grouped rows can expand and reveal leaf rows.
• Built-in and custom aggregation: Use built-in aggregationFns or register your own aggregation functions with the required (columnId, leafRows, childRows) signature.
• Custom grouping keys: Override how rows are grouped using columnDef.getGroupingValue.
• Grouped column placement control: Adjust how grouped columns appear using groupedColumnMode (false | 'reorder' | 'remove').

Quick Start

Implement TanStack Table v9 grouping by enabling the columnGroupingFeature and the required rowExpandingFeature, wiring groupedRowModel: createGroupedRowModel(aggregationFns) in _rowModels, and setting initialState: { grouping: [] } before calling table.setGrouping(['status']).