React Grid: Components

You can create your own custom components to customise the behaviour of the grid. For example you can customise how cells are rendered, how values are edited and also create your own filters.

The full list of component types you can provide in AG Grid are as follows:

• Cell Renderer: To customises the contents of a cell.
• Cell Editor: To customises editing of a cell.
• Date Component: To customise the date selection component in the date filter.
• Filter Component: For custom column filter that appears inside the column menu.
• Floating Filter: For custom column filter that appears inside the column menu.
• Header Component: To customise the header of a column and column groups.
• Loading Cell Renderer: To customise the loading cell row when using Server Side row model.
• Overlay Component: To customise loading and no rows overlay components.
• Status Bar Component: For custom status bar components.
• Tool Panel Component: For custom tool panel components.
• Tooltip Component: For custom cell tooltip components.

The remainder of this page gives information that is common across all the component types.

Registering Custom Components

The pages for each component type (cell renderer, cell editor etc) contain examples on how to register and use each component type. It is however useful here to step back and focus on the component registration process which is common across all component types.

There are two ways to register custom components:

• By name.
• Direct reference.

Both options are fully supported by the grid, however registering by name is AG Grid's preferred option as it's more flexible. All of the examples in the documentation use this approach. The direct reference approach is kept for backwards compatibility as this was the original way to do it in AG Grid.

1. By Name

When registering a React component by name you need to first register the component within the grid frameworkComponents property, then reference the component by name where you want it used (i.e. as a Cell Renderer, Filter etc).

In this example we've registered our CubeComponent React Component and given it a name of cubeComponent (this can be any name you choose). We then specify that we want the previously registered cubeComponent to be used as a Cell Renderer in the Cube column:

//...other imports
import CubeComponent from './CubeComponent';

const GridExample = () => {
  // other properties & methods
  
  frameworkComponents = {
      'cubeComponent': CubeComponent    
  };

   return (
       <div className="ag-theme-alpine">
           <AgGridReact
              frameworkComponents={frameworkComponents}
              ...other properties
           >
               <AgGridColumn headerName="Cube" field="value" cellRenderer="cubeComponent" />
           </AgGridReact>
       </div>
   );
};

2. By Direct Reference

When registering an Angular Component by reference you simply pass the Component to the place you want it used (i.e. Cell Renderer, Filter etc).

In this example we're specifying that we want our CubeComponent React Component as a Cell Renderer in the Cube column:

//...other imports
import CubeComponent from './CubeComponent';

const GridExample = () => {
  // other properties & methods
  
   return (
       <div className="ag-theme-alpine">
           <AgGridReact
              ...other properties            
           >
               <AgGridColumn headerName="Cube" field="value" cellRendererFramework={CubeComponent} />
           </AgGridReact>
       </div>
   );
};

When registering by Direct Reference you do not need to specify it in frameworkComponents, but you lose future flexibility if you decide for example to switch this component out for another.

Advantages of By Name

Registering components by name has the following advantages:

• Implementations can change without having to change all the column definitions. For example, you may have 20 columns using a currency cell renderer. If you want to update the cell renderer to another currency cell renderer, you only need to do it in only place (where the cell renderer is registered) and all columns will pick up the new implementation.
• The part of the grid specifying column definitions is plain JSON. This is helpful for applications that read column definitions from static data. If you referred to the class name directly inside the column definition, it would not be possible to convert the column definition to JSON.

Component Usage

The below table gives an overview of where components can be used. The table shows both options for usage:

• Name / Direct JavaScript: This can be:

  • 1. A component name referring to a registered component (either plain JavaScript or React Component);
  • 2. A direct reference to a JavaScript component.
• Direct React Reference: A direct reference to a React Component.

Mixing JavaScript and React

When providing Custom Components have a choice of the following:

1. Provide an AG Grid component in JavaScript.
2. Provide an AG Grid component as an React Component.

For example if you want to build a cell renderer you have the choice to build the cell renderer using either React or using plain JavaScript.

The following code snippet shows how both JavaScript and React Components can be used at the same time:

//...other imports
import JavascriptComponent from './JavascriptComponent.js';
import ReactComponent from './ReactComponent';

const GridExample = () => {
  // other properties & methods
  
  // JavaScript components are registered here
  components = {
      'javascriptComponent': JavascriptComponent    
  };
  // React components are registered here
  frameworkComponents = {
      'reactComponent': ReactComponent    
  };

   return (
       <div className="ag-theme-alpine">
           <AgGridReact
              components={components}
              frameworkComponents={frameworkComponents}
              ...other properties
           >
               <AgGridColumn headerName="JS Cell" field="value" cellRenderer="javascriptComponent" />
               <AgGridColumn headerName="React Cell" field="value" cellRenderer="reactComponent" />
           </AgGridReact>
       </div>
   );
};

Change the documentation view to JavaScript to see how to create a plain JavaScript component.

Grid Provided Components

The grid comes with pre-registered components that can be used. Each component provided by the grid starts with the namespaces 'ag' to minimise naming conflicts with user provided components. The full list of grid provided components are in the table below.

Overriding Grid Components

It is also possible to override components. Where the grid uses a default value, this means the override component will be used instead. The default components, where overriding makes sense, are as follows:

• agDateInput: To change the default date selection across all filters.
• agColumnHeader: To change the default column header across all columns.
• agColumnGroupHeader: To change the default column group header across all columns.
• agLoadingCellRenderer: To change the default loading cell renderer for Enterprise Row Model.
• agLoadingOverlay: To change the default 'loading' overlay.
• agNoRowsOverlay: To change the default loading 'no rows' overlay.
• agTextCellEditor: To change the default text cell editor.
• agDetailCellRenderer: To change the default detail panel for master / detail grids.