Step 1: Define a Column Group
Add acolumnGroups section to your sheet configuration YAML. Each group has a unique ID and configuration properties:
Step 2: Understand Group Properties
| Property | Required | Description |
|---|---|---|
groupName | Yes | Display name shown in the group header row |
groupStyle | No | Color style applied to grouped column backgrounds. Uses a predefined style name or a custom style. Defaults to white. |
headerStyle | No | Color style applied to all sub-column headers within the group. Can be overridden per column with header.style. Defaults to white. |
collapseTo | No | Binding path of the column to show when the group is collapsed. If omitted, the group cannot be collapsed. |
Step 3: Assign Columns to the Group
Add acolumnGroup property to each column that should belong to the group:
Step 4: Configure Multiple Groups
Define multiple groups with different color schemes to visually separate entity domains:Step 5: Enable Collapse Behavior
WhencollapseTo is set, a collapse toggle button appears in the group header. Clicking it hides all columns in the group except the specified one:
hazard column is visible. Click the toggle again to expand all columns back.
The
collapseTo value is specified by column binding path. If the target column is hidden (visible: false), the last visible column in the group is used instead.Predefined Style Names
You can use any of these built-in style names forgroupStyle and headerStyle:
none, grey, darkgrey, red, darkred, orange, darkorange, green, darkgreen, lightgreen, blue, darkblue, lightblue, teal, darkteal, purple, darkpurple, lightpurple
For custom colors, define styles in the styles section and reference them by name. See Apply Column Styles.
Verify
After saving the sheet configuration, reload the powersheet document. You should now see:- A group header row appears above the column headers
- Columns assigned to the same group share a merged group header cell
- Columns without a
columnGroupshow a blank group header - Groups with
collapseTodisplay a collapse toggle button
See Also
- Apply Column Styles — define custom styles for headers and groups
- Customize Header Styles — advanced header styling
- Configure Collapsible Groups — detailed collapse configuration
- Add a Column — column basics and binding paths
Source reference
Source reference
column-column-group-header-styles KB article, column-groups.spec.ts, powersheet.yaml, whole_rtm.template.yaml
Sources
Sources
KB Articles
- Getting Started: Sheet Configurations
- Views Configuration Guide
- Column and Column Group Header Styles configuration
prod-powersheet-src/com.nextedy.powersheet.client/ltc-repo/packages/common/types/api/document.tsprod-powersheet-src/com.nextedy.powersheet.client/ltc-repo/cypress/e2e/Sheet/column-groups.spec.tsprod-powersheet-src/com.nextedy.powersheet.client/cypress/fixtures/configurations/whole_rtm.template.yamlpowersheet.yamlprod-powersheet-src/com.nextedy.powersheet.client/ltc-repo/packages/sheet/commands/group-row.ts