JavaScript Data GridComponents
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 customise the contents of a cell.
- Cell Editor: To customise the 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 floating 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.
There are two ways to tell the Grid to use a custom component:
- Direct reference.
- By name.
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.
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.
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 ...
}The below table gives a summary of the components, where they are configured and using what attribute.
| Component | Where | Attribute |
|---|---|---|
| Cell Renderer | Column Definition | cellRenderer cellRendererParams cellRendererSelector |
| Cell Editor | Column Definition | cellEditor cellEditorParams cellEditorSelector |
| Filter | Column Definition | filter filterParams |
| Floating Filter | Column Definition | floatingFilter floatingFilterParams |
| Header Component | Column Definition | headerComponent headerComponentParams |
| Header Group Component | Column Definition | headerGroupComponent headerGroupComponentParams |
| Tooltip Component | Column Definition | tooltipComponent tooltipComponentParams |
| Group Row Cell Renderer | Grid Option | groupRowRenderer groupRowRendererParams |
| Group Row Inner Cell Renderer | Grid Option | innerRenderer innerRendererParams |
| Detail Cell Renderer | Grid Option | detailCellRenderer detailCellRendererParams |
| Full Width Cell Renderer | Grid Option | fullWidthCellRenderer fullWidthCellRendererParams |
| Loading Cell Renderer | Grid Option | loadingCellRenderer loadingCellRendererParams |
| Loading Overlay | Grid Option | loadingOverlayComponent loadingOverlayComponentParams |
| No Rows Overlay | Grid Option | noRowsOverlayComponent noRowsOverlayComponentParams |
| Date Component | Grid Option | dateComponent dateComponentParams |
| Status Bar Component | Grid Option -> Status Bar | statusPanel statusPanelParams |
| Tool Panel | Grid Option -> Side Bar | toolPanel toolPanelParams |
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 renderer 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. |
| agLargeTextCellEditor | Large text cell editor. |
Master Detail |
|
| agDetailCellRenderer |
Detail panel for master / detail grid. |
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.
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
}
};