Skip to main content
See also: Columns | Styles

​
Column Group Structure

diagram

​
Column Group Properties

NameTypeDefaultDescription
groupNamestringRequiredDisplay name for the column group header. Shown in the merged group header row.
groupStylestringNone (white)Color identifier applied to the grouped columns’ background. Must be a predefined style name or a custom style defined in the styles section.
headerStylestringNone (white)Color identifier applied to all sub-headers of the group. Can be overridden by header.style defined on individual columns.
collapseTostringNoneBinding path of the column to display when the group is collapsed. If the specified column is hidden, the last visible column in the group is shown instead.
When collapseTo is not specified, the group does not provide a collapse option. The collapse toggle button appears in the group header only when collapseTo is configured.

​
Defining Column Groups

Column groups are defined in the top-level columnGroups section. Each key is a group ID referenced by individual columns: 
columnGroups:
  requirements:
    groupName: Requirements
    groupStyle: darkblue
    headerStyle: blue
    collapseTo: title

  testing:
    groupName: Testing
    groupStyle: darkgreen
    headerStyle: green
    collapseTo: validationTestCases.validationTestCase

​
Assigning Columns to Groups

Add the columnGroup property to individual column definitions, referencing the group ID: 
columns:
  title:
    title: Title
    width: 200
    columnGroup: requirements

  severity:
    title: Severity
    width: 100
    columnGroup: requirements

  validationTestCases.validationTestCase:
    title: Validation Tests
    width: 180
    columnGroup: testing
    multiItem: true

​
Predefined Styles for Groups

Use any of the predefined style names for groupStyle and headerStyle:
Style NameText ColorBackground Color
nonenonenone
boldTitle——
darkgreygrey700grey200
greygrey700grey100
darkredred700red200
redred700red100
darkorangeorange700orange200
orangeorange700orange100
darkgreengreen700green200
greengreen700green100
lightgreengreen700primaryalt100
darkblueblue700blue200
blueblue700blue100
lightblueblue700teal100
darktealteal700teal200
tealteal700teal100
darkpurplepurple700purple200
purplepurple700purple100
lightpurplepurple700primary100
See Styles for the full style reference with color tokens.

​
Collapse and Expand

When a group is configured with collapseTo, users can toggle the group between expanded and collapsed states:
  • Expanded: All columns in the group are visible
  • Collapsed: Only the collapseTo column is visible; other columns are hidden
The collapse toggle button appears in the group header row. 
columnGroups:
  sysReq:
    groupName: System Requirements
    groupStyle: darkblue
    headerStyle: blue
    collapseTo: systemRequirements.systemRequirement.title
If the column specified in collapseTo is hidden (not visible), the last visible column in the group is used as the collapse target instead.

​
Ungrouped Columns

Columns without an explicit columnGroup assignment display a blank group header. The two-row header structure (group row + column row) is maintained consistently whether groups are defined or not.

​
Exporting Column Groups

Column group headers are exported to Excel when using the export feature. Merged cells span all columns in the group, displaying the group name once in the exported file.

​
Complete YAML Example

columnGroups:
  userNeed:
    groupName: User Needs
    groupStyle: darkpurple
    headerStyle: purple

  sysReq:
    groupName: System Requirements
    groupStyle: darkblue
    headerStyle: blue
    collapseTo: systemRequirements.systemRequirement.title

  testing:
    groupName: Testing
    groupStyle: darkgreen
    headerStyle: green
    collapseTo: validationTestCases.validationTestCase

columns:
  outlineNumber:
    title: "#"
    width: 80

  title:
    title: User Need
    width: 200
    hasFocus: true
    columnGroup: userNeed

  severity:
    title: Severity
    width: 100
    columnGroup: userNeed

  systemRequirements.systemRequirement.title:
    title: Sys Req Title
    width: 200
    columnGroup: sysReq
    hasFocus: true

  systemRequirements.systemRequirement.severity:
    title: Sys Req Severity
    width: 100
    columnGroup: sysReq

  validationTestCases.validationTestCase:
    title: Validation Tests
    width: 180
    multiItem: true
    display: title
    columnGroup: testing

  systemRequirements.systemRequirement.verificationTestCases.verificationTestCase:
    title: Verification Tests
    width: 180
    multiItem: true
    display: title
    columnGroup: testing

styles:
  readOnlyStyle:
    backgroundColor: grey100

formatters:
  readonly:
    - expression: 'true'
      style: readOnlyStyle

sources:
  - id: rtm
    model: rtm
    query:
      from: UserNeed
    expand:
      - name: systemRequirements
        title: System Requirements
        expand:
          - name: designRequirements
            title: Design Requirements
          - name: verificationTestCases
            title: Verification Tests
      - name: validationTestCases
        title: Validation Tests
Related pages: Columns | Styles | Views