Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

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

    //...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.