Skip to main content
This page has thin source coverage. Expression syntax and context variables are derived from configuration templates. Verify advanced expression patterns in the application.

​
Conditional Formatting Chain

diagram

​
Configuration Sections

​
1. Column References a Formatter

columns:
  title:
    title: Title
    width: 200
    formatter: boldTitle

​
2. Formatter Defines Rules

Each formatter is an array of rules. Each rule has an expression (JavaScript expression evaluated per cell) and a style name applied when the expression is true. 
formatters:
  boldTitle:
    - expression: 'true'
      style: boldTitleStyle

​
3. Style Defines Visual Properties

styles:
  boldTitleStyle:
    fontWeight: 600

​
Formatter Rule Properties

PropertyTypeDefaultDescription
formatters.<name>array[]Array of conditional rules
formatters.<name>[].expressionstringNoneJavaScript expression that evaluates to true or false
formatters.<name>[].stylestringNoneNamed style to apply when expression is true

​
Style Properties

PropertyTypeDefaultDescription
styles.<name>.backgroundColorstringNoneBackground color token (e.g., grey100, red200)
styles.<name>.colorstringNoneText color token (e.g., grey700, red700)
styles.<name>.fontWeightnumberNoneFont weight (e.g., 600)
styles.<name>.textDecorationstringNoneText decoration (e.g., line-through)

​
Unconditional Formatting

Apply a style to every cell in the column regardless of value: 
formatters:
  readonly:
    - expression: 'true'
      style: readOnlyStyle

styles:
  readOnlyStyle:
    backgroundColor: 'grey100'

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

​
Using Predefined Styles

All 20 predefined styles can be used in formatter rules without defining them in the styles section:
StyleAppearance
noneNo styling
boldTitleFont weight 600
readOnlyRead-only visual indicator
unsupportedGrey background with strikethrough
grey, darkgreyGrey shades
red, darkredRed shades
orange, darkorangeOrange shades
green, darkgreen, lightgreenGreen shades
blue, darkblue, lightblueBlue shades
teal, darktealTeal shades
purple, darkpurple, lightpurplePurple shades

​
Multiple Formatters on One Column

A column can only reference one formatter name, but that formatter can contain multiple rules: 
formatters:
  statusHighlight:
    - expression: 'true'
      style: defaultCellStyle
    - expression: 'context.value === "Critical"'
      style: criticalStyle

styles:
  defaultCellStyle:
    backgroundColor: 'grey100'
  criticalStyle:
    backgroundColor: 'red200'
    color: 'red700'
    fontWeight: 600
The exact context object available within formatter expressions depends on the runtime. Common patterns include context.value for the current cell value and context.item for the row entity.

​
Decision Matrix: Choosing the Right Approach

RequirementApproachExample
Always apply same styleUnconditional formatter with expression: 'true'Read-only columns
Style based on cell valueConditional expressionSeverity coloring
Color-code column headersUse header.style insteadSee Header Styles
Color-code column groupsUse groupStyle on column groupSee Column Groups

​
Complete YAML Example

columns:
  outlineNumber:
    title: "#"
    width: 80
    formatter: readonly
    isReadOnly: true
  title:
    title: User Need
    width: 200
    hasFocus: true
    formatter: boldTitle
  systemRequirements.systemRequirement.title:
    title: System Requirement
    width: 180
    columnGroup: sysReq
    header:
      style: blue
  systemRequirements.systemRequirement.severity:
    title: Severity
    width: 100
    columnGroup: sysReq

columnGroups:
  sysReq:
    groupName: System Requirements
    groupStyle: darkblue
    headerStyle: blue
    collapseTo: systemRequirements.systemRequirement.title

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

styles:
  readOnlyStyle:
    backgroundColor: 'grey100'
  boldTitleStyle:
    fontWeight: 600

sources:
  - id: main
    model: rtm
    query:
      from: UserNeed
      where: <WHERE>
    expand:
      - name: systemRequirements
        title: System Requirements
Source references: powersheet.yaml, whole_rtm.template.yaml, ConfigProvider.tsx (DEFAULT_STYLES)
KB ArticlesSource Code
  • powersheet.yaml
  • prod-powersheet-src/com.nextedy.powersheet.client/ltc-repo/packages/common/types/api/document.ts
  • prod-powersheet-src/com.nextedy.powersheet.client/cypress/fixtures/configurations/whole_rtm.template.yaml
  • prod-powersheet-src/com.nextedy.powersheet.client/ltc-repo/packages/sheet/commands/exportXlsx.tsx
  • prod-powersheet-src/com.nextedy.powersheet.client/ltc-repo/packages/sheet/SheetComponent.tsx