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.
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 |
Multi Filter | @ag-grid-enterprise/multi-filter | MultiFilterModule |
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:
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": "~25.1.0" <- a package dependency
"@ag-grid-enterprise/all-modules": "~25.1.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.1.0",
"@ag-grid-community/csv-export": "~25.1.0",
"@ag-grid-enterprise/excel-export": "~25.1.0",
"@ag-grid-enterprise/master-detail": "~25.1.0",
"@ag-grid-community/react": "~25.1.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.1.0",
"@ag-grid-community/csv-export": "~25.1.0",
"@ag-grid-enterprise/excel-export": "~25.1.0",
"@ag-grid-enterprise/master-detail": "~25.1.0",
"@ag-grid-community/react": "~25.1.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.1.0",
"@ag-grid-community/csv-export": "~25.1.0",
"@ag-grid-enterprise/excel-export": "~25.1.0",
"@ag-grid-enterprise/master-detail": "~25.1.0",
"@ag-grid-community/react": "~25.1.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";