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.
There are two ways to register custom components:
When registering an Angular 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 Angular CubeComponent
as a Cell Renderer in the Cube
column:
//...other imports
import { Component } from '@angular/core';
import { CubeComponent } from './cube.component';
@Component({
selector: 'app-root',
template: `
<ag-grid-angular [columnDefs]="columnDefs"
...other properties>
</ag-grid-angular>
`
})
export class AppComponent {
columnDefs: [
{
field: "cube",
cellRenderer: CubeComponent,
}
]
//...other properties & methods
}
The advantage of referencing Components directly is cleaner code, without the extra level of indirection added when referencing by name.
When registering an Angular 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 Angular 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 { Component } from '@angular/core';
import { CubeComponent } from './cube.component';
@Component({
selector: 'app-root',
template: `
<ag-grid-angular [columnDefs]="columnDefs" [components]="components"
...other properties>
</ag-grid-angular>
`
})
export class AppComponent {
components = {
'cubeComponent': CubeComponent
};
columnDefs = [
{
field: "cube",
cellRenderer: 'cubeComponent',
}
]
//...other properties & methods
}
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
.
<ag-grid-angular
[columnDefs]="columnDefs"
/* other grid options ... */>
</ag-grid-angular>
this.columnDefs = [
{
field: 'price',
cellRenderer: PriceCellRenderer,
cellRendererParams: {
currency: 'EUR'
}
},
];
Each custom Angular component must implement the agInit(params)
lifecyle hook. AgInit is called by AG Grid before any of the Angular Lifecyle hooks, including ngOnInit
. This order is deterministic and applies to all component types.
When providing Custom Components you have a choice of the following:
The following code snippet shows how both JavaScript and Angular Components can be used at the same time:
//...other imports
import { Component } from '@angular/core';
import JavascriptComponent from './JavascriptComponent.js';
import { AngularComponent } from './angular.component';
@Component({
selector: 'app-root',
template: `
<ag-grid-angular [columnDefs]="columnDefs" [components]="components"
...other properties>
</ag-grid-angular>
`
})
export class AppComponent {
// JS and Angular components, only need register if looking up by name
components = {
'javascriptComponent': JavascriptComponent,
'angularComponent': AngularComponent
};
columnDefs = [
{
headerName: "JS Cell",
field: "value",
cellRenderer: 'javascriptComponent', // JS comp by Name
},
{
headerName: "JS Cell",
field: "value",
cellRenderer: JavascriptComponent, // JS comp by Direct Reference
},
{
headerName: "Angular Cell",
field: "value",
cellRenderer: 'angularComponent', // Angular comp by Name
},
{
headerName: "Angular Cell",
field: "value",
cellRenderer: AngularComponent, // Angular comp by Direct Reference
}
];
//...other properties & methods
}
Change the documentation view to JavaScript to see how to create a plain JavaScript component.
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. |
agMultiColumnFilter | Multi filter. |
agGroupColumnFilter | Group column filter. |
Floating Filters | |
agSetColumnFloatingFilter | Floating set filter. |
agTextColumnFloatingFilter | Floating text filter. |
agNumberColumnFloatingFilter | Floating number filter. |
agDateColumnFloatingFilter | Floating date filter. |
agMultiColumnFloatingFilter | Floating multi filter. |
agGroupColumnFloatingFilter | Floating group column 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. |
agCheckboxCellRenderer | Cell renderer that displays a checkbox for boolean values. |
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. |
agNumberCellEditor | Number cell editor. |
agDateCellEditor | Date cell editor. |
agDateStringCellEditor | Date represented as string cell editor. |
agCheckboxCellEditor | Checkbox 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:
To override the default component, register the custom component in the GridOptions components
property under the above name.
@Component({
selector: 'my-app',
template: `
<ag-grid-angular
class="ag-theme-alpine"
[components]="components"
...other properties...
></ag-grid-angular>
`
})
export class AppComponent {
// Here is where we specify the components to be used instead of the default
public components = {
agDateInput: CustomDateComponent,
agColumnHeader: CustomHeaderComponent
};