CellRenderContext

Context passed to custom view renderers (pure display – no commit helpers).

Used by viewRenderer and renderer column properties to create custom cell content. Return a DOM node or HTML string.

Example

// Status badge renderer
const statusRenderer: ColumnViewRenderer = (ctx: CellRenderContext) => {
  const badge = document.createElement('span');
  badge.className = `badge badge-${ctx.value}`;
  badge.textContent = ctx.value;
  return badge;
};

// Progress bar using row data
const progressRenderer: ColumnViewRenderer = (ctx) => {
  const bar = document.createElement('div');
  bar.className = 'progress-bar';
  bar.style.width = `${ctx.value}%`;
  bar.title = `${ctx.row.taskName}: ${ctx.value}%`;
  return bar;
};

// Return HTML string (simpler, less performant)
const htmlRenderer: ColumnViewRenderer = (ctx) => {
  return `<strong>${ctx.value}</strong>`;
};

Properties

Property	Type	Description
row	TRow	Row object for the cell being rendered.
value	TValue	Value at field.
field	unknown & string	Field key.
column	ColumnConfig<TRow>	Column configuration reference.
cellEl?	HTMLElement	The cell DOM element being rendered into. Framework adapters can use this to cache per-cell state (e.g., React roots).

See Also

• ColumnViewRenderer for the renderer function signature