Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

JavaScript Data 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:

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. However it is useful here to step back and focus on the component registration process which is common across all component types and all frameworks (React, Angular etc).

There are two ways to register custom components:

  • By name.
  • Direct reference.

Both options are fully supported by the grid, however the preferred option is by name 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

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'
       },
   ],

   ...
}

2. Direct Reference

A shorter approach is to refer to the component class directly.

gridOptions = {

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

   ...
}

Component Usage

The below table gives an overview of where components can be used.

  • Name / Direct JavaScript: This can be:

      1. A component name referring to a registered JavaScript Component;
      1. A direct reference to a JavaScript Component.
ComponentWhereName / Direct JavaScript
Detail Cell RendererGrid OptiondetailCellRenderer
Full Width Cell RendererGrid OptionfullWidthCellRenderer
Group Row Cell RendererGrid OptiongroupRowRenderer
Group Row Inner Cell RendererGrid OptiongroupRowInnerRenderer
Loading Cell RendererGrid OptionloadingCellRenderer
Loading OverlayGrid OptionloadingOverlayComponent
No Rows OverlayGrid OptionnoRowsOverlayComponent
Date ComponentGrid OptionagDateInput
Status Bar ComponentGrid Option -> Status BarstatusPanel
Cell RendererColumn DefinitioncellRenderer
Pinned Row Cell RendererColumn DefinitionpinnedRowCellRenderer
Cell EditorColumn DefinitioncellEditor
FilterColumn Definitionfilter
Floating FilterColumn DefinitionfloatingFilterComponent
Header ComponentColumn DefinitionheaderComponent
Header Group ComponentColumn DefinitionheaderGroupComponent

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

agDateInput Default date input used by filters.

Column Headers

agColumnHeader Default column header.
agColumnHeaderGroup Default column group header.

Column Filters

agSetColumnFilter Set filter (default when using AG Grid Enterprise).
agTextColumnFilter Simple text filter (default when using AG Grid Community).
agNumberColumnFilter Number filter.
agDateColumnFilter Date filter.

Floating Filters

agSetColumnFloatingFilter Floating set filter.
agTextColumnFloatingFilter Floating text filter.
agNumberColumnFloatingFilter Floating number filter.
agDateColumnFloatingFilter Floating date filter.

Cell Renderers

agAnimateShowChangeCellRenderer Cell renderer that animates value changes.
agAnimateSlideCellRenderer Cell renderer that animates value changes.
agGroupCellRenderer Cell renderer for displaying group information.
agLoadingCellRenderer Cell editor for loading row when using Enterprise row model.

Overlays

agLoadingOverlay Loading overlay.
agNoRowsOverlay No rows overlay.

Cell Editors

agTextCellEditor Text cell editor.
agSelectCellEditor Select cell editor.
agRichSelectCellEditor Rich select editor.
agPopupTextCellEditor Popup text cell editor.
agPopupSelectCellEditor Popup select cell editor.
agLargeTextCellEditor Large text cell editor.

Master Detail

agDetailCellRenderer Detail panel for master / detail grid.

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.