Style rules

Style rules are the discrete complement of the continuous cell visuals: instead of interpolating a color across a domain, each rule tests a cell’s value and, when it matches, applies a CSS style and/or a className. Reach for them for thresholds and categorical highlights — “negative in red”, “over target in bold green”. The engine ships raw values; the rule decision is pure presentation.

Dash (Python)

from dash_tensor_grid import TensorGrid, build_grid

payload = build_grid(sales, {
    "rows": ["region", "country"],
    "measures": {"revenue": "sum", "qty": "sum"},
    "formats": {"revenue": "currency:USD", "qty": "number:0"},
    # Each rule's `if` is a safe formula over the row's measures; truthy -> apply.
    "style_rules": {
        "revenue": [
            {"if": "revenue >= 200", "style": {"color": "#067647", "fontWeight": "bold"}},
            {"if": "revenue < 60", "style": {"color": "#b42318"}},
        ],
    },
})
TensorGrid(id="grid", row_data=payload["row_data"], column_defs=payload["column_defs"])

React

<TensorGrid
  data={data}
  rows={['region', 'country']}
  measures={{ revenue: 'sum', qty: 'sum' }}
  formats={{ revenue: '$0,0', qty: '0,0' }}
  cellStyles={{
    revenue: [
      { op: '>=', value: 200, style: { color: '#067647', fontWeight: 'bold' } },
      { op: '<', value: 60, style: { color: '#b42318' } },
    ],
  }}
/>;

Vue

<TensorGrid
  :data="data"
  :rows="['region', 'country']"
  :measures="{ revenue: 'sum', qty: 'sum' }"
  :formats="{ revenue: '$0,0', qty: '0,0' }"
  :cell-styles="{
    revenue: [
      { op: '>=', value: 200, style: { color: '#067647', fontWeight: 'bold' } },
      { op: '<', value: 60, style: { color: '#b42318' } },
    ],
  }"
/>

Vanilla JS

mountTensorGrid(el, {
  data,
  rows: ['region', 'country'],
  measures: { revenue: 'sum', qty: 'sum' },
  formats: { revenue: '$0,0', qty: '0,0' },
  cellStyles: {
    revenue: [
      { op: '>=', value: 200, style: { color: '#067647', fontWeight: 'bold' } },
      { op: '<', value: 60, style: { color: '#b42318' } },
    ],
  },
});

Options

• JS adapters (cellStyles) — an array of operator rules { op, value, value2?, style?, className? }, first match wins per cell. Numeric operators: = != > >= < <= between (uses value2) blank notBlank; text operators: contains / startsWith / endsWith / equals and their negations.
• Dash config (style_rules) — an array of { if, style?, className? } where if is the same safe formula DSL as a calculated measure, evaluated per row against its measure values (so a rule can reference other columns, e.g. "revenue < cost"). Every matching rule layers on.
• style is a camelCase CSS object ({ color, fontWeight, backgroundColor }); className appends a class so you can style from your own CSS. A rule needs at least one of the two.
• A rule’s background / backgroundColor wins over a data bar or color scale on the same cell.