ag-Grid Modules

Version 22.0.0 changes the way ag-Grid is made available by providing functionality in modules, allowing you to pick and choose which features you require, resulting in a smaller application size overall.

Introduction

In previous releases all Community functionality was provided in a single dependency (ag-grid-community) and all Enterprise functionality in another dependency (ag-grid-enterprise).

Since version 22.0.0, ag-Grid can be consumed by just including the feature modules required, which should result in smaller overall application sizes.

The introduction of modules in version 22.0.0 is a significant first step towards reducing the size of ag-Grid inside applications. As most of the new modules cover enterprise features, community users should not expect to see a size reduction right away. However, in the coming releases, we will strive to reduce the size of the community-core module by splitting it out into separate community modules.

Modules

The below table summarizes the modules provided in the ag-Grid Community and ag-Grid Enterprise packages.

Community Module Exported
All Community Modules (!) @ag-grid-community/all-modulesAll Community Modules
Grid Core @ag-grid-community/coreCore Grid Components: GridOptions, ColDef etc
Client Side Row Model @ag-grid-community/client-side-row-modelClientSideRowModelModule
Infinite Row Model @ag-grid-community/infinite-row-modelInfiniteRowModelModule
CSV Export @ag-grid-community/csv-exportCsvExportModule
Framework Module Exported
Angular Support @ag-grid-community/angularAngular Support
React Support @ag-grid-community/reactReact Support
Vue Suport @ag-grid-community/vueVue Support
Polymer Support @ag-grid-community/polymerPolymer Support
Enterprise Module Exported
All Community &
Enterprise Modules (!)
@ag-grid-enterprise/all-modulesAll Community & Enterprise Modules
Enterprise Core @ag-grid-enterprise/coreLicenseManager
Charts @ag-grid-enterprise/chartsChartsModule
Clipboard @ag-grid-enterprise/clipboardClipboardModule
Column Tool Panel @ag-grid-enterprise/column-tool-panelColumnsToolPanelModule
Excel Export @ag-grid-enterprise/excel-exportExcelExportModule
Filter Tool Panel @ag-grid-enterprise/filter-tool-panelFiltersToolPanelModule
Master Detail @ag-grid-enterprise/master-detailMasterDetailModule
Context Menu @ag-grid-enterprise/menuMenuModule
Range Selection @ag-grid-enterprise/range-selectionRangeSelectionModule
Rich Select @ag-grid-enterprise/rich-selectRichSelectModule
Row Grouping @ag-grid-enterprise/row-groupingRowGroupingModule
Server Side Row Model @ag-grid-enterprise/server-side-row-modelServerSideRowModule
Set Filter @ag-grid-enterprise/set-filterSetFilterModule
Side Bar @ag-grid-enterprise/side-barSideBarModule
Status Bar @ag-grid-enterprise/status-barStatusBarModule
Viewport Row Model @ag-grid-enterprise/viewport-row-modelViewportRowModelModule
(!) The framework modules are not included in either @ag-grid-community/all-modules or @ag-grid-enterprise/all-modules. You need to explicitly import the framework module that corresponds to your chosen framework, if using a framework. If you decide to use @ag-grid-enterprise/all-modules then you do not need to specify @ag-grid-community/all-modules too. @ag-grid-enterprise/all-modules will contain all Community modules.

Installing ag-Grid Modules

If you wish to pull in all Community or all Enterprise modules as you did before you can specify the corresponding packages (@ag-grid-community/all-modules and @ag-grid-enterprise/all-modules) and reference them later.

There are two ways to supply modules to the grid - either globally or by individual grid:

Providing Modules Globally

You can import and provide all modules to the Grid globally if you so desire, but you need to ensure that this is done before any Grids are instantiated.

First, import the modules you require:

import {ModuleRegistry, AllCommunityModules} from '@ag-grid-community/all-modules'; // or if using ag-Grid Enterprise import {ModuleRegistry, AllModules} from '@ag-grid-enterprise/all-modules'; // or if choosing individual modules import {ClientSideRowModelModule} from "@ag-grid-community/client-side-row-model";

Then provide these modules to the Grid:

ModuleRegistry.registerModules(AllCommunityModules); // or if using ag-Grid Enterprise ModuleRegistry.registerModules(AllModules); // or if choosing individual modules ModuleRegistry.register(ClientSideRowModelModule);

Providing Modules To Individual Grids

If you choose to select modules based on requirements then at a minimum the a Row Model need to be specified. After that all other modules are optional depending on your requirements.

Regardless of your choice you'll need to do the following:

  1. Specify the Grid Modules you wish to import:
  2. // pull in all community modules "dependencies": { "@ag-grid-community/all-modules": "22.0.0" } // or just specify the minimum you need - in this case we're choosing the Client Side Row Model "dependencies": { "@ag-grid-community/client-side-row-model": "22.0.0" }

    Note that if you specify an Enterprise module you do not need to specify Community module(s) unless you require them. For example if you use the ServerSideRowModelModule then you only need to specify @ag-grid-enterprise/server-side-row-model as a dependency.

  3. Import the module(s) you need
  4. import {AllCommunityModules} from '@ag-grid-community/all-modules'; // or if using ag-Grid Enterprise import {AllModules} from '@ag-grid-enterprise/all-modules'; // or if choosing individual modules import {ClientSideRowModelModule} from "@ag-grid-community/client-side-row-model";
  5. Provide the module(s) to the Grid
  6. // Javascript new Grid(<dom element>, gridOptions, { modules: AllModules}); // or if choosing individual modules new Grid(<dom element>, gridOptions, { modules: [ClientSideRowModelModule]}); // Angular public modules: Module[] = AllModules; // or if choosing individual modules public modules: Module[] = [ClientSideRowModelModule]; <ag-grid-angular> [rowData]="rowData" [columnDefs]="columnDefs" [modules]="modules" </ag-grid-angular> // React <ag-grid-react> rowData={rowData} columnDefs={columnDefs} modules={AllModules} </ag-grid-react> // or if choosing individual modules <ag-grid-react> rowData={rowData} columnDefs={columnDefs} modules={[ClientSideRowModelModule]} </ag-grid-react> // Vue data() { return { columnDefs: ...column defs..., rowData: ....row data..., modules: AllModules } } <ag-grid-vue :columnDefs="columnDefs" :rowData="rowData" :modules="modules"> </ag-grid-vue> // or if choosing individual modules data() { return { columnDefs: ...column defs..., rowData: ....row data..., modules: [ClientSideRowModelModule] } } <ag-grid-vue :columnDefs="columnDefs" :rowData="rowData" :modules="modules"> </ag-grid-vue>

Migrating

This section documents how to migrate from the ag-grid-community and ag-grid-enterprise packages to the new modular based one.

In versions 21.x and before you would have needed to referenced the ag-grid-community and ag-grid-enterprise packages in package.json:

"dependencies": { "ag-grid-community": "21.0.0", "ag-grid-enterprise": "21.0.0" }

And then import the ag-grid-enterprise package if using Enterprise features:

import "ag-grid-enterprise";

For Version 22.x onwards you need to update your package.json to reference the new module base package, depending on the feature set you require (note you no longer need to specify both Community and Enterprise - just the one will do):

"dependencies": { "@ag-grid-community/all-modules": "22.0.0" } // or, if using Enterprise features "dependencies": { "@ag-grid-enterprise/all-modules": "22.0.0" }

You then need to import the modules exported by each package:

import {AllCommunityModules} from "@ag-grid-community/all-modules"; // or, if using Enterprise features import {AllModules} from "@ag-grid-enterprise/all-modules";

You'll now need to supply the modules used to the Grid:

// Javascript new Grid(<dom element>, gridOptions, { modules: AllCommunityModules}); // Angular public modules: Module[] = AllCommunityModules; <ag-grid-angular> [rowData]="rowData" [columnDefs]="columnDefs" [modules]="modules" </ag-grid-angular> // React <ag-grid-react> rowData={rowData} columnDefs={columnDefs} modules={AllCommunityModules} </ag-grid-react> // Vue data() { return { columnDefs: ...column defs..., rowData: ....row data..., modules: AllCommunityModules } } <ag-grid-vue :columnDefs="columnDefs" :rowData="rowData" :modules="modules"> </ag-grid-vue> // -------------------------------- // or, if using Enterprise features // -------------------------------- // Javascript new Grid(<dom element>, gridOptions, { modules: AllModules}); // Angular public modules: Module[] = AllModules; <ag-grid-angular> [rowData]="rowData" [columnDefs]="columnDefs" [modules]="modules" </ag-grid-angular> // React <ag-grid-react> rowData={rowData} columnDefs={columnDefs} modules={AllModules} </ag-grid-react> // Vue data() { return { columnDefs: ...column defs..., rowData: ....row data..., modules: AllModules } } <ag-grid-vue :columnDefs="columnDefs" :rowData="rowData" :modules="modules"> </ag-grid-vue>

Finally, you'll need to update the paths of CSS or SCSS that you reference:

// CSS Community import "./node_modules/@ag-grid-community/all-modules/dist/styles/ag-grid.css"; import "./node_modules/@ag-grid-community/all-modules/dist/styles/ag-theme-balham.css"; // or, if using Enterprise features import "./node_modules/@ag-grid-enterprise/all-modules/dist/styles/ag-grid.css"; import "./node_modules/@ag-grid-enterprise/all-modules/dist/styles/ag-theme-balham.css"; // SCSS Community @import "./node_modules/@ag-grid-community/all-modules/dist/styles/ag-grid.scss"; @import "./node_modules/@ag-grid-community/all-modules/dist/styles/ag-theme-balham/sass/ag-theme-balham.scss"; // or, if using Enterprise features @import "./node_modules/@ag-grid-enterprise/all-modules/dist/styles/ag-grid.scss"; @import "./node_modules/@ag-grid-enterprise/all-modules/dist/styles/ag-theme-balham/sass/ag-theme-balham.scss";