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.

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

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:

Then provide these modules to the Grid:

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

2. 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";
3. 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:

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

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):

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

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

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