JavaScript Grid: AG Grid Modules - Overview

AG Grid modules allow you to just import the features which you need, resulting in a smaller application size overall.

Introduction

Modules

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

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:

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 as the bundle size will be similar and will reduce the need to register modules.

Mixing packages and modules

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

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

"dependencies": {
    "ag-grid-community": "~25.3.0" <- a package dependency
    "@ag-grid-enterprise/all-modules": "~25.3.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.

• 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": "~25.3.0",
    "@ag-grid-community/csv-export": "~25.3.0",
    "@ag-grid-enterprise/excel-export": "~25.3.0",
    "@ag-grid-enterprise/master-detail": "~25.3.0",
    "@ag-grid-community/react": "~25.3.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": "~25.3.0",
    "@ag-grid-community/csv-export": "~25.3.0",
    "@ag-grid-enterprise/excel-export": "~25.3.0",
    "@ag-grid-enterprise/master-detail": "~25.3.0",
    "@ag-grid-community/react": "~25.3.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=<span>{</span>{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

new Grid(<dom element>, gridOptions, { modules: [ClientSideRowModelModule, CsvExportModule, ExcelExportModule, MasterDetailModule]});

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": "~25.3.0",
    "@ag-grid-community/csv-export": "~25.3.0",
    "@ag-grid-enterprise/excel-export": "~25.3.0",
    "@ag-grid-enterprise/master-detail": "~25.3.0",
    "@ag-grid-community/react": "~25.3.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.scss";