Vue Data GridBuilding Applications With AG Grid Modules
In this section we demonstrate how you can cherry pick modules to provide the features you need with a reduced application bundle size.
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.
You can refer to the complete list of modules here but 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": "~29.3.5",
"@ag-grid-enterprise/excel-export": "~29.3.5",
"@ag-grid-enterprise/menu": "~29.3.5"
//...other dependencies...
}
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
, @ag-grid-community/vue
etc).
And that's all that's required. Below is an example using the above configuration for your framework.