Skip to main content

​
Column Header Style

PropertyTypeDefaultDescription
columns.<key>.headerobjectNoneHeader styling configuration for the column
columns.<key>.header.stylestringNoneName of a predefined or custom style to apply to the column header. Must reference a style name from the styles section or a predefined style.

​
Applying a Style to a Column Header

columns:
  description:
    title: Foreseeable Sequence of Events
    width: 140
    header:
      style: lightpurple

​
Reusing Header Styles with YAML Anchors

YAML anchors reduce repetition when multiple columns share the same header style: 
columns:
  systemRequirements.systemRequirement.title:
    title: System Requirement
    header: &blueHeader
      style: blue
  systemRequirements.systemRequirement.severity:
    title: Severity
    header: *blueHeader

​
Column Group Header Style

Column groups apply styles to the group header bar and optionally to all column headers within the group.
PropertyTypeDefaultDescription
columnGroups.<id>.groupStylestringNoneStyle applied to the column group header background. References a predefined or custom style name. If not specified, white is used.
columnGroups.<id>.headerStylestringNoneStyle applied to all column headers within the group. Can be overridden by header.style on individual columns. If not specified, white is used.

​
Applying Styles to a Column Group

columnGroups:
  epic:
    groupName: Epics
    groupStyle: darkgreen
    headerStyle: green
    collapseTo: title

​
Header Style Resolution

diagram Priority order:
  1. columns.<key>.header.style — applied if defined (highest priority)
  2. columnGroups.<id>.headerStyle — applied if column belongs to a group and no header.style is set
  3. Default white — applied if neither is defined

​
Predefined Header Styles

All 20 predefined styles are available for header use. See the full list in Styles.
CategoryStyle Names
Neutralnone, boldTitle, unsupported, darkgrey, grey
Reddarkred, red
Orangedarkorange, orange
Greendarkgreen, green, lightgreen
Bluedarkblue, blue, lightblue
Tealdarkteal, teal
Purpledarkpurple, purple, lightpurple
Use header styles to visually distinguish columns by domain area: requirements in blue, risks in red, controls in green, references in purple.

​
Custom Header Styles

Define custom styles in the styles section and reference them from header configurations: 
styles:
  warningHeader:
    backgroundColor: 'orange200'
    color: 'orange700'

columns:
  outlineNumber:
    title: "#"
    width: 80
    header:
      style: warningHeader

​
Complete YAML Example

columns:
  outlineNumber:
    title: "#"
    width: 80
    formatter: readonly
    isReadOnly: true
  title:
    title: User Need
    width: 200
    hasFocus: true
    columnGroup: userNeeds
  description:
    title: Description
    width: 140
    header:
      style: lightpurple
  systemRequirements.systemRequirement.title:
    title: System Requirement
    width: 180
    columnGroup: sysReq
  systemRequirements.systemRequirement.severity:
    title: Severity
    width: 100
    columnGroup: sysReq
  hazards.hazard.title:
    title: Hazard
    width: 160
    columnGroup: hazards
    header:
      style: darkred

columnGroups:
  userNeeds:
    groupName: User Needs
    groupStyle: darkblue
    headerStyle: blue
  sysReq:
    groupName: System Requirements
    groupStyle: darkgreen
    headerStyle: green
    collapseTo: systemRequirements.systemRequirement.title
  hazards:
    groupName: Hazards
    groupStyle: darkred
    headerStyle: red

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

styles:
  readOnlyStyle:
    backgroundColor: 'grey100'
  • Styles — predefined and custom style definitions with color token reference
  • Column Groups — groupStyle and headerStyle properties
  • Column Properties — full column property reference including header
  • Formatters — conditional cell styling (separate from header styling)
Source references: Column and Column Group Header Styles KB article, powersheet.yaml, whole_rtm.template.yaml, ConfigProvider.tsx (DEFAULT_STYLES)
KB ArticlesSource Code
  • powersheet.yaml
  • prod-powersheet-src/com.nextedy.powersheet.client/cypress/fixtures/configurations/whole_rtm.template.yaml
  • prod-powersheet-src/com.nextedy.powersheet.client/cypress/fixtures/configurations/mip_undo_redo.template.yaml
  • prod-powersheet-src/com.nextedy.powersheet.client/src/modules/Powersheet/Powersheet.tsx
  • prod-powersheet-src/com.nextedy.powersheet.client/ltc-repo/packages/sheet/SheetComponent.tsx