React Data GridCustom 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 the grid are as follows:

• Cell Component: To customise the contents of a cell.
• Header Component: To customise the header of a column.
• Inner Header Component: To customise the inner header of a column.
• Header Group Component: To customise the header of a column group.
• Inner HeaderGroup Component: To customise the inner header component of a column group.
• Edit Component: To customise the editing of a cell.
• Filter Component: For custom column filter that appears inside the column menu.
• Floating Filter: For custom column floating filter that appears inside the column menu.
• Date Component: To customise the date selection component in the date filter.
• Menu Item Component: To customise the items within grid menus.
• Loading Component: 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

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

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

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

//...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            
        />
  );
};

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} />

//...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 (
        <AgGridReact
            components={components}
            columnDefs={columnDefs}
            ...other properties
        />
    );
};

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.

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:

• agDragAndDropImage: To change the default drag and drop image when dragging grid parts.
• 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 '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...
/>