JavaScript Data GridCustom Components
javascript 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.

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

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

Registering Custom Components

There are two ways to tell the Grid to use a custom component:

  • Direct reference.
  • By name.

1. Direct Reference

The easiest approach is to refer to the Component class directly.

gridOptions = {

    columnDefs: [
        {
            field: 'country',
            cellRenderer: CountryCellRenderer,
            filter: CountryFilter
        },
    ],

    ...
}

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

2. By Name

A Component is registered with the grid by providing it through the components grid property. The components grid property contains a map of Component Names to Component Classes. Components of all types (editors, renderers, filters etc) are all stored together and must have unique names.

gridOptions = {

    // register the components using 'components' grid property
    components: {
        // 'countryCellRenderer' is mapped to class CountryCellRenderer
        countryCellRenderer: CountryCellRenderer,
        // 'countryFilter' is mapped to class CountryFilter
        countryFilter: CountryFilter
    },

    // then refer to the component by name
    columnDefs: [
        {
            field: 'country',
            cellRenderer: 'countryCellRenderer',
            filter: 'countryFilter'
        },
    ],

    ...
}

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.

Providing Additional Parameters

Each Custom Component gets a set of parameters from the grid. For example, for Cell Renderer 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 gridOptions = {
    columnDefs: [
        { 
            field: 'price',
            cellRenderer: PriceCellRenderer,
            cellRendererParams: {
                currency: 'EUR'
            }
        },
    ],

    // other grid options ...
}

Component Usage

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

ComponentWhereAttribute
Cell RendererColumn DefinitioncellRenderer
cellRendererParams
cellRendererSelector
Cell EditorColumn 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 RendererGrid OptiongroupRowRenderer
groupRowRendererParams
Group Row Inner Cell RendererGrid OptioninnerRenderer
innerRendererParams
Detail Cell RendererGrid OptiondetailCellRenderer
detailCellRendererParams
Full Width Cell RendererGrid OptionfullWidthCellRenderer
fullWidthCellRendererParams
Loading Cell RendererGrid OptionloadingCellRenderer
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

agSetColumnFilterSet filter (default when using AG Grid Enterprise).
agTextColumnFilterSimple text filter (default when using AG Grid Community).
agNumberColumnFilterNumber filter.
agDateColumnFilterDate filter.
agMultiColumnFilterMulti filter.
agGroupColumnFilterGroup column filter.

Floating Filters

agSetColumnFloatingFilterFloating set filter.
agTextColumnFloatingFilterFloating text filter.
agNumberColumnFloatingFilterFloating number filter.
agDateColumnFloatingFilterFloating date filter.
agMultiColumnFloatingFilterFloating multi filter.
agGroupColumnFloatingFilterFloating group column filter.

Cell Renderers

agAnimateShowChangeCellRendererCell renderer that animates value changes.
agAnimateSlideCellRendererCell renderer that animates value changes.
agGroupCellRendererCell renderer for displaying group information.
agLoadingCellRendererCell renderer for loading row when using Enterprise row model.
agCheckboxCellRendererCell renderer that displays a checkbox for boolean values.

Overlays

agLoadingOverlayLoading overlay.
agNoRowsOverlayNo rows overlay.

Cell Editors

agTextCellEditorText cell editor.
agSelectCellEditorSelect cell editor.
agRichSelectCellEditorRich select editor.
agLargeTextCellEditorLarge text cell editor.
agNumberCellEditorNumber cell editor.
agDateCellEditorDate cell editor.
agDateStringCellEditorDate represented as string cell editor.
agCheckboxCellEditorCheckbox cell editor.

Master Detail

agDetailCellRendererDetail panel for master / detail grid.

Column Menu / Context Menu

agMenuItemMenu 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.
  • 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 gridOptions = {
    // Here is where we specify the components to be used instead of the default
    components: {
        agDateInput: CustomDateComponent,
        agColumnHeader: CustomHeaderComponent
    }
};