ag-Grid Modules - Overview

ag-Grid modules allow you to pick and choose which features you require, resulting in a smaller application size overall, with the trade-off being that you need to register the modules you require.

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.

Introduction

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	GridChartsModule
Clipboard	@ag-grid-enterprise/clipboard	ClipboardModule
Column Tool Panel & Column Menu 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 & Column Menu	@ag-grid-enterprise/menu	MenuModule
Range Selection	@ag-grid-enterprise/range-selection	RangeSelectionModule
Rich Select	@ag-grid-enterprise/rich-select	RichSelectModule
Row Grouping, Pivoting & Tree Data	@ag-grid-enterprise/row-grouping	RowGroupingModule
Server Side Row Model	@ag-grid-enterprise/server-side-row-model	ServerSideRowModelModule
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

Note that neither @ag-grid-community/all-modules nor @ag-grid-enterprise/all-modules contain framework support - if you require framework support you need to explicitly specify it:

	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

`All Modules Bundles`

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

Mixing `packages` and `modules`

The following artifacts are "modules" and are designed to work to together:

Module Prefix
`@ag-grid-community/xxxxx`
`@ag-grid-enterprise/xxxxx`

You cannot mix packages and modules - in other words you cannot have a mix of the following types of dependencies:

"dependencies": { "ag-grid-community": "^23.0.0" <- a package dependency "@ag-grid-enterprise/all-modules": "^23.0.0" <- a module dependency ...other dependencies...

Installing ag-Grid Modules

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

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.

The steps required are:

Specify Modules Dependencies
Import Modules
Register Modules

A real-world example might be that we wish to use the Client Side Row Model (the default row model) together with the CSV, Excel and Master/Detail features. Additionally we're writing a React application so we need to specify the @ag-grid-community/react dependency:

"dependencies": { "@ag-grid-community/client-side-row-model": "^23.0.0", "@ag-grid-community/csv-export": "^23.0.0", "@ag-grid-enterprise/excel-export": "^23.0.0", "@ag-grid-enterprise/master-detail": "^23.0.0", "@ag-grid-community/react": "^23.0.0", ...other dependencies...

We now need to register the Grid modules we wish to use - note that this does not include @ag-grid-community/react as the React support is not a Grid feature, but rather a support library:

import {ModuleRegistry} from '@ag-grid-community/core'; // @ag-grid-community/core will always be implicitly available import {ClientSideRowModelModule} from "@ag-grid-community/client-side-row-model"; import {CsvExportModule} from "@ag-grid-community/csv-export"; import {ExcelExportModule} from "@ag-grid-enterprise/excel-export"; import {MasterDetailModule} from "@ag-grid-enterprise/master-detail"; ModuleRegistry.registerModules([ ClientSideRowModelModule, CsvExportModule, ExcelExportModule, MasterDetailModule ]); // you can optionally register individual modules // ModuleRegistry.register(ClientSideRowModelModule); // ModuleRegistry.register(CsvExportModule); // etc

Providing Modules To Individual Grids

The steps required are:

Specify Modules Dependencies
Import Modules
Provide Modules To Each Grid

Using the same real-world example above let us assume that we wish to use the Client Side Row Model (the default row model) together with the CSV, Excel and Master/Detail features. Additionally we're writing a React application so we need to specify the @ag-grid-community/react dependency:

We now need to provide the Grid modules we wish to use - note that this does not include @ag-grid-community/react as the React support is not a Grid feature, but rather a support library.

In our example we're writing a React application so the example will use AgGridReact, but the principle would apply for other frameworks too:

import {ClientSideRowModelModule} from "@ag-grid-community/client-side-row-model"; import {CsvExportModule} from "@ag-grid-community/csv-export"; import {ExcelExportModule} from "@ag-grid-enterprise/excel-export"; import {MasterDetailModule} from "@ag-grid-enterprise/master-detail"; import {AgGridReact} from "@ag-grid-community/react"; export default class GridExample extends Component { ...rest of class.. render() { return ( <div style={{height: 400, width: 900}} className="ag-theme-alpine"> <AgGridReact // properties columnDefs={this.state.columnDefs} rowData={this.props.rowData} modules={[ClientSideRowModelModule, CsvExportModule, ExcelExportModule, MasterDetailModule]} // events onGridReady={this.onGridReady}> </AgGridReact> </div> ) } };

Example of using JavaScript or other Frameworks:

// JavaScript new Grid(<dom element>, gridOptions, { modules: [ClientSideRowModelModule, CsvExportModule, ExcelExportModule, MasterDetailModule]}); // Angular public modules: Module[] = [ClientSideRowModelModule, CsvExportModule, ExcelExportModule, MasterDetailModule]; <ag-grid-angular> [rowData]="rowData" [columnDefs]="columnDefs" [modules]="modules" </ag-grid-angular> // Vue data() { return { columnDefs: ...column defs..., rowData: ....row data..., modules: [ClientSideRowModelModule, CsvExportModule, ExcelExportModule, MasterDetailModule] } } <ag-grid-vue :columnDefs="columnDefs" :rowData="rowData" :modules="modules"> </ag-grid-vue>

`Core` Modules

If you specify any Community or Enterprise dependency then the corresponding core module will also be pulled in and be made available to you.

For example, if you specify (for example) @ag-grid-community/client-side-row-model - a Community Module - then the corresponding @ag-grid-community/core will be available.

By the same token, if you specify (for example) @ag-grid-enterprise/excel-export - an Enterprise Module - then the corresponding @ag-grid-enterprise/core will be available.

This is worth knowing as you'll generally require the core packages for a variety of reasons - Grid related definitions for the @ag-grid-community/core module and LicenseManager for the @ag-grid-enterprise/core module.

Let us assume we have the following modules specified:

We can then assume the core packages are available implicitly:

import {ColumnApi, GridApi} from "@ag-grid-community/core"; import {LicenseManager} from "@ag-grid-enterprise/core";

CSS/SCSS Paths

CSS & SCSS will be available in the @ag-grid-community/core module, which will always be available (if any Community or Enterprise module is specified):

// CSS Community import "./node_modules/@ag-grid-community/core/dist/styles/ag-grid.css"; import "./node_modules/@ag-grid-community/core/dist/styles/ag-theme-alpine.css"; // SCSS Community @import "./node_modules/@ag-grid-community/core/dist/styles/ag-grid.scss"; @import "./node_modules/@ag-grid-community/core/dist/styles/ag-theme-alpine/sass/ag-theme-alpine-mixin.scss";