skills.rest
TanStack
TanStackOFFICIAL
Explore all skills by this author →
Website𝕏@tan_stackGitHub

grouping

Group TanStack Table rows by column values with aggregation functions.

28.3k|3.6k|Updated Oct 20, 2016
Search Tags:#aggregation#grouping#tanstack table#datagrid#row expansion#react-table v9
One-click install
npx skills add https://github.com/TanStack/table --skill grouping
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: grouping
Source: https://github.com/TanStack/table/tree/main/packages/table-core/skills/grouping
Command: npx skills add https://github.com/TanStack/table --skill grouping

SYSTEM DOCUMENTATION & REQUIREMENTS

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']).

Frequently Asked Questions about grouping

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I group table rows by a specific column value in TanStack Table v9?▼

To group table rows in TanStack Table v9, enable the columnGroupingFeature, wire a groupedRowModel using createGroupedRowModel with your aggregationFns, and call table.setGrouping(['columnName']) to generate aggregated group rows for your datagrid.

How do I compute per-group aggregates for grouped rows in a React datagrid?▼

You compute per-group aggregates by registering aggregation functions using the required (columnId, leafRows, childRows) signature, allowing TanStack Table to automatically calculate summary values across leaf rows within each grouped row.

How do I render grouped, aggregated, and normal cells differently in a React-table v9 datagrid?▼

Render distinct cell states by checking cell.getIsGrouped() for grouped values, cell.getIsAggregated() for computed summary cells, and cell.getIsPlaceholder() for hidden columns to manage your datagrid's grouping UI accurately.

Do I need row expansion to build a drill-down datagrid with multi-column grouping?▼

Yes, you must pair grouping with the rowExpandingFeature to enable expandable grouped rows, allowing users to drill down and reveal the leaf rows nested within each aggregated group.

Can I customize how rows are grouped or how grouped columns appear in TanStack Table?▼

You can override row grouping logic using columnDef.getGroupingValue for custom grouping keys, and adjust grouped column placement using the groupedColumnMode option set to false, reorder, or remove.

What is the best way to avoid hand-rolling group-by logic for a sortable and filterable datagrid?▼

Using TanStack Table v9's groupedRowModel handles multi-column grouping and per-group aggregation automatically, eliminating manual group-by logic while maintaining sortable and filterable datagrid functionality.

Related Skills

Explore More Software Engineering Skills→
TanStackTanStack
28.3k

preact/compose-with-tanstack-virtual

Virtualize TanStack Table rows and columns in Preact with TanStack Virtual.

Official
Intermediate
TanStackTanStack
28.3k

row-pinning

Pin user-specified rows to top or bottom regions in TanStack Table.

Official
Intermediate
oakossoakoss
1

tanstack-table

Build accessible data tables with TanStack Table and React Aria Components.

Official
Intermediate
nesbonesbo
53

bdd-dotnet

Implements BDD-style unit tests for .NET domain handlers using in-memory EF Core databases.

Community
Advanced