Cell renderers

A cell renderer swaps a cell’s plain formatted text for richer presentation — a badge or chip, a progress bar, a star rating, a link / email / url / phone, tags, a mini chart, or any custom markup. It changes presentation only: the underlying value stays raw, so sort, filter, and aggregate keep working exactly as before. The engine still does all the math.

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"},
    # Named renderers built into the component (shorthand, or {type, params}).
    "cell_renderers": {
        "qty": "badge",
        "revenue": {"type": "progressBar", "params": {"min": 0, "max": 300, "showValue": True}},
    },
})
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' }}
  cellRenderers={{
    // (value, node) => ReactNode — XSS-safe by construction (no innerHTML).
    revenue: (v) => <a href={`https://example.com/rev/${v}`}>${v}</a>,
    qty: (v) => <span className="tg-cellbadge">{String(v)}</span>,
  }}
/>;

Vue

<script setup lang="ts">
import { h } from 'vue';
</script>

<template>
  <TensorGrid
    :data="data"
    :rows="['region', 'country']"
    :measures="{ revenue: 'sum', qty: 'sum' }"
    :cell-renderers="{
      revenue: (v) => h('a', { href: `https://example.com/rev/${v}` }, `$${v}`),
      qty: (v) => h('span', { class: 'tg-cellbadge' }, String(v)),
    }"
  />
</template>

Vanilla JS

mountTensorGrid(el, {
  data,
  rows: ['region', 'country'],
  measures: { revenue: 'sum', qty: 'sum' },
  // (value, node) => htmlString | null. Escape interpolated data with the exported htmlEscape.
  cellRenderers: {
    revenue: (v) => `<a href="https://example.com/rev/${v}">$${v}</a>`,
    qty: (v) => `<span class="tg-cellbadge">${v}</span>`,
  },
});

Notes

• Two ways to render. The JS adapters take a per-column function — (value, node) => ReactNode (React), VNodeChild (Vue), or an HTML string (Vanilla) — returning null to fall back to the formatted value. The Dash component ships named renderers you reference by string in cell_renderers: charts sparkline / bar, and scalar widgets badge / chip / progressBar / link / rating / boolean / checkbox / email / url / phone / tags.
• Params. Named renderers take a params map ({type: 'rating', params: {max: 5}}, {type: 'link', params: {href: 'https://x/{value}'}}).
• The value stays raw, so the column still sorts and filters numerically and rolls up correctly — a renderer never becomes a source of truth.
• For array-valued mini charts specifically, see sparklines; for value-driven color, style rules and color scales.