Cell Renderers

Cell Renderers are the heart of Radiant Grid's extensibility. They allow you to transform raw data points into rich, interactive UI components while maintaining the performance of the virtualized grid.

Built-in Renderers

Radiant Grid provides optimized default renderers for common data types. These are automatically selected based on the type property in your column definition.

• Text (default): Renders as standard text with ellipsis on overflow.
• Number: Right-aligned with mono-space font support.
• Date: Formats dates according to the user's locale.
• Boolean: Renders a checkbox (read-only by default).

Custom React Renderers

To create a custom renderer, provide a function to the cellRenderer property. This function receives a params object and returns any React Node.

const columns = [
  {
    field: 'status',
    headerName: 'Status',
    cellRenderer: (params) => {
      const color = params.value === 'Active' ? 'green' : 'red';
      return (
        <span style={{ 
          background: color, 
          color: 'white', 
          padding: '2px 8px', 
          borderRadius: '12px',
          fontSize: '11px' 
        }}>
          {params.value}
        </span>
      );
    }
  }
];

Renderer Parameters

The renderer function receives a comprehensive context object:

Complex Example: Progress Bar

Renderers can be as complex as needed. Here is a progress bar that changes color based on the value:

cellRenderer: ({ value }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 8, width: '100%' }}>
    <div style={{ flex: 1, height: 6, backgroundColor: '#e2e8f0', borderRadius: 3 }}>
      <div style={{ 
        width: `${value}%`, 
        height: '100%', 
        backgroundColor: value > 80 ? '#22c55e' : '#3b82f6',
        borderRadius: 3 
      }} />
    </div>
    <span>{value}%</span>
  </div>
)

Performance Tips

Since cell renderers are called frequently during scrolling, keep them lightweight. Avoid complex logic or heavy component trees inside the function. For extremely dense grids, prefer inline styles over CSS-in-JS libraries.