Skip to main content

​
Prerequisites

  • A working sheet configuration with multiple columns defined
  • Familiarity with column groups

​
Step 1: Define Column Groups with Collapse Targets

In your sheet configuration YAML, add a columnGroups section. For each group that should be collapsible, specify the collapseTo property pointing to the column that remains visible when the group is collapsed. 
columnGroups:
  Requirements:
    groupName: Requirements
    groupStyle: blue
    headerStyle: blue
    collapseTo: systemRequirements.systemRequirement.title
  Risks:
    groupName: Risks
    groupStyle: orange
    headerStyle: orange
    collapseTo: hazards.hazard.title
The collapseTo value must be a valid binding path of a column that belongs to the same group.

​
Step 2: Assign Columns to Groups

Each column that should participate in a collapsible group needs a columnGroup property matching the group key: 
columns:
  systemRequirements.systemRequirement.title:
    title: Sys Req Title
    width: 200
    columnGroup: Requirements
    hasFocus: true
  systemRequirements.systemRequirement.severity:
    title: Severity
    width: 100
    columnGroup: Requirements
  systemRequirements.systemRequirement.status:
    title: Status
    width: 100
    columnGroup: Requirements
When the Requirements group is collapsed, only the systemRequirements.systemRequirement.title column remains visible because it matches the collapseTo path.

​
Step 3: Understand the Collapse Behavior

diagram The group header row displays a toggle button when collapseTo is configured. Clicking the button hides all columns in the group except the designated collapse target column. Clicking the toggle again expands the group back to its full column set.
If a column group does not define collapseTo, no collapse toggle button appears in the group header. The group still provides visual organization but cannot be collapsed.

​
Step 4: Handle Columns Without a Group

Columns that are not assigned to any columnGroup still display correctly. They appear with a blank group header cell, maintaining the consistent two-row header structure across the entire sheet.
The column referenced by collapseTo must have its columnGroup set to the same group. If the column path does not match any column in the group, the collapse button may not appear or may behave unexpectedly.
Choose a column that provides the best summary when the group is collapsed — typically the primary identifier such as title or id. This lets users scan the sheet efficiently without expanding every group.

​
Step 5: Combine with Row Grouping

Collapsible column groups work independently from row grouping. You can combine both features:
  • Column groups collapse columns horizontally (hiding detail columns)
  • Row grouping collapses rows vertically (using groupBy on a column or keyboard shortcuts Ctrl+G / Ctrl+Shift+G)

​
Verification

After saving the configuration and reloading the powersheet document:
  1. You should now see group headers spanning multiple columns with the group name displayed
  2. Groups with collapseTo defined should show a toggle button in the group header
  3. Clicking the toggle should hide all columns except the collapse target
  4. Clicking again should restore all columns in the group

​
See Also

Source Code
  • prod-powersheet-src/com.nextedy.powersheet.client/ltc-repo/packages/sheet/commands/group-row.ts
  • prod-powersheet-src/com.nextedy.powersheet.client/ltc-repo/cypress/e2e/Sheet/master-downstream.spec.ts
  • prod-powersheet-src/com.nextedy.powersheet.client/ltc-repo/packages/sheet/ViewModel.ts
  • prod-powersheet-src/com.nextedy.powersheet.client/ltc-repo/cypress/e2e/Sheet/column-groups.spec.ts
  • prod-powersheet-src/com.nextedy.powersheet.client/ltc-repo/packages/sheet/SheetComponent.tsx