Built-in Cell Renderers

Configure built-in and custom cell renderers.

Cell renderers display values inside grid cells. Configure them on ColumnDef.renderer.

Renderer Names

import type { ColumnDef } from '@zengrid/core';

const columns: ColumnDef[] = [
  { field: 'name', header: 'Name', width: 220, renderer: 'text' },
  { field: 'price', header: 'Price', width: 120, renderer: 'number' },
  { field: 'active', header: 'Active', width: 100, renderer: 'checkbox' },
  { field: 'status', header: 'Status', width: 140, renderer: 'chip' },
  { field: 'website', header: 'Website', width: 240, renderer: 'link' },
];

Grid Setup

const grid = new Grid(document.getElementById('grid')!, {
  columns,
  rowCount: rows.length,
  colCount: columns.length,
  rowHeight: 36,
  colWidth: columns.map((column) => column.width ?? 140),
});

grid.setData(rows);
grid.render();

Custom Renderer

import type { CellRenderer } from '@zengrid/core';

const statusRenderer: CellRenderer = {
  render(element, { value }) {
    element.textContent = String(value);
    element.className = `status status-${String(value).toLowerCase()}`;
  },
  update(element, params) {
    this.render(element, params);
  },
  destroy(element) {
    element.textContent = '';
    element.className = '';
  },
};

grid.registerRenderer('statusBadge', statusRenderer);

const columns: ColumnDef[] = [
  { field: 'status', header: 'Status', width: 140, renderer: 'statusBadge' },
];

Renderer Rules

Keep renderer DOM small.
Avoid layout reads inside render() and update().
Clean up event listeners and element state in destroy().
Register custom renderers before calling render().

💡 Tip

For large grids, renderer cost often matters more than row count. Benchmark custom renderers with realistic data.