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-modules	All Community Modules
Grid Core	@ag-grid-community/core	Core Grid Components: GridOptions, ColDef etc
Client Side Row Model	@ag-grid-community/client-side-row-model	ClientSideRowModelModule
Infinite Row Model	@ag-grid-community/infinite-row-model	InfiniteRowModelModule
CSV Export	@ag-grid-community/csv-export	CsvExportModule
	Enterprise Module	Exported
All Community & Enterprise Modules ^(!)	@ag-grid-enterprise/all-modules	All Community & Enterprise Modules
Enterprise Core	@ag-grid-enterprise/core	LicenseManager
Charts	@ag-grid-enterprise/charts	ChartsModule
Clipboard	@ag-grid-enterprise/clipboard	ClipboardModule
Column Tool Panel	@ag-grid-enterprise/column-tool-panel	ColumnsToolPanelModule
Excel Export	@ag-grid-enterprise/excel-export	ExcelExportModule
Filter Tool Panel	@ag-grid-enterprise/filter-tool-panel	FiltersToolPanelModule
Master Detail	@ag-grid-enterprise/master-detail	MasterDetailModule
Context Menu	@ag-grid-enterprise/menu	MenuModule
Range Selection	@ag-grid-enterprise/range-selection	RangeSelectionModule
Rich Select	@ag-grid-enterprise/rich-select	RichSelectModule
Row Grouping	@ag-grid-enterprise/row-grouping	RowGroupingModule
Server Side Row Model	@ag-grid-enterprise/server-side-row-model	ServerSideRowModule
Set Filter	@ag-grid-enterprise/set-filter	ServerSideRowModule
Side Bar	@ag-grid-enterprise/side-bar	SideBarModule
Status Bar	@ag-grid-enterprise/status-bar	StatusBarModule
Viewport Row Model	@ag-grid-enterprise/viewport-row-model	ViewportRowModelModule

`@ag-grid-community/all-modules`

@ag-grid-community/all-modules can be considered to be equivalent to ag-grid-community, but with the additional need to register modules within. If using this module you might be better off using ag-grid-community as the bundle size will be similar and will reduce the need to register modules.

`@ag-grid-enterprise/all-modules`

@ag-grid-enterprise/all-modules can be considered to be equivalent to ag-grid-enterprise, but with the additional need to register modules within. If using this module you might be better off using ag-grid-enterprise (along with ag-grid-enterprise) as the bundle size will be similar and will reduce the need to register modules.

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.

`@ag-grid-community/core`

This module contains the core code required by the Grid and all modules (Enterprise or Community) depend on it. As such @ag-grid-community/core will always be available no matter what module you specify in your package.json.

For example, let's assume you specify the following in your package.json:

"dependencies": { "@ag-grid-community/client-side-row-model": "22.0.0" }

You can then use @ag-grid-community/core as this will be implicitly available to you:

import {Grid, GridOptions} from '@ag-grid-community/core'; import {ClientSideRowModelModule} from "@ag-grid-community/client-side-row-model"; ... the rest of your code

`@ag-grid-enterprise/core`

All Enterprise modules depend on @ag-grid-enterprise/core as such will always be available no matter what Enterprise module you specify in your package.json.

The main functionality you'll want to import from the @ag-grid-enterprise/core is the LicenceManager.

The above is a truncated hierarchy of Entreprise modules for illustrative purposes.

For example, let's assume you specify the following in your package.json:

"dependencies": { "@ag-grid-enterprise/filter-tool-panel": "22.0.0" }

You can then use @ag-grid-enterprise/core as this will be implicitly available to you:

import {Grid, GridOptions} from '@ag-grid-community/core'; import {LicenseManager} from '@ag-grid-enterprise/core'; import {FiltersToolPanelModule} from "@ag-grid-enterprise/filter-tool-panel"; LicenseManager.setLicenseKey(...your key...); ... the rest of your code

Framework Modules

	Framework Module	Exported
Angular Support	@ag-grid-community/angular	Angular Support
React Support	@ag-grid-community/react	React Support
Vue Suport	@ag-grid-community/vue	Vue Support
Polymer Support	@ag-grid-community/polymer	Polymer Support

^(!) 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.

Framework modules are standalone packages and do not need to be supplied to the Grid.

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:

Specify the Grid Modules you wish to import:

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

Import the module(s) you need

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

Provide the module(s) to the Grid

// 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";