Interface CellRendererIf

Decides how a cell looks – the value stays the same for sorting, filtering, copy and Excel export. Assign it per column and area (columnDef.rendererMap.body = …, or bodyRenderer in ColumnDef.create) or return it from AreaModelIf.getCellRenderer.

Renderers are called only for visible cells, on every repaint – keep them cheap.

Example

class StatusBadgeRenderer implements CellRendererIf {
  render(cellDiv: HTMLDivElement, rowIndex: number, columnIndex: number, areaIdent: AreaIdent,
         areaModel: AreaModelIf, cellValue: string, dom: DomServiceIf): RendererCleanupFnType | undefined {
    const badge = dom.createElement<HTMLSpanElement>("span");
    dom.addClass(badge, `status-${cellValue}`);
    badge.textContent = cellValue;
    dom.appendChild(cellDiv, badge);
    return undefined;                       // or a cleanup function (listeners, timers …)
  }
}
columnDefs[9].rendererMap.body = new StatusBadgeRenderer();
Copy

See

Training: Cell renderers, Framework components as cells