> ## Documentation Index
> Fetch the complete documentation index at: https://learn.nextedy.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Apply Column Styles

> Apply predefined or custom visual styles to column headers and column groups in Nextedy POWERSHEET to color-code related data by domain.

export const LastReviewed = ({date}) => {
  if (!date) return null;
  const formatted = new Date(`${date}T00:00:00Z`).toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
    timeZone: "UTC"
  });
  return <p className="mt-10 text-sm text-gray-400 dark:text-zinc-500 not-prose">
      Last reviewed on {formatted}
    </p>;
};

## 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:

```yaml theme={null}
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 Name    | Text Color | Background Color | Other                        |
| ------------- | ---------- | ---------------- | ---------------------------- |
| `none`        | --         | --               | --                           |
| `boldTitle`   | --         | --               | fontWeight: 600              |
| `unsupported` | grey800    | grey200          | textDecoration: line-through |
| `readOnly`    | --         | --               | Read-only visual indicator   |
| `darkgrey`    | grey700    | grey200          | --                           |
| `grey`        | grey700    | grey100          | --                           |
| `darkred`     | red700     | red200           | --                           |
| `red`         | red700     | red100           | --                           |
| `darkorange`  | orange700  | orange200        | --                           |
| `orange`      | orange700  | orange100        | --                           |
| `darkgreen`   | green700   | green200         | --                           |
| `green`       | green700   | green100         | --                           |
| `lightgreen`  | green700   | primaryalt100    | --                           |
| `darkblue`    | blue700    | blue200          | --                           |
| `blue`        | blue700    | blue100          | --                           |
| `lightblue`   | blue700    | teal100          | --                           |
| `darkteal`    | teal700    | teal200          | --                           |
| `teal`        | teal700    | teal100          | --                           |
| `darkpurple`  | purple700  | purple200        | --                           |
| `purple`      | purple700  | purple100        | --                           |
| `lightpurple` | purple700  | primary100       | --                           |

<Tip title="Color-code by domain">
  Use color families to visually group related columns: risks in `red`, controls in `blue`, requirements in `purple`, verification in `green`.
</Tip>

## Define a Custom Style

To create your own style, add a definition in the `styles` section and reference it by name:

```yaml theme={null}
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:

```yaml theme={null}
columnGroups:
  epic:
    groupName: Epics
    groupStyle: darkgreen
    headerStyle: green
    collapseTo: title

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

| Property      | Description                                                                                                                            |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| `groupName`   | Display name shown in the group header row (required)                                                                                  |
| `groupStyle`  | Style applied to the group header band (optional). Predefined name or custom style. Defaults to white.                                 |
| `headerStyle` | Style applied to all sub-column headers in the group (optional) -- can be overridden per column via `header.style`. Defaults to white. |
| `collapseTo`  | Binding path of the column shown when the group is collapsed (optional)                                                                |

<Note title="Style resolution order">
  A column-level `header.style` takes priority over the group-level `headerStyle`. Use group styles for defaults and column styles for exceptions.
</Note>

## Color Tokens

Powersheet color tokens use a naming pattern of `{color}{level}` where levels range from `100` (lightest) to `700` (darkest). Available color families:

<Frame>
  <img src="https://mintcdn.com/none-17b4493f/-WiVljKlDztH36bB/powersheet/diagrams/guides/sheet-configuration/apply-style/diagram-1.svg?fit=max&auto=format&n=-WiVljKlDztH36bB&q=85&s=aa57aeefeb129af28b80ccdbd6bbaad7" alt="diagram" style={{ width: "520px", maxWidth: "100%" }} width="520" height="160" data-path="powersheet/diagrams/guides/sheet-configuration/apply-style/diagram-1.svg" />
</Frame>

Use these tokens in custom style definitions:

```yaml theme={null}
styles:
  customHighlight:
    backgroundColor: 'red100'
    color: 'red700'
```

For the full list of color tokens and their levels, see the [Styles reference](/powersheet/reference/sheet-config/styles).

## Use YAML Anchors for Reuse

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

```yaml theme={null}
columns:
  systemRequirements.systemRequirement.title:
    title: System Requirement
    header: &blueHeader
      style: blue
  systemRequirements.systemRequirement.severity:
    title: Severity
    header: *blueHeader
```

## Use Custom Styles in Formatters

Custom styles defined in the `styles` section can also be referenced by conditional formatters for cell-level styling:

```yaml theme={null}
styles:
  readOnlyStyle:
    backgroundColor: 'grey100'
  criticalHeader:
    color: 'red700'
    backgroundColor: 'red200'
    fontWeight: 600

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

<Tip title="Color-code by domain">
  Use consistent colors across your sheet to group related columns visually: for example, red for risks, blue for requirements, green for controls, and purple for references.
</Tip>

## 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`. Verify that:

* Individual column headers show the correct style
* Group headers span the correct columns with the specified `groupStyle`
* The `collapseTo` toggle works if configured (click the collapse button in the group header)

## See also

* [Configure a Column Group](/powersheet/guides/sheet-configuration/configure-column-group)
* [Configure a Formatter](/powersheet/guides/sheet-configuration/configure-formatter)
* [Add a Column](/powersheet/guides/sheet-configuration/add-column)

<LastReviewed date="2026-07-02" />