Conditional formatting

Three value-driven cell visuals, each computed from the column’s faceted min/max (or explicit bounds): a color scale (interpolated background), a data bar (in-cell proportional bar), and an icon set (a level icon by threshold). The synthetic grand-total row is excluded from the domain so it can’t flatten the scale.

Dash (Python)

# Declarative — attach by column name in the config:
payload = build_grid(sales, {
    "rows": ["region", "country"],
    "measures": {"revenue": "sum", "qty": "sum"},
    "conditional_formats": {
        "revenue": {"type": "colorScale", "colors": ["#fff5f5", "#2f9e44"]},
        "qty": {"type": "dataBar", "color": "#4c8bf5"},
    },
})

React

<TensorGrid
  data={data}
  rows={['region', 'country']}
  measures={{ revenue: 'sum', qty: 'sum' }}
  colorScales={{ revenue: { min: '#fff5f5', max: '#2f9e44' } }}
  dataBars={{ qty: { color: '#4c8bf5', domainMin: 0 } }}
  iconSets={{ revenue: { set: 'triangles' } }}
/>;

Vue

<TensorGrid
  :data="data"
  :rows="['region', 'country']"
  :measures="{ revenue: 'sum', qty: 'sum' }"
  :color-scales="{ revenue: { min: '#fff5f5', max: '#2f9e44' } }"
  :data-bars="{ qty: { color: '#4c8bf5', domainMin: 0 } }"
  :icon-sets="{ revenue: { set: 'triangles' } }"
/>

Vanilla JS

mountTensorGrid(el, {
  data,
  rows: ['region', 'country'],
  measures: { revenue: 'sum', qty: 'sum' },
  colorScales: { revenue: { min: '#fff5f5', max: '#2f9e44' } },
  dataBars: { qty: { color: '#4c8bf5', domainMin: 0 } },
  iconSets: { revenue: { set: 'triangles' } },
});

Options

• colorScale — { min, mid?, max, domainMid? }. Set mid + domainMid for a diverging scale centered on a specific value (e.g. 0 for profit/loss).
• dataBar — { color, negativeColor?, origin?, domainMin?, domainMax? }. Set origin for a diverging bar (above paints right, below paints left).
• iconSet — { set, thresholds?, colors?, reverse? }. reverse flips it so a LOW value reads as “good” (cost / rank / error columns).
• Bounds default to the column’s faceted min/max; pass explicit min/max to fix them.
• For discrete value → style/class rules instead of continuous visuals, see style rules.