Skip to main content

Define a Formatter

Formatters are named definitions in the formatters section of your sheet configuration. Each formatter contains an array of rules, where each rule has an expression (condition) and a style (to apply when the condition is true).
formatters:
  boldTitle:
    - expression: 'true'
      style: boldTitleStyle

styles:
  boldTitleStyle:
    fontWeight: "bold"
The expression property accepts a string that evaluates as a condition. When the expression evaluates to true, the referenced style is applied to the cell.

Apply a Formatter to a Column

Reference the formatter by name in the column’s formatter property:
columns:
  title:
    title: Title
    width: 200
    formatter: boldTitle
The formatter name must match a key defined in the formatters section.

Create a Read-Only Formatter

A common pattern is using a formatter to visually indicate read-only columns by combining isreadOnly with the built-in readOnly style:
formatters:
  readonly:
    - expression: 'true'
      style: readOnlyStyle

styles:
  readOnlyStyle:
    backgroundColor: 'grey100'

columns:
  outlineNumber:
    title: "#"
    width: 80
    formatter: readonly
    isreadOnly: true
Begin with a single formatter rule and verify it works before adding conditional expressions. Jumping straight to complex multi-rule formatters leads to hard-to-diagnose errors.

Formatter Evaluation Flow

diagram

Use Multiple Rules

A formatter can contain multiple expression-style pairs. Rules are evaluated in order:
formatters:
  severityHighlight:
    - expression: "value === 'Critical'"
      style: criticalStyle
    - expression: "value === 'Major'"
      style: majorStyle
    - expression: 'true'
      style: defaultStyle

styles:
  criticalStyle:
    backgroundColor: 'red100'
    color: 'red700'
  majorStyle:
    backgroundColor: 'orange100'
    color: 'orange700'
  defaultStyle:
    backgroundColor: 'grey100'
Every style value in a formatter rule must match a key in the styles section or one of the 20 predefined style names (such as none, boldTitle, readOnly, grey, red, green, blue, purple, teal, orange, and their dark/light variants). Referencing a nonexistent style will silently fail.

Complete Example

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

styles:
  readOnlyStyle:
    backgroundColor: 'grey100'
  boldTitleStyle:
    fontWeight: "bold"

columns:
  outlineNumber:
    title: "#"
    width: 80
    formatter: readonly
    isreadOnly: true
  title:
    title: Title
    width: 200
    formatter: boldTitle
    hasFocus: true

Verify

After saving the sheet configuration, reload the powersheet document. You should now see cells in the formatted columns displaying the background colors, font weights, or other CSS properties defined by the matched style rules.

See also

KB ArticlesSupport TicketsSource Code
  • prod-powersheet-src/com.nextedy.powersheet.client/cypress/fixtures/configurations/whole_rtm.template.yaml
  • prod-powersheet-src/com.nextedy.powersheet.client/ltc-repo/packages/common/types/api/document.ts
  • powersheet.yaml
  • prod-powersheet-src/com.nextedy.powersheet.client/src/modules/Powersheet/Powersheet.tsx
  • prod-powersheet-src/com.nextedy.powersheet/src/META-INF/hivemodule.xml