ag-Grid Building Applications With ag-Grid Modules
In this section we describe how you can cherry pick modules to provide the features you need with a reduced application bundle size.
Introduction
In order to use selective ag-Grid modules within your application you need to do two things:
- Specify the modules you require as dependencies
- Register the modules you require with the Grid
That's it! In the sections below we will expand on these points with examples.
This page assume that you want to selectively choose modules and do not require all Grid functionality. If you require all Grid features (either Community or Enterprise) then you might be better off using ag-grid-community
or ag-grid-enterprise
and follow the steps documented in the Getting Started Guides as doing so will require less effort on your part.
Choosing Modules
Please refer to the complete list of modules here.
For our purposes we're going to assume that the application we're building requires the following features:
- Client Side Row Model
- Excel Export
- Context Menu
Recall from earlier documentation that at a minimum you need to provide a Row Model to the Grid and in our case we've | opted for the Client Side Row Model.
Additionally we're going to provide Excel Export functionality, so we're going to need the corresponding Excel Module.
Finally, we'd like our users to be able to export the data using the Context Menu, so we'll include that module too.
This is what our package.json
file will look like based on the requirements above:
"dependencies": {
"@ag-grid-community/client-side-row-model": "~24.1.0",
"@ag-grid-enterprise/excel-export": "~24.1.0",
"@ag-grid-enterprise/menu": "~24.1.0"
//...other dependencies...
}
Registering Modules
Now that these modules are available to us we need to import them within our application, and then register them with the Grid:
import { ModuleRegistry } from '@ag-grid-community/core';
import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
import { MenuModule } from '@ag-grid-enterprise/menu';
import { ExcelExportModule } from '@ag-grid-enterprise/excel-export';
ModuleRegistry.registerModules([ClientSideRowModelModule, MenuModule, ExcelExportModule]);
You do not need to register framework modules (ie. @ag-grid-community/angular
, @ag-grid-community/react
etc).
And that's all that's required. Below are examples using using the above configuration across various frameworks.
Full working examples of this can be found on GitHub.