--- title: "AG Grid Modules" framework: angular version: "36.1.0" --- # AG Grid Modules Reduce your application bundle size by cherry-picking grid features using AG Grid modules, generate registration code with the module selector, and validate your setup with the validation module. ## Overview AG Grid Modules allow you to reduce the bundle size of your application by only including the modules you want to use. Use the [Module Selector](#selecting-modules) tool below to select the modules you want to use and generate the correct module registration code. Alternatively, if you are not concerned about bundle size and you want access to every feature in Community / Enterprise, use [Bundles](#bundles) to include all Community / Enterprise modules. ## Bundles The grid provides two module bundles for ease of use: - `AllCommunityModule` bundle contains all of the modules available in AG Grid Community. - `AllEnterpriseModule` bundle contains `AllCommunityModule` and all modules available in AG Grid Enterprise. Registering one of these bundles replicates the behaviour of the package versions of AG Grid prior to version 33: ```js import { ModuleRegistry, AllCommunityModule } from 'ag-grid-community'; // import { AllEnterpriseModule } from 'ag-grid-enterprise'; // Register the module ModuleRegistry.registerModules([ AllCommunityModule, // or AllEnterpriseModule ]); ``` If you are using [Integrated Charts](https://www.ag-grid.com/angular-data-grid/integrated-charts/) or [Sparklines](https://www.ag-grid.com/angular-data-grid/sparklines-overview/), then you need to provide the relevant module from AG Charts to `AllEnterpriseModule`, for example: ```js import { AgChartsEnterpriseModule } from 'ag-charts-enterprise'; import { ModuleRegistry } from 'ag-grid-community'; import { AllEnterpriseModule } from 'ag-grid-enterprise'; // All Enterprise Features, with Integrated Charts and Sparklines ModuleRegistry.registerModules([ AllEnterpriseModule.with(AgChartsEnterpriseModule), ]); ``` ## Selecting Modules To work out which modules are required, select the features of the grid that you are using below. This will then provide the relevant registration code. [Select modules interactively](https://www.ag-grid.com/angular-data-grid/modules/#selecting-modules) to generate the registration code, or work from the full module list below. | Feature | Module | Enterprise | | --- | --- | --- | | [Validation (Dev Mode)](https://www.ag-grid.com/angular-data-grid/modules/#development-validations) | `ValidationModule` | | | [Column Auto-Sizing](https://www.ag-grid.com/angular-data-grid/column-sizing/#auto-sizing-columns) | `ColumnAutoSizeModule` | | | [Column Hover](https://www.ag-grid.com/angular-data-grid/grid-api/#reference-colHover-isColumnHovered) | `ColumnHoverModule` | | | [Auto-Generate Columns](https://www.ag-grid.com/angular-data-grid/auto-generate-columns/) | `AutoGenerateColumnsModule` | | | [File Input Overlay](https://www.ag-grid.com/angular-data-grid/auto-generate-columns/#file-drop-overlay) | `FileInputOverlayModule` | | | [Calculated Columns](https://www.ag-grid.com/angular-data-grid/calculated-columns/) | `CalculatedColumnsModule` | Enterprise | | [Editable Header Name](https://www.ag-grid.com/angular-data-grid/column-headers/#editable-header-name) | `ColumnHeaderEditModule` | Enterprise | | [Row Pinning](https://www.ag-grid.com/angular-data-grid/row-pinning/) | `PinnedRowModule` | | | [Auto Row Height](https://www.ag-grid.com/angular-data-grid/row-height/#auto-row-height) | `RowAutoHeightModule` | | | [Styling Rows](https://www.ag-grid.com/angular-data-grid/row-styles/) | `RowStyleModule` | | | [Row Pagination](https://www.ag-grid.com/angular-data-grid/row-pagination/) | `PaginationModule` | | | [Page Number Navigation](https://www.ag-grid.com/angular-data-grid/row-pagination/#page-number-navigation) | `PaginationPageNumbersModule` | | | [Row Dragging](https://www.ag-grid.com/angular-data-grid/row-dragging/) | `RowDragModule` | | | [Row Numbers](https://www.ag-grid.com/angular-data-grid/row-numbers/) | `RowNumbersModule` | Enterprise | | [Cell Span](https://www.ag-grid.com/angular-data-grid/row-spanning/) | `CellSpanModule` | | | [Styling Cells](https://www.ag-grid.com/angular-data-grid/cell-styles/) | `CellStyleModule` | | | [Highlighting Changes](https://www.ag-grid.com/angular-data-grid/change-cell-renderers/) | `HighlightChangesModule` | | | [Tooltips](https://www.ag-grid.com/angular-data-grid/tooltips/) | `TooltipModule` | | | [Formulas](https://www.ag-grid.com/angular-data-grid/formulas/) | `FormulaModule` | Enterprise | | [Find](https://www.ag-grid.com/angular-data-grid/find/) | `FindModule` | Enterprise | | [Notes](https://www.ag-grid.com/angular-data-grid/notes/) | `NotesModule` | Enterprise | | [Text Filter](https://www.ag-grid.com/angular-data-grid/filter-text/) | `TextFilterModule` | | | [Number Filter](https://www.ag-grid.com/angular-data-grid/filter-number/) | `NumberFilterModule` | | | [Date Filter](https://www.ag-grid.com/angular-data-grid/filter-date/) | `DateFilterModule` | | | [BigInt Filter](https://www.ag-grid.com/angular-data-grid/filter-bigint/) | `BigIntFilterModule` | | | [Set Filter](https://www.ag-grid.com/angular-data-grid/filter-set/) | `SetFilterModule` | Enterprise | | [Multi Filter](https://www.ag-grid.com/angular-data-grid/filter-multi/) | `MultiFilterModule` | Enterprise | | [Custom Column Filters](https://www.ag-grid.com/angular-data-grid/component-filter/) | `CustomFilterModule` | | | [Advanced Filter](https://www.ag-grid.com/angular-data-grid/filter-advanced/) | `AdvancedFilterModule` | Enterprise | | [External Filter](https://www.ag-grid.com/angular-data-grid/filter-external/) | `ExternalFilterModule` | | | [Quick Filter](https://www.ag-grid.com/angular-data-grid/filter-quick/) | `QuickFilterModule` | | | [Row Selection](https://www.ag-grid.com/angular-data-grid/row-selection/) | `RowSelectionModule` | | | [Cell Selection](https://www.ag-grid.com/angular-data-grid/cell-selection/) | `CellSelectionModule` | Enterprise | | [Text Editor](https://www.ag-grid.com/angular-data-grid/provided-cell-editors-text/) | `TextEditorModule` | | | [Large Text Editor](https://www.ag-grid.com/angular-data-grid/provided-cell-editors-large-text/) | `LargeTextEditorModule` | | | [Select Editor](https://www.ag-grid.com/angular-data-grid/provided-cell-editors-select/) | `SelectEditorModule` | | | [Rich Select Editor](https://www.ag-grid.com/angular-data-grid/provided-cell-editors-rich-select/) | `RichSelectModule` | Enterprise | | [Number Editor](https://www.ag-grid.com/angular-data-grid/provided-cell-editors-number/) | `NumberEditorModule` | | | [Date Editor](https://www.ag-grid.com/angular-data-grid/provided-cell-editors-date/) | `DateEditorModule` | | | [Checkbox Editor](https://www.ag-grid.com/angular-data-grid/provided-cell-editors-checkbox/) | `CheckboxEditorModule` | | | [Custom Cell Editor Components](https://www.ag-grid.com/angular-data-grid/cell-editors/#custom-components) | `CustomEditorModule` | | | [Undo / Redo Edits](https://www.ag-grid.com/angular-data-grid/undo-redo-edits/) | `UndoRedoEditModule` | | | [Batch Edit](https://www.ag-grid.com/angular-data-grid/cell-batch-edit/) | `BatchEditModule` | Enterprise | | [Localisation](https://www.ag-grid.com/angular-data-grid/localisation/) | `LocaleModule` | | | [Row Grouping](https://www.ag-grid.com/angular-data-grid/grouping/) | `RowGroupingModule` | Enterprise | | [Row Grouping Panel](https://www.ag-grid.com/angular-data-grid/grouping-group-panel/) | `RowGroupingPanelModule` | Enterprise | | [Group Filter](https://www.ag-grid.com/angular-data-grid/grouping-single-group-column/#inherit-row-grouped-columns-filters) | `GroupFilterModule` | Enterprise | | [Editing and Updating Group Row Cells](https://www.ag-grid.com/angular-data-grid/grouping-edit/) | `RowGroupingEditModule` | Enterprise | | [Pivoting](https://www.ag-grid.com/angular-data-grid/pivoting/) | `PivotModule` | Enterprise | | [Tree Data](https://www.ag-grid.com/angular-data-grid/tree-data/) | `TreeDataModule` | Enterprise | | [Show Values As](https://www.ag-grid.com/angular-data-grid/aggregation-show-values-as/) | `ShowValuesAsModule` | Enterprise | | [Master Detail](https://www.ag-grid.com/angular-data-grid/master-detail/) | `MasterDetailModule` | Enterprise | | [Side Bar](https://www.ag-grid.com/angular-data-grid/side-bar/) | `SideBarModule` | Enterprise | | [Columns Tool Panel](https://www.ag-grid.com/angular-data-grid/tool-panel-columns/) | `ColumnsToolPanelModule` | Enterprise | | [Filters Tool Panel](https://www.ag-grid.com/angular-data-grid/tool-panel-filters/) | `FiltersToolPanelModule` | Enterprise | | [New Filters Tool Panel](https://www.ag-grid.com/angular-data-grid/tool-panel-filters-new/) | `NewFiltersToolPanelModule` | Enterprise | | [Column Menu](https://www.ag-grid.com/angular-data-grid/column-menu/) | `ColumnMenuModule` | Enterprise | | [Context Menu](https://www.ag-grid.com/angular-data-grid/context-menu/) | `ContextMenuModule` | Enterprise | | [Status Bar](https://www.ag-grid.com/angular-data-grid/status-bar/) | `StatusBarModule` | Enterprise | | [Toolbar](https://www.ag-grid.com/angular-data-grid/toolbar/) | `ToolbarModule` | Enterprise | | [AI Toolkit](https://www.ag-grid.com/angular-data-grid/ai-toolkit/) | `AiToolkitModule` | Enterprise | | [CSV Export](https://www.ag-grid.com/angular-data-grid/csv-export/) | `CsvExportModule` | | | [Excel Export](https://www.ag-grid.com/angular-data-grid/excel-export/) | `ExcelExportModule` | Enterprise | | [Clipboard](https://www.ag-grid.com/angular-data-grid/clipboard/) | `ClipboardModule` | Enterprise | | [Drag & Drop](https://www.ag-grid.com/angular-data-grid/drag-and-drop/) | `DragAndDropModule` | | | [Value Cache](https://www.ag-grid.com/angular-data-grid/value-cache/) | `ValueCacheModule` | | | [Aligned Grids](https://www.ag-grid.com/angular-data-grid/aligned-grids/) | `AlignedGridsModule` | | | [Grid State](https://www.ag-grid.com/angular-data-grid/grid-state/) | `GridStateModule` | | | [Column API](https://www.ag-grid.com/angular-data-grid/grid-api/#reference-columns) | `ColumnApiModule` | | | [Row API](https://www.ag-grid.com/angular-data-grid/grid-api/#reference-displayedRows) | `RowApiModule` | | | [Cell API](https://www.ag-grid.com/angular-data-grid/grid-api/#reference-miscellaneous-getCellValue) | `CellApiModule` | | | [Scrolling API](https://www.ag-grid.com/angular-data-grid/grid-api/#reference-scrolling) | `ScrollApiModule` | | | [Rendering API](https://www.ag-grid.com/angular-data-grid/grid-api/#reference-rendering) | `RenderApiModule` | | | [Event API](https://www.ag-grid.com/angular-data-grid/grid-api/#reference-events) | `EventApiModule` | | | [Client-Side Row Model API](https://www.ag-grid.com/angular-data-grid/grid-api/#reference-data) | `ClientSideRowModelApiModule` | | | [Server-Side Row Model API](https://www.ag-grid.com/angular-data-grid/grid-api/#reference-serverSideRowModel) | `ServerSideRowModelApiModule` | Enterprise | The code snippet above shows registering modules globally. It is also possible to [Provide Modules To Individual Grids](#providing-modules-to-individual-grids) ## Development Validations Development-time validations help identify misconfiguration early: full-text console messages, an on-grid overlay of captured problems (shown by default), and options to throw on problems or suppress ones you have accepted. They are not part of the `AllCommunityModule`/`AllEnterpriseModule` bundles, so enable them yourself — and we recommend doing so only in development builds to keep production bundles small. Call `enableDevValidations` once, before any grid is created: ```js import { enableDevValidations } from 'ag-grid-community'; if (process.env.NODE_ENV !== 'production') { enableDevValidations(); } ``` This is equivalent to registering the underlying module directly, for example `ModuleRegistry.registerModules([ValidationModule])`. Without development validations enabled, console messages are reduced to an error code and a documentation link instead of the full message text. See [Development Validation](https://www.ag-grid.com/angular-data-grid/dev-validation/) for the overlay, throwing, and suppression options. ## Registering AG Grid Modules When including AG Grid in your application the required modules must be registered with the grid before it is instantiated. You can either register them globally, via the `ModuleRegistry` or pass them directly to each grid. ### Providing Modules Globally You can import and register modules globally, but you need to ensure that this is done before ***any*** grids are instantiated. Any modules registered globally will be available to all grids. As an example to use the `Client-Side Row Model` (the default row model) together with the `CSV`, `Excel` and `Master/Detail` features, you would do the following: ```js import { ModuleRegistry, ClientSideRowModelModule, CsvExportModule } from 'ag-grid-community'; import { ExcelExportModule, MasterDetailModule } from 'ag-grid-enterprise'; ModuleRegistry.registerModules([ ClientSideRowModelModule, CsvExportModule, ExcelExportModule, MasterDetailModule ]); ``` ### Providing Modules To Individual Grids Modules can be registered directly with individual grids. Modules registered directly with a grid will *only* be available to that grid. When a grid is instantiated it uses both globally and individually registered modules. Individually registering modules is most useful when you have multiple grids in your application with varying feature requirements. It may also lead to smaller bundle sizes if your application uses lazy loading / code splitting. The steps required are: - Import Modules - Pass to Grid Using the same example from above (the `Client-Side Row Model` together with the `CSV`, `Excel` and `Master/Detail` features), how we register the modules is now different. ```js import { Component } from '@angular/core'; import { AgGridAngular } from 'ag-grid-angular' import type { Module } from 'ag-grid-community'; import { ClientSideRowModelModule, CsvExportModule } from 'ag-grid-community'; import { ExcelExportModule, MasterDetailModule } from 'ag-grid-enterprise'; @Component({ selector: 'grid-example', standalone: true, imports: [AgGridAngular], template: ` />` }) export class GridExample { modules: Module[] = [ ClientSideRowModelModule, CsvExportModule, ExcelExportModule, MasterDetailModule ]; // ... rest of component ... } ``` The following example shows how you can configure individual grids using a combination of shared modules as well as individual grid module registration. Note the following: - Globally registered modules: `[ClientSideRowModelModule, ColumnMenuModule, ContextMenuModule]`. - Left Grid individually registers: `[ClipboardModule, CsvExportModule, SetFilterModule]` - Right Grid individually registers: `[CsvExportModule, ExcelExportModule, NumberFilterModule, TextFilterModule]` To see the difference in features open the context menu and open the column filter: - The left grid has options for clipboard and CSV export. - The right grid has options for CSV and Excel export. - The left grid uses the Set Filter while the right grid uses the Text Filter or Number Filter depending on the cell data type. #### Grids with Individual Registration ```ts import { Component } from "@angular/core"; import { AgGridAngular } from "ag-grid-angular"; import type { AgModuleName, ColDef, GridReadyEvent } from "ag-grid-community"; import { ClientSideRowModelModule, CsvExportModule, ModuleRegistry, NumberFilterModule, TextFilterModule, enableDevValidations, } from "ag-grid-community"; import { ClipboardModule, ColumnMenuModule, ContextMenuModule, ExcelExportModule, SetFilterModule, } from "ag-grid-enterprise"; import "./styles.css"; const sharedModules = [ ClientSideRowModelModule, ColumnMenuModule, ContextMenuModule, ]; const leftModules = [SetFilterModule, ClipboardModule, CsvExportModule]; const rightModules = [ TextFilterModule, NumberFilterModule, CsvExportModule, ExcelExportModule, ]; // Register shared Modules globally // Enable extended validations only for development if (process.env.NODE_ENV !== "production") { enableDevValidations(); } ModuleRegistry.registerModules(sharedModules); @Component({ selector: "my-app", standalone: true, imports: [AgGridAngular], template: `
`, }) export class AppComponent { leftModules = leftModules; rightModules = rightModules; leftRowData: any[] = []; rightRowData: any[] = []; defaultColDef: ColDef = { flex: 1, minWidth: 100, filter: true, floatingFilter: true, }; columns: ColDef[] = [ { field: "id" }, { field: "color" }, { field: "value1" }, ]; constructor() { this.leftRowData = createRowBlock(); this.rightRowData = createRowBlock(); } onGridReady(event: GridReadyEvent) { const api = event.api; const moduleNames: AgModuleName[] = [ "ClipboardModule", "ClientSideRowModelModule", "ColumnMenuModule", "ContextMenuModule", "CsvExportModule", "ExcelExportModule", "NumberFilterModule", "SetFilterModule", "TextFilterModule", "IntegratedChartsModule", // Not registered in this example ]; const registered = moduleNames.filter((name) => api.isModuleRegistered(name), ); console.log(api.getGridId(), "registered:", registered.join(", ")); } } let rowIdSequence = 100; const createRowBlock = () => ["Red", "Green", "Blue"].map((color) => ({ id: rowIdSequence++, color: color, value1: Math.floor(window.agRandom() * 100), })); ``` [Live example: Grids with Individual Registration](https://www.ag-grid.com/examples/modules/individual-registration/angular) ### Is Module Registered To check if a specific module has been registered with a grid instance use the `api.isModuleRegistered(moduleName)` method. ```js // Check if the SetFilter module is registered const isRegistered = api.isModuleRegistered('SetFilterModule'); ``` | Property | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | `isModuleRegistered` | `Function` | | | Check if a Module is registered with the current grid instance via its equivalent string name. | ## Angular CLI Builders The Angular CLI supports multiple builders as outlined in ([Building Angular apps](https://angular.dev/tools/cli/build)). It is recommended to compare the bundle size produced by each of the builders as the results can vary depending on the application.