Configure row expansion and collapsing in TanStack Table with expandedRowModel.
npx skills add https://github.com/TanStack/table --skill row-expanding
Please help me install this Agent Skill. Skill: row-expanding Source: https://github.com/TanStack/table/tree/main/packages/table-core/skills/row-expanding Command: npx skills add https://github.com/TanStack/table --skill row-expanding
This Skill helps you add reliable row expansion to TanStack Table so users can drill into hierarchical sub-rows or reveal per-row detail panels without losing control over markup and behavior.
getSubRows, with state-driven expansion using state.expanded and onExpandedChange.getRowCanExpand and row.getIsExpanded().paginateExpandedRows and ensure parent visibility during tree filtering via filterFromLeafRows and maxLeafRowFilterDepth.Use the row-expanding Skill to configure rowExpandingFeature with createExpandedRowModel(), register either getSubRows (tree mode) or getRowCanExpand (detail-panel mode), then render an expander that calls row.getToggleExpandedHandler() and conditionally displays expanded children or a sub-component.
High-intent search queries and answers about installing and using this skill.
To expand rows in TanStack Table for hierarchical tree data, use the expandedRowModel alongside getSubRows to define nested data structures. State-driven expansion is managed via state.expanded and onExpandedChange to control which rows are open.
To add a detail panel to flat data in TanStack Table, use getRowCanExpand to enable expansion on specific rows. You can then check row.getIsExpanded() to conditionally render an additional UI section like an info panel.
TanStack Table pagination works with expanded sub-rows using the paginateExpandedRows setting. This controls whether expanded children participate in paging calculations alongside the parent rows.
TanStack Table filtering interacts with expanded tree rows using filterFromLeafRows and maxLeafRowFilterDepth. These settings ensure parent visibility is maintained during tree filtering by honoring leaf-match propagation.
The best way to toggle all expanded rows in TanStack Table is using the table toggle-all API. This works alongside individual row.toggleExpanded calls to manage the overall ExpandedState for the table.
Expanded rows collapse during filtering or paging if the ExpandedState is not properly managed. Ensure you use state-driven control with state.expanded and configure paginateExpandedRows to maintain the expanded state correctly.
sncollectiveDevelops Blazor Server & WebAssembly apps with C#.
Emz1998Create reusable Tailwind CSS UI components with separate CSS files.
oakossBuild accessible data tables with TanStack Table and React Aria Components.
serverpodGenerate collapsible accordion components in Flutter with shadcn_ui.