Column and Column Group Header Styles configuration

TABLE OF CONTENTS

• Purpose of This Guide
• Using Predefined Header Styles
  • Available Styles
• How to Apply a Style to a Column Header
• Defining and Using Custom Styles
  • 1. Add to styles
  • 2. Use the Style
• How to Apply a Style to a Column Header Group
  • Available Color Tokens
  • Color Levels and Shades
    • Purple
    • Blue
    • Teal
    • Green
    • Orange
    • Red
    • Grey
• Tips

Purpose of This Guide

This article explains how to style column & column group 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

• How to apply styles to a column header group

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 for headers and header groups.

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

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

This will make the header text purple and the 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:

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

Or use it in a formatter:

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

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

How to Apply a Style to a Column Header Group

Groups can be used to visually organize related columns and optionally collapse them into a single column.

    columnGroups: 
      epic:        #Group ID that is specified in the column properties   
        groupName: Epics         
        groupStyle: darkgreen
        headerStyle: green
        collapseTo: title

groupName (required)

• Display name for the group, shown in the group header.

groupStyle (optional)

• Colour identifier applied to the grouped columns.

• A value needs to be a name of a style defined in styles section, or one of the predefined header styles.

• If not specified, the default white color is used.

headerStyle (optional)

• Colour identifier applied to all subheaders of that group (can be overwritten by header.style defined on column)

• A value needs to be a name of a style defined in styles section, or one of the predefined header styles.
• If not specified, the default white color is used.

collapseTo (optional)

• Specifies the column to which the group will collapse.

          - It is specified by column binding.

• If not specified, the group will not provide a collapse option.

• If the specified column is hidden (not visible), the last visible column in the group will be used instead.

Once the style is defined, add a columnGroup property to the column configuration. After that, the column group and optionally the column header would be styled accordingly.

columns: 
     title:
        title: Title
        width: 200
        columnGroup: epic

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.
See below 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.).

For any assistance, please don’t hesitate to reach out by submitting a ticket here.