Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

Vue Data Grid: Building Applications With AG Grid Modules

In this section we demonstrate how you to 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.

Choosing Our Modules

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": "~27.3.0",
    "@ag-grid-enterprise/excel-export": "~27.3.0",
    "@ag-grid-enterprise/menu": "~27.3.0"

    //...other dependencies...

Registering Our 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, @ag-grid-community/vue etc).

And that's all that's required. Below is an example using the above configuration for your framework.