Documentation

Cell Renderer

Cell renderers give you complete control over how data is displayed in your table cells. Using custom renderers, you can create rich, interactive elements like buttons, badges, progress bars, and more.

Basic Usage

Each column in your table can have its own cellRenderer function. This function receives information about the cell and returns either a ReactNode or a string to be rendered in the cell.

React TSX
1

cellRenderer Parameters

Each cellRenderer function receives an object with these properties:

  • accessor: The column accessor string
  • colIndex: The column index
  • row: The row object containing the data

Row Object Structure

The row parameter passed to your cell renderer has the following structure:

type Row = {
  // Row metadata
  rowMeta: {
    children?: Row[];    // Child rows for hierarchical data
    isExpanded?: boolean; // Whether this row is expanded (for hierarchical data)
    rowId: number;       // Unique identifier for the row
  };

  // Actual cell values
  rowData: { [key: string]: CellValue };  // Map of accessors to cell values
};

To access a specific cell value, use row.rowData[accessor].

Return Types

Your cellRenderer function should return one of the following:

  • String: A simple text value to display in the cell
    return "Hello, world!";
  • ReactNode: A React component for custom rendering
    return <div className="flex items-center"><span className="mr-2">⭐</span> Custom Content</div>;

Important Notes

  • Each column can have its own unique renderer
  • Columns without a cellRenderer will display their values as plain text
  • Avoid expensive operations in cell renderers as they run frequently
  • Consider memoizing complex components to improve performance
Previous: Cell HighlightingNext: Pagination