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-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
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/chartsGridChartsModule
Clipboard @ag-grid-enterprise/clipboardClipboardModule
Column Tool Panel & Column Menu 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 & Column Menu @ag-grid-enterprise/menuMenuModule
Range Selection @ag-grid-enterprise/range-selectionRangeSelectionModule
Rich Select @ag-grid-enterprise/rich-selectRichSelectModule
Row Grouping, Pivoting & Tree Data @ag-grid-enterprise/row-groupingRowGroupingModule
Server Side Row Model @ag-grid-enterprise/server-side-row-modelServerSideRowModelModule
Set Filter @ag-grid-enterprise/set-filterSetFilterModule
Multi Filter @ag-grid-enterprise/multi-filterMultiFilterModule
Side Bar @ag-grid-enterprise/side-barSideBarModule
Status Bar @ag-grid-enterprise/status-barStatusBarModule
Viewport Row Model @ag-grid-enterprise/viewport-row-modelViewportRowModelModule

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/angularAngular Support
React Support @ag-grid-community/reactReact Support
Vue Support @ag-grid-community/vueVue Support
Polymer Support @ag-grid-community/polymerPolymer 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:

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

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