Configuring Column Header Styles in Powersheet

Purpose of This Guide

This article explains how to style column headers in Powersheet, including:

• How to use default styles (like red, green, lightpurple)

• Where and how to apply styles in column configuration

• How to define and apply your own custom styles

Use styles to highlight columns by importance, type (e.g. Risk, Requirement, Control), or to visually group related data.

Using Predefined Header Styles

Powersheet comes with several semantic style presets you can use out of the box.

Available Styles

These are useful for color-coding different column types: e.g. risks in red, controls in blue, references in purple.

How to Apply a Style to a Column Header

In your Powersheet YAML configuration, apply a header style like this

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

This will make the header text purple and background light purple.

Defining and Using Custom Styles

If you want your own custom style, you can define it in the styles: section.

1. Add to styles

    columns:
       .... 
    styles: 
      readOnlyStyle: 
        backgroundColor: 'grey100'

2. Use the Style

Apply it to a column header:

      - binding: outlineNumber
        title: "#"
        width: 80
        isReadOnly: true
        header:  
          style: warningHeader

Or use it in a formatter:

columns:
      - binding: outlineNumber
        title: "#"
        width: 80
        formatter: readonly        
        isReadOnly: true

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

Available Color Tokens

Powersheet allows you to use color names like:

color: purple700 backgroundColor: purple100

These color names are shorthand for predefined values based on the system’s design tokens. Here’s what each color level means:

Color Levels and Shades

Each color has variants from 100 to 700. Smaller numbers are lighter backgrounds, larger numbers are stronger/darker foregrounds.

Purple

Blue

Teal

Green

Orange

Red

Grey

Tips

• Use lightpurple, purple, blue, or red to visually group related columns.

• Reuse header definitions using anchors to avoid repetition.

• Add custom styles for special use cases (readonly columns, high-priority fields, etc.).