TableExpandable
Expandable hierarchical table renderer with grouped rows and depth-aware indentation.
Import
import { TableExpandable } from "@repo/design-system/components/table/table-expandable";Example: 1-Level Hierarchy
Grouped by country (1 level)
| Name | Code | Status | Owner | Updated At | Updated By |
|---|---|---|---|---|---|
Canada | - | - | - | - | - |
Ottawa | CA-ON-001 | Open | - | 7 months ago | admin@email.com |
Test Location | CA-ON-002 | Open | admin@email.com | 4 months ago | admin@email.com |
Test Location 3-Level Updated | CA-ON-003 | Open | admin@email.com | 4 months ago | admin@email.com |
Toronto | CA-ON-004 | Open | admin@email.com | 4 months ago | admin@email.com |
Montreal | CA-QC-001 | Open | - | 7 months ago | - |
Quebec City | CA-QC-002 | Open | - | 7 months ago | - |
Cuba | - | - | - | - | - |
Hey | CU-001 | - | admin@email.com | 4 months ago | - |
Mexico | - | - | - | - | - |
Guadalajara | MX-JAL-001 | Open | admin@email.com | 4 months ago | user@blendx.ai |
United States | - | - | - | - | - |
Location ??? | US-FL-001 | Open | - | 4 months ago | admin@email.com |
Miami | US-FL-002 | Open | - | 7 months ago | - |
Tampa | US-FL-003 | Open | - | 7 months ago | - |
Austin | US-TX-001 | Open | - | 7 months ago | - |
Houston | US-TX-002 | Open | - | 7 months ago | - |
Example: 2-Level Hierarchy
Grouped by country and state (2 levels)
| Name | Code | Status | Owner | Updated At | Updated By |
|---|---|---|---|---|---|
Canada | - | - | - | - | - |
Ontario | - | - | - | - | - |
Ottawa | CA-ON-001 | Open | - | 7 months ago | admin@email.com |
Test Location | CA-ON-002 | Open | admin@email.com | 4 months ago | admin@email.com |
Test Location 3-Level Updated | CA-ON-003 | Open | admin@email.com | 4 months ago | admin@email.com |
Toronto | CA-ON-004 | Open | admin@email.com | 4 months ago | admin@email.com |
Quebec | - | - | - | - | - |
Montreal | CA-QC-001 | Open | - | 7 months ago | - |
Quebec City | CA-QC-002 | Open | - | 7 months ago | - |
Cuba | - | - | - | - | - |
Hey | CU-001 | - | admin@email.com | 4 months ago | - |
Mexico | - | - | - | - | - |
Jalisco | - | - | - | - | - |
Guadalajara | MX-JAL-001 | Open | admin@email.com | 4 months ago | user@blendx.ai |
United States | - | - | - | - | - |
Florida | - | - | - | - | - |
Location ??? | US-FL-001 | Open | - | 4 months ago | admin@email.com |
Miami | US-FL-002 | Open | - | 7 months ago | - |
Tampa | US-FL-003 | Open | - | 7 months ago | - |
Texas | - | - | - | - | - |
Austin | US-TX-001 | Open | - | 7 months ago | - |
Houston | US-TX-002 | Open | - | 7 months ago | - |
Example: Row Selection with Header Toolbar
Select rows to see the header toolbar
| Name | Code | Status | Owner | Updated At | Updated By | |
|---|---|---|---|---|---|---|
Canada | - | - | - | - | - | |
Ottawa | CA-ON-001 | Open | - | 7 months ago | admin@email.com | |
Test Location | CA-ON-002 | Open | admin@email.com | 4 months ago | admin@email.com | |
Test Location 3-Level Updated | CA-ON-003 | Open | admin@email.com | 4 months ago | admin@email.com | |
Toronto | CA-ON-004 | Open | admin@email.com | 4 months ago | admin@email.com | |
Montreal | CA-QC-001 | Open | - | 7 months ago | - | |
Quebec City | CA-QC-002 | Open | - | 7 months ago | - | |
Cuba | - | - | - | - | - | |
Hey | CU-001 | - | admin@email.com | 4 months ago | - | |
Mexico | - | - | - | - | - | |
Guadalajara | MX-JAL-001 | Open | admin@email.com | 4 months ago | user@blendx.ai | |
United States | - | - | - | - | - | |
Location ??? | US-FL-001 | Open | - | 4 months ago | admin@email.com | |
Miami | US-FL-002 | Open | - | 7 months ago | - | |
Tampa | US-FL-003 | Open | - | 7 months ago | - | |
Austin | US-TX-001 | Open | - | 7 months ago | - | |
Houston | US-TX-002 | Open | - | 7 months ago | - |
Example: Sticky Right Actions Column
Resize the panel — actions stay pinned to the right
| Name | Code | Status | Owner | Updated At | Updated By | |
|---|---|---|---|---|---|---|
Canada | - | - | - | - | - | |
Ottawa | CA-ON-001 | Open | - | 7 months ago | admin@email.com | |
Test Location | CA-ON-002 | Open | admin@email.com | 4 months ago | admin@email.com | |
Test Location 3-Level Updated | CA-ON-003 | Open | admin@email.com | 4 months ago | admin@email.com | |
Toronto | CA-ON-004 | Open | admin@email.com | 4 months ago | admin@email.com | |
Montreal | CA-QC-001 | Open | - | 7 months ago | - | |
Quebec City | CA-QC-002 | Open | - | 7 months ago | - | |
Cuba | - | - | - | - | - | |
Hey | CU-001 | - | admin@email.com | 4 months ago | - | |
Mexico | - | - | - | - | - | |
Guadalajara | MX-JAL-001 | Open | admin@email.com | 4 months ago | user@blendx.ai | |
United States | - | - | - | - | - | |
Location ??? | US-FL-001 | Open | - | 4 months ago | admin@email.com | |
Miami | US-FL-002 | Open | - | 7 months ago | - | |
Tampa | US-FL-003 | Open | - | 7 months ago | - | |
Austin | US-TX-001 | Open | - | 7 months ago | - | |
Houston | US-TX-002 | Open | - | 7 months ago | - |