React Data GridCustom Components

react logo

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.

React Custom Components thumbnail

The full list of component types you can provide in the grid are as follows:

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

Registering Custom Components

For all custom components, you should enable the grid option reactiveCustomComponents. This provides the simplest way to set up custom components when using Hooks.

If your custom component was built in an imperative way instead of setting the reactiveCustomComponents option, it needs to be rebuilt to take advantage of the new features that reactiveCustomComponents offers. Using custom components built in an imperative way is now deprecated, and in AG Grid v32 the reactiveCustomComponents option will be true by default. See Migrating to Use reactiveCustomComponents.

There are two ways to register custom components:

  • Direct reference.
  • By name.

1. By Direct Reference

When registering a React 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 React CubeComponent as a Cell Renderer in the Cube column:

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

const GridExample = () => {
  // other properties & methods
  
   const columnDefs = useMemo( () => [{field: 'value', cellRenderer: CubeComponent}], []);

   return (
        <AgGridReact
           columnDefs={columnDefs}
           ...other properties            
        />
   );
};

The advantage of referencing Components directly is cleaner code, without the extra level of indirection added when referencing by name.

2. By Name

When registering a React component by name you need to first register the component within the grid components 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 React CubeComponent 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
  
  const components = useMemo(() => ({
      cubeComponent: CubeComponent    
  }), []);

  const columnDefs = useMemo(() => [{field: 'value', cellRenderer: 'cubeComponent'}], []);

  return (
        <AgGridReact
           components={components}
           columnDefs={columnDefs}
           ...other properties            
        />
  );
};

The advantage of referencing components by name is definitions (eg Column Definitions) can be composed of simple types (ie JSON), which is useful should you wish to persist Column Definitions.

A React Component in this context can be any valid React Component - A Class Based Component, a Hook or even an inline Functional Component. The same rules apply regardless of the type of component used.

Providing Additional Parameters

Each Custom Component gets a set of parameters from the grid. For example, for Cell Component the grid provides, among other things, the value to be rendered. You can provide additional properties to the Custom Component (e.g. what currency symbol to use) by providing additional parameters specific to your application.

To provide additional parameters, use the property [prop-name]Params, e.g. cellRendererParams.

const [columnDefs, setColumnDefs] = useState([
    { 
        field: 'price',
        cellRenderer: PriceCellRenderer,
        cellRendererParams: {
            currency: 'EUR'
        }
    },
]);

<AgGridReact columnDefs={columnDefs} />

Mixing JavaScript and React

When providing Custom Components you have a choice of the following:

  1. Provide an AG Grid component as a React Component.
  2. Provide an AG Grid component in JavaScript (JavaScript Class Components only, not JavaScript Functional Components).

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 = () => {
  // JS and React components, only need register if looking up by name
  const components = useMemo(() => ({
      'javascriptComponent': JavascriptComponent,
      'reactComponent': ReactComponent    
  }), []);

  const columnDefs = useMemo( () => [
      {
          headerName: "JS Cell",
          field: "value",
          cellRenderer: 'javascriptComponent', // JS comp by Name
      },
      {
          headerName: "JS Cell",
          field: "value",
          cellRenderer: JavascriptComponent, // JS comp by Direct Reference
      },
      {
          headerName: "React Cell",
          field: "value",
          cellRenderer: 'reactComponent', // React comp by Name
      },
      {
          headerName: "React Cell",
          field: "value",
          cellRenderer: ReactComponent, // React comp by Direct Reference
      }
  ], []);

   return (
       <div className="ag-theme-quartz">
           <AgGridReact
              components={components}
              columnDefs={columnDefs}
              ...other properties
           />
       </div>
   );
};

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

Higher Order Components

If you use connect to use Redux, or if you're using a Higher Order Component (HOC) to wrap the grid React component, you'll also need to ensure the grid can get access to the newly created component. To do this you need to ensure forwardRef is set:

export default connect((state) => {
   return {
       currencySymbol: state.currencySymbol,
       exchangeRate: state.exchangeRate
   }
}, null, null, { forwardRef: true } // must be supplied for react/redux when using AgGridReact
)(PriceRenderer);

Component Usage

The below table gives a summary of the components, where they are configured and using what attribute.

ComponentWhereAttribute
Cell ComponentColumn DefinitioncellRenderer
cellRendererParams
cellRendererSelector
Editor ComponentColumn DefinitioncellEditor
cellEditorParams
cellEditorSelector
FilterColumn Definitionfilter
filterParams
Floating FilterColumn DefinitionfloatingFilter
floatingFilterParams
Header ComponentColumn DefinitionheaderComponent
headerComponentParams
Header Group ComponentColumn DefinitionheaderGroupComponent
headerGroupComponentParams
Tooltip ComponentColumn DefinitiontooltipComponent
tooltipComponentParams
Group Row Cell ComponentGrid OptiongroupRowRenderer
groupRowRendererParams
Group Row Inner Cell ComponentGrid OptioninnerRenderer
innerRendererParams
Detail Cell ComponentGrid OptiondetailCellRenderer
detailCellRendererParams
Full Width Cell ComponentGrid OptionfullWidthCellRenderer
fullWidthCellRendererParams
Loading Cell ComponentGrid Option
Column Definition
loadingCellRenderer
loadingCellRendererParams
Loading OverlayGrid OptionloadingOverlayComponent
loadingOverlayComponentParams
No Rows OverlayGrid OptionnoRowsOverlayComponent
noRowsOverlayComponentParams
Date ComponentGrid OptiondateComponent
dateComponentParams
Status Bar ComponentGrid Option -> Status BarstatusPanel
statusPanelParams
Tool PanelGrid Option -> Side BartoolPanel
toolPanelParams
Menu ItemGrid Option -> MenumenuItem
menuItemParams

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.

Date Inputs
agDateInputDefault date input used by filters
Column Headers
agColumnHeaderDefault column header
agColumnHeaderGroupDefault column group header
Column Filters
agSetColumnFilter (e)Set filter (default when using AG Grid Enterprise)
agTextColumnFilterSimple text filter (default when using AG Grid Community)
agNumberColumnFilterNumber filter
agDateColumnFilterDate filter
agMultiColumnFilter (e)Multi filter
agGroupColumnFilter (e)Group column filter
Floating Filters
agSetColumnFloatingFilter (e)Floating set filter
agTextColumnFloatingFilterFloating text filter
agNumberColumnFloatingFilterFloating number filter
agDateColumnFloatingFilterFloating date filter
agMultiColumnFloatingFilter (e)Floating multi filter
agGroupColumnFloatingFilter (e)Floating group column filter
Cell Components
agAnimateShowChangeCellRendererCell Component that animates value changes
agAnimateSlideCellRendererCell Component that animates value changes
agGroupCellRendererCell Component for displaying group information
agLoadingCellRenderer (e)Cell Component for loading row when using Enterprise row model
agSkeletonCellRenderer (e)Cell Component for displaying skeleton cells
agCheckboxCellRendererCell Component that displays a checkbox for boolean values
Overlays
agLoadingOverlayLoading overlay
agNoRowsOverlayNo rows overlay
Cell Editors
agTextCellEditorText cell editor
agSelectCellEditorSelect cell editor
agRichSelectCellEditor (e)Rich select editor
agLargeTextCellEditorLarge text cell editor
agNumberCellEditorNumber cell editor
agDateCellEditorDate cell editor
agDateStringCellEditorDate represented as string cell editor
agCheckboxCellEditorCheckbox cell editor
Master Detail
agDetailCellRenderer (e)Detail panel for master / detail grid
Column Menu / Context Menu
agMenuItem (e)Menu item within column or context menu

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.
  • agSkeletonCellRenderer: To change the default skeleton loading cell renderer for Enterprise Row Model.
  • agLoadingOverlay: To change the default 'loading' overlay.
  • agNoRowsOverlay: To change the default loading 'no rows' overlay.
  • agCellEditor: To change the default cell editor.
  • agDetailCellRenderer: To change the default detail panel for master / detail grids.
  • agMenuItem: To change the default menu item for column and context menus.

To override the default component, register the custom component in the GridOptions components property under the above name.

const components = useMemo(() => (
   { agDateInput: CustomDateComponent,
     agColumnHeader: CustomHeaderComponent 
   }), []);

<AgGridReact
   components={components}
   ...other properties...
/>