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	keyof TRow & string	Field key.
column	ColumnConfig<TRow>	Column configuration reference.
grid?	PublicGrid<TRow> & HTMLElement	The grid element that owns this cell. Use to access public grid API (e.g., getPluginByName()) from custom renderers.
cellEl?	HTMLElement	The cell DOM element being rendered into. Framework adapters can use this to cache per-cell state (e.g., React roots).

Property Details

grid

const renderer: ColumnViewRenderer<MyRow> = (ctx) => {
  const tree = ctx.grid?.getPluginByName('tree');
  // ...
};

---

See Also

• ColumnViewRenderer for the renderer function signature