Results:
Loading...
Javascript Data GridJavascriptReact Data GridReactAngular Data GridAngularVue Data GridVue

React Data GridCell Rendering

By default the grid renders values into the cells as strings. If you want something more complex you use a cell renderer.

cellRenderer
any
Provide your own cell Renderer component for this column's cells.

The cell renderer for a column is set via colDef.cellRenderer and can be any of the following types:

  1. undefined: Grid renders the value as a string.
  2. String: The name of a cell renderer component.
  3. Class: Direct reference to a cell renderer component.
  4. Function: A function that returns JSX for display.

The code snippet below demonstrates each of these method types.

const columnDefs = [
    // 1 - undefined - Grid renders the value as a string.
    {
        field: 'name',
        cellRenderer: undefined,
    },
    // 2 - String - The name of a cell renderer registered with the grid.
    {
        field: 'age',
        cellRenderer: 'agGroupCellRenderer',
    },
    // 3 - Class - Provide your own cell renderer component directly without registering.
    {
        field: 'sport',
        cellRenderer: MyCustomCellRendererClass,
    },
    // 4 - Function - A function that returns a JSX element for display
    {
        field: 'year',
        cellRenderer: params => {
            // put the value in bold
            // return <>Value is <b> {params.value} </b> </>;
        }
    }
];

<AgGridReact columnDefs={columnDefs}></AgGridReact>

This remainder of this documentation page goes through the grid provided cell renderer's. To build your own cell renderer see the section Cell Rendering Components.

No Cell Renderer

If you have no requirements for custom cells, then you should use no cell renderer. Having no custom cell renderers will result in the fastest possible grid, as even the simplest cell renderer will result in some extra div's in the DOM

If you just want to do simple formatting of the data (eg currency or date formatting) then you can use colDef.valueFormatter.

valueFormatter
string | ValueFormatterFunc
A function or expression to format a value, should return a string. Not used for CSV export or copy to clipboard, only for UI cell rendering. 
valueFormatter: string | ValueFormatterFunc<TData>;

interface ValueFormatterFunc<TData = any> {
    (params: ValueFormatterParams<TData>) : string
}

interface ValueFormatterParams<TData = any, TValue = any> {
  // Value for the cell. 
  value: TValue;
  // Row node for the given row 
  node: IRowNode<TData> | null;
  // Data associated with the node 
  data: TData | undefined;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef<TData>;
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}

Cell Renderer Components

Cell renderer components can be referenced by string or directly by class. They can be Provided Cell Renderers (that come with the grid) or Custom Cell Renderers (built by you).

Many Renderers One Column

It is also possible to use different renderers for different rows in the same column. To configure this set colDef.cellRendererSelector to a function that returns alternative values for cellRenderer and cellRendererParams.

The params passed to cellRendererSelector are the same as those passed to the Cell Renderer Component. Typically the selector will use this to check the rows contents and choose a renderer accordingly.

The result is an object with component and params to use instead of cellRenderer and cellRendererParams.

This following shows the Selector always returning back a Mood Cell Renderer:

cellRendererSelector: params => {
   return {
       component: GenderCellRenderer,
       params: {values: ['Male', 'Female']}
   };
}

However a selector only makes sense when a selection is made. The following demonstrates selecting between Mood and Gender Cell Renderers:

cellRendererSelector: params => {

   const type = params.data.type;

   if (type === 'gender') {
       return {
           component: GenderCellRenderer,
           params: {values: ['Male', 'Female']}
       };
   }

   if (type === 'mood') {
       return {
           component: MoodCellRenderer
       };
   }

   return undefined;
}

Here is a full example.

  • The column 'Value' holds data of different types as shown in the column 'Type' (numbers/genders/moods).
  • colDef.cellRendererSelector is a function that selects the renderer based on the row data.
  • The column 'Rendered Value' show the data rendered applying the component and params specified by colDef.cellRendererSelector

Provided Cell Renderers

The grid comes with some provided cell renderers out of the box. These cell renderers cover some common complex cell rendering requirements.