Angular 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.

Registering Custom Components

There are two ways to register custom components:

Direct reference.
By name.

1. By Direct Reference

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.

2. 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.

Example: Registering Components

View Engine: Declaring Custom Components

If you are using our legacy packages for compatibility and not using Ivy you need an additional step to register your custom components.

If you are using Angular v10-11 and have Ivy disabled via enableIvy: false then you must declare your custom components with the AgGridModule via the withComponents method. This enables AG Grid to be able to use your Angular components by adding them as entryComponents for you. You need to provide them in the top level NgModule:

@NgModule({
    imports: [
        BrowserModule,
        AgGridModule.withComponents(
            [
                SquareComponent,      // Components to be used within the Grid
                CubeComponent,
                // ...other components
            ]
        ),
    ]
})

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.

<ag-grid-angular
    [columnDefs]="columnDefs"
    /* other grid options ... */>
</ag-grid-angular>

this.columnDefs = [
    { 
        field: 'price',
        cellRenderer: PriceCellRenderer,
        cellRendererParams: {
            currency: 'EUR'
        }
    },
];

Component Lifecyle Hook agInit

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.

Mixing JavaScript and Angular

When providing Custom Components you have a choice of the following:

Provide an AG Grid component as an Angular Component.
Provide an AG Grid component in JavaScript.

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.

Component Usage

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

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 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.

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.

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

Registering Custom Components

1. By Direct Reference

2. By Name

View Engine: Declaring Custom Components

Providing Additional Parameters

Component Lifecyle Hook agInit

Mixing JavaScript and Angular

Component Usage

Grid Provided Components

Date Inputs

Column Headers

Column Filters

Floating Filters

Cell Renderers

Overlays

Cell Editors

Master Detail

Overriding Grid Components