Skip to main content

​
Apply a Predefined Header Style

Powersheet includes 20 built-in styles you can apply directly to any column header. Add the header property with a style reference inside your column definition: 
columns:
  description:
    title: "Foreseeable Sequence of Events"
    width: 140
    header:
      style: lightpurple
This sets the header text color and background according to the predefined lightpurple style.

​
Predefined Styles Reference

Style NameText ColorBackground ColorOther
none———
boldTitle——fontWeight: 600
unsupportedgrey800grey200textDecoration: line-through
readOnly——Read-only visual indicator
darkgreygrey700grey200—
greygrey700grey100—
darkredred700red200—
redred700red100—
darkorangeorange700orange200—
orangeorange700orange100—
darkgreengreen700green200—
greengreen700green100—
lightgreengreen700primaryalt100—
darkblueblue700blue200—
blueblue700blue100—
lightblueblue700teal100—
darktealteal700teal200—
tealteal700teal100—
darkpurplepurple700purple200—
purplepurple700purple100—
lightpurplepurple700primary100—
Use color families to visually group related columns: risks in red, controls in blue, requirements in purple, verification in green.

​
Define a Custom Style

To create your own style, add a definition in the styles section and reference it by name: 
styles:
  warningHeader:
    backgroundColor: 'orange200'
    color: 'orange700'

columns:
  outlineNumber:
    title: "#"
    width: 80
    header:
      style: warningHeader
Custom styles are merged on top of the built-in defaults, so you can override any predefined style name with your own definition.

​
Apply Styles to Column Groups

Use columnGroups to apply consistent styling across a set of related columns. Each group supports three style properties: 
columnGroups:
  epic:
    groupName: Epics
    groupStyle: darkgreen
    headerStyle: green
    collapseTo: title

columns:
  title:
    title: Title
    width: 200
    columnGroup: epic
PropertyDescription
groupNameDisplay name shown in the group header row (required)
groupStyleStyle applied to the grouped columns background (optional)
headerStyleStyle applied to all subheader columns in the group — can be overridden per column via header.style (optional)
collapseToBinding path of the column shown when the group is collapsed (optional)
A column-level header.style takes priority over the group-level headerStyle. Use group styles for defaults and column styles for exceptions.

​
Color Tokens

Powersheet color tokens use a naming pattern of {color}{level} where levels range from 100 (lightest) to 700 (darkest). Available color families: diagram Use these tokens in custom style definitions: 
styles:
  customHighlight:
    backgroundColor: 'red100'
    color: 'red700'

​
Use YAML Anchors for Reuse

Define a header style once as a YAML anchor and reuse it across columns: 
header: &blue
  style: blue

columns:
  systemRequirements.systemRequirement.title:
    title: System Requirement
    header: *blue
  systemRequirements.systemRequirement.severity:
    title: Severity
    header: *blue

​
Verify

After saving the sheet configuration, reload the powersheet document. You should now see styled column headers with the colors you specified, and any column group headers displaying their configured groupStyle.

​
See also

KB ArticlesSource Code
  • powersheet.yaml
  • prod-powersheet-src/com.nextedy.powersheet.client/ltc-repo/packages/sheet/SheetComponent.tsx
  • prod-powersheet-src/com.nextedy.powersheet.client/cypress/fixtures/configurations/whole_rtm.template.yaml
  • prod-powersheet-src/com.nextedy.powersheet.client/src/modules/Powersheet/Powersheet.tsx
  • prod-powersheet-src/com.nextedy.powersheet.client/ltc-repo/packages/common/types/api/document.ts