Documentation

Cell Renderer

CodeSandbox

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. With the expanded CellValue type supporting arrays and objects, you can now render complex data structures like tag lists, team member arrays, and nested object data.

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.

Cell Renderer Configuration

PropertyRequiredDescriptionExample
HeaderObject.cellRenderer
(params: CellRendererParams) => ReactNode | string
Optional
Custom function to render cell content. Receives cell information and returns either a ReactNode or string for display.

Cell Renderer Parameters

CellRendererParams Interface

PropertyRequiredDescriptionExample
accessor
string
Required
The column accessor string identifying which column this cell belongs to.
colIndex
number
Required
The zero-based index of the column within the table.
row
Row
Required
The complete row object containing all data for this row. Access cell values using row[accessor].

💡 Pro Tip

Use the row parameter to access any data from the current row, not just the current cell. This allows you to create renderers that depend on multiple column values.

Row Object Structure

The row parameter passed to your cell renderer is a flat object containing all the row's data:

React TSX
1type Row = {
2  id: string | number;           // Unique identifier for the row
3  [accessor: Accessor]: CellValue; // All cell values accessible by column accessor
4  
5  // For hierarchical data (optional):
6  children?: Row[];              // Child rows (e.g., invoices array, stations array)
7};
8

9// CellValue now supports arrays and objects:
10type CellValue = string | number | boolean | undefined | null | string[] | number[] | Record<string, any>[];
11

12// Example row structure:
13{
14  id: "SALE-123",
15  repName: "John Doe",
16  dealSize: 15000,
17  isWon: true,
18  category: "Software",
19  tags: ["Enterprise", "SaaS"],           // string array
20  teamMembers: [                          // object array
21    { name: "Alice", role: "Manager" },
22    { name: "Bob", role: "Developer" }
23  ]
24}

To access a specific cell value, use row[accessor] directly. The row object is flat and contains all the data for that row.

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