Skip to main content

​
Define a Conditional Formatter

Create a named formatter in the formatters section with one or more expression-style pairs. Each rule evaluates the expression and applies the referenced style when the condition is true: 
formatters:
  severityHighlight:
    - expression: "value === 'Critical'"
      style: criticalStyle
    - expression: "value === 'Major'"
      style: majorStyle
    - expression: 'true'
      style: defaultStyle
Rules are evaluated in order from top to bottom. The first rule whose expression evaluates to true determines the style applied to the cell.

​
Define the Styles

Each style referenced in a formatter must be defined in the styles section or match one of the 20 predefined style names: 
styles:
  criticalStyle:
    backgroundColor: 'red100'
    color: 'red700'
  majorStyle:
    backgroundColor: 'orange100'
    color: 'orange700'
  defaultStyle:
    backgroundColor: 'grey100'
Available CSS-like properties include backgroundColor, color, fontWeight, and textDecoration.

​
Apply the Formatter to a Column

Reference the formatter by name in the column’s formatter property: 
columns:
  severity:
    title: Severity
    width: 120
    formatter: severityHighlight

​
Conditional Formatting Evaluation Flow

diagram

​
Predefined Styles

Powersheet includes 20 built-in styles you can reference directly without defining them in the styles section:
Style NameDescription
noneNo styling
boldTitleBold font weight
readOnlyRead-only visual indicator
unsupportedStrikethrough text
grey / darkgreyGrey background variants
red / darkredRed background variants
orange / darkorangeOrange background variants
green / darkgreen / lightgreenGreen background variants
blue / darkblue / lightblueBlue background variants
teal / darktealTeal background variants
purple / darkpurple / lightpurplePurple background variants
You can use predefined style names directly in formatter rules: 
formatters:
  statusColor:
    - expression: "value === 'Approved'"
      style: green
    - expression: "value === 'Rejected'"
      style: red
    - expression: 'true'
      style: grey
If you define a style in the styles section with the same name as a predefined style, your custom definition takes priority. The 20 predefined styles serve as defaults that are merged with your custom styles.

​
Use Expression Variables

The expression string is evaluated as JavaScript. The variable value represents the current cell value: 
formatters:
  numberRange:
    - expression: "value > 100"
      style: red
    - expression: "value > 50"
      style: orange
    - expression: 'true'
      style: green
End your formatter rules with expression: 'true' as a catch-all. Without a fallback, cells that match no rule receive no formatting.

​
Complete Example

formatters:
  severityHighlight:
    - expression: "value === 'Critical'"
      style: criticalStyle
    - expression: "value === 'Major'"
      style: majorStyle
    - expression: 'true'
      style: defaultCellStyle
  readonly:
    - expression: 'true'
      style: readOnlyStyle

styles:
  criticalStyle:
    backgroundColor: 'red100'
    color: 'red700'
  majorStyle:
    backgroundColor: 'orange100'
    color: 'orange700'
  defaultCellStyle:
    backgroundColor: 'grey100'
  readOnlyStyle:
    backgroundColor: 'grey100'

columns:
  outlineNumber:
    title: "#"
    width: 80
    formatter: readonly
    isreadOnly: true
  title:
    title: Title
    width: "*"
    hasFocus: true
  severity:
    title: Severity
    width: 120
    formatter: severityHighlight

​
Verify

After saving the sheet configuration, reload the powersheet document. You should now see cells in the formatted columns displaying different background colors based on their values — critical items in red, major items in orange, and all other items in grey.

​
See also

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