Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

Angular Data Grid: Cell Rendering

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

{ new(): ICellRendererComp; } | ICellRendererFunc | string
A cellRenderer to use for this column.
cellRenderer: { new(): ICellRendererComp; } | ICellRendererFunc | string;

interface ICellRendererFunc {
    (params: ICellRendererParams) : HTMLElement | string

The cell editor 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 either an HTML string or DOM element for display.

The code snippet below demonstrates each of these method types.

    /* other grid options ... */>

this.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 an HTML string or DOM element for display
        field: 'year',
        cellRenderer: params => {
            // put the value in bold
            return 'Value is **' + params.value + '**';

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 (which might be important to you if using Internet Explorer) 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.

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;

interface ValueFormatterFunc {
    (params: ValueFormatterParams) : string

interface ValueFormatterParams {
  // Value for the cell. 
  value: any;
  // Row node for the given row 
  node: RowNode | null;
  // Data associated with the node 
  data: any;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided 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. Typically an application might check the rows contents and choose a renderer accordingly. To configure this set colDef.cellRendererSelector to a function that returns alternative values for cellRenderer, cellRendererFramework and cellRendererSelector.

Properties available on the CellRendererSelectorResult interface.

{ new(): ICellRendererComp; } | ICellRendererFunc | string
Equivalent of setting colDef.cellRenderer
component: { new(): ICellRendererComp; } | ICellRendererFunc | string;

interface ICellRendererComp {
  // Get the cell to refresh. Return true if successful. Return false if not (or you don't have refresh logic),
  // then the grid will refresh the cell for you. 
  refresh(params: ICellRendererParams): boolean;
  // Return the DOM element of your component, this is what the grid puts into the DOM 
  getGui(): HTMLElement;
  // Gets called once by grid when the component is being removed; if your component needs to do any cleanup, do it here 
  destroy?(): void;
  // A hook to perform any necessary operation just after the GUI for this component has been rendered
  // on the screen.
  // If a parent popup is closed and reopened (e.g. for filters), this method is called each time the component is shown.
  // This is useful for any
  // logic that requires attachment before executing, such as putting focus on a particular DOM
  // element. The params has one callback method 'hidePopup', which you can call at any later
  // point to hide the popup - good if you have an 'Apply' button and you want to hide the popup
  // after it is pressed. 
  afterGuiAttached?(params?: IAfterGuiAttachedParams): void;
  // The init(params) method is called on the component once. See below for details on the parameters. 
  init?(params: ICellRendererParams): AgPromise<void> | void;

interface IAfterGuiAttachedParams {
  container?: ContainerType;
  hidePopup?: () => void;
  suppressFocus?: boolean;

type ContainerType = 
    | 'contextMenu' 
    | 'toolPanel' 
    | 'floatingFilter'

interface ICellRendererFunc {
    (params: ICellRendererParams) : HTMLElement | string
Equivalent of setting colDef.cellRendererFramework
Equivalent of setting colDef.cellRendererParams

The following example illustrates how to use different renderers and parameters in the same column. Note that:

  • 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.

    cellRendererSelector: params => {
        const moodDetails = {
            component: 'moodCellRenderer'
        const genderDetails = {
            component: 'genderCellRenderer',
            params: {values: ['Male', 'Female']}
        if ( === 'gender') {
            return genderDetails;
        if ( === 'mood') {
            return moodDetails;
        return undefined;
  • The column 'Rendered Value' show the data rendered applying the component and params specified by colDef.cellRendererSelector

Example: Rendering Order

This example is configured with a custom cell render to make the order of cell rendering clear. Cells are numbered in order of rendering, and rendering function takes 10ms to execute, allowing you to see the process of incremental rendering more clearly. Note the cell values do not correspond to row or cell indexes.

Notice the following in the example below:

  • The grid remains interactive while cells are rendering. For example, you can click on any row to select it while cells are still rendering.
  • In initial rendering and when scrolling down, rows render top to bottom
  • When scrolling up, rows render bottom to top
  • Cells within a row render left to right regardless of scroll direction
  • Only visible cells are rendered. The grid contains 1000 rows and 20,000 cells. If you take about 10 seconds to scroll from the top to the bottom, only a few hundred cells will actually be rendered. Any cells that are scrolled into view and then back out of view again before they have a chance to be rendered will be skipped.

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.