ColumnViewRenderer

Custom view renderer function for cell content.

Returns one of:

• Node - DOM element to display in the cell
• string - HTML string (parsed and inserted)
• void | null - Use default text rendering

type ColumnViewRenderer = (ctx: CellRenderContext<TRow, TValue>) => Node | string | void | null

Example

// DOM element (recommended for interactivity)
const avatarRenderer: ColumnViewRenderer<Employee> = (ctx) => {
  const img = document.createElement('img');
  img.src = ctx.row.avatarUrl;
  img.alt = ctx.row.name;
  img.className = 'avatar';
  return img;
};

// HTML string (simpler, good for static content)
const emailRenderer: ColumnViewRenderer = (ctx) => {
  return `<a href="mailto:${ctx.value}">${ctx.value}</a>`;
};

// Conditional rendering
const conditionalRenderer: ColumnViewRenderer = (ctx) => {
  if (!ctx.value) return null; // Use default
  return `<em>${ctx.value}</em>`;
};

See Also

• CellRenderContext for available context properties