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

Property	Required	Description

`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.
`collapseDefault` boolean	Optional	When true, the collapsible column starts in a collapsed state on initial load. Only applies to columns with collapsible: true. Perfect for showing summary data first while keeping details available.
`singleRowChildren` boolean	Optional	When true, the parent header appears horizontally beside its child headers (in the same row) instead of above them. This makes the parent act like a regular column that can collapse its sibling columns, rather than appearing as a nested group header. Only applies to collapsible 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). Note: This is an alternative approach to singleRowChildren.
`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:

showWhen: "parentExpanded"- Visible when parent is expanded

showWhen: "parentCollapsed"- Visible when parent is collapsed

showWhen: "always"- Always visible

Single Row Children

By default, collapsible columns create a nested header structure where the parent header appears above its children. Using singleRowChildren: true, you can display the parent header beside its children in the same row, making it appear as a regular column that collapses adjacent columns.

CodeSandbox

Custom Styling

You can customize the appearance of collapsible columns using CSS classes and variables. This allows you to style sub-headers and sub-cells differently from regular columns.

CSS Classes

Sub-Header Styling

.st-header-cell.st-sub-header

Targets child header cells within collapsible column groups.

Sub-Cell Styling

.st-cell.st-sub-cell

Targets body cells within collapsible column groups.

CSS Variables

Use these CSS variables to customize the background colors of sub-headers and sub-cells. See the Custom Theme documentation for more details.

--st-sub-header-background-color

--st-sub-cell-background-color

--st-sub-cell-hover-background-color

New in v1.8.6: Controls hover state for sub-cells

--st-dragging-sub-header-background-color

New in v1.8.6: Controls background color when dragging sub-headers

--st-selected-sub-cell-background-color

New in v1.8.6: Controls background color for selected sub-cells

--st-selected-sub-cell-color

New in v1.8.6: Controls text color for selected sub-cells