Icon sets

An icon set classifies each cell into one of three levels by where its value sits in the column domain and shows the level’s icon and color — a compact traffic-light / trend indicator. It’s presentation only (the engine ships raw numerics; the frontend picks the level), and the grand-total row is excluded from the domain.

Dash (Python)

from dash_tensor_grid import TensorGrid, build_grid

payload = build_grid(sales, {
    "rows": ["region", "country"],
    "measures": {"revenue": "sum"},
    "formats": {"revenue": "currency:USD"},
    "conditional_formats": {
        "revenue": {"type": "iconSet", "set": "triangles"},  # traffic | triangles | arrows
    },
})
TensorGrid(id="grid", row_data=payload["row_data"], column_defs=payload["column_defs"])

React

<TensorGrid
  data={data}
  rows={['region', 'country']}
  measures={{ revenue: 'sum' }}
  formats={{ revenue: '$0,0' }}
  iconSets={{ revenue: { set: 'triangles' } }}
/>;
// A "low = good" column (cost / rank / errors): { set: 'arrows', reverse: true }

Vue

<TensorGrid
  :data="data"
  :rows="['region', 'country']"
  :measures="{ revenue: 'sum' }"
  :formats="{ revenue: '$0,0' }"
  :icon-sets="{ revenue: { set: 'triangles' } }"
/>

Vanilla JS

mountTensorGrid(el, {
  data,
  rows: ['region', 'country'],
  measures: { revenue: 'sum' },
  formats: { revenue: '$0,0' },
  iconSets: { revenue: { set: 'triangles' } },
});

Options

• set — the icon preset: 'arrows' (↓ → ↑), 'triangles' (▼ ▬ ▲), or 'traffic' (three dots). Default 'arrows'.
• thresholds — explicit level boundaries [t1, t2] (value < t1 → low, < t2 → mid, else high). Default: the domain thirds.
• colors — per-level colors [low, mid, high]. Default red / amber / green.
• reverse — flip the level → icon/color mapping so a low value reads as “good” (green / up). Use it for cost, rank, or error columns.
• A flat domain maps every cell to the neutral mid level.
• Prefer a continuous background or bar? See color scales and data bars, summarized on the conditional formatting page.