Documentation

Collapsible Columns

Collapsible columns allow users to dynamically hide and show grouped columns to optimize screen space and focus on relevant data. Click the arrow icons in column headers to collapse entire column groups while keeping important columns visible.

CodeSandbox

Basic Implementation

Collapsible columns are created by adding the collapsible: true property to a parent column with children columns. Users can click the arrow icon in the header to collapse the column group.

Collapsible Columns Configuration

PropertyRequiredDescriptionExample
collapsible
boolean
Optional
Enables collapsible functionality for a column group. When true, users can click the collapse arrow in the header to hide/show child columns.
showWhen
ShowWhen ("parentCollapsed" | "parentExpanded" | "always")
Optional
Controls when a child column is visible in collapsible groups. Can be "parentCollapsed" (only visible when collapsed), "parentExpanded" (only visible when expanded), or "always" (visible in both states).
headerExpandIcon
ReactNode
Optional
Custom icon component for the expand state of collapsible column headers. Shows when a column group can be expanded to reveal child columns.
headerCollapseIcon
ReactNode
Optional
Custom icon component for the collapse state of collapsible column headers. Shows when a column group can be collapsed to hide child columns.

Collapse Behaviors

Collapsible columns support different behaviors when collapsed:

Visibility Control

Control when child columns are visible using the showWhen attribute:

📖 When Expanded

showWhen: "parentExpanded"

📕 When Collapsed

showWhen: "parentCollapsed"

🔄 Always Visible

showWhen: "always"