Results:
Loading...

Vue Data GridAG Grid Modules

AG Grid modules allow you to cherry pick grid features resulting in a smaller application bundle size overall.

Modules

The table below summarises the modules provided in AG Grid Community and AG Grid Enterprise. See Module Examples to learn how the Example Runner can be used to determine the module required for a given feature.

Community ModuleExported
Grid Core@ag-grid-community/coreCore Grid Components: GridOptions, ColDef etc
Grid Styles@ag-grid-community/stylesCore Grid Styles and Themes
Client Side Row Model@ag-grid-community/client-side-row-modelClientSideRowModelModule
Infinite Row Model@ag-grid-community/infinite-row-modelInfiniteRowModelModule
CSV Export@ag-grid-community/csv-exportCsvExportModule
Framework ModuleExported
Vue Support@ag-grid-community/vueVue Support
Enterprise ModuleExported
Enterprise Core@ag-grid-enterprise/coreLicenseManager
Charts@ag-grid-enterprise/chartsGridChartsModule
Sparklines@ag-grid-enterprise/sparklinesSparklinesModule
Clipboard@ag-grid-enterprise/clipboardClipboardModule
Column Tool Panel & Column Menu Panel@ag-grid-enterprise/column-tool-panelColumnsToolPanelModule
Excel Export@ag-grid-enterprise/excel-exportExcelExportModule
Filter Tool Panel@ag-grid-enterprise/filter-tool-panelFiltersToolPanelModule
Master Detail@ag-grid-enterprise/master-detailMasterDetailModule
Context & Column Menu@ag-grid-enterprise/menuMenuModule
Range Selection@ag-grid-enterprise/range-selectionRangeSelectionModule
Rich Select@ag-grid-enterprise/rich-selectRichSelectModule
Row Grouping, Pivoting & Tree Data@ag-grid-enterprise/row-groupingRowGroupingModule
Server Side Row Model@ag-grid-enterprise/server-side-row-modelServerSideRowModelModule
Set Filter@ag-grid-enterprise/set-filterSetFilterModule
Multi Filter@ag-grid-enterprise/multi-filterMultiFilterModule
Side Bar@ag-grid-enterprise/side-barSideBarModule
Status Bar@ag-grid-enterprise/status-barStatusBarModule
Viewport Row Model@ag-grid-enterprise/viewport-row-modelViewportRowModelModule

Mixing packages and modules

Do not mix packages and modules! This will result in a large bundle size!

It is important that you do not mix packages and modules in the same application as this will result in AG Grid being included twice and doubling your bundle size! All modules are scoped by either @ag-grid-community/* or @ag-grid-enterprise/* and should not be mixed with the standalone packages of ag-grid-community and ag-grid-enterprise.

ModulesPackages
@ag-grid-community/xxxxxag-grid-community
@ag-grid-enterprise/xxxxxag-grid-enterprise
"dependencies": {
    "ag-grid-community": "~29.3.5" <- a package dependency
    "@ag-grid-enterprise/row-grouping": "~29.3.5"  <- a module dependency
    //...other dependencies...
}

Installing AG Grid Modules

The grid requires at least one of the following Row Model modules:

  • ClientSideRowModelModule
  • InfiniteRowModelModule
  • ServerSideRowModelModule
  • ViewportRowModelModule

After that all other modules are optional depending on your requirements.

Dependent Modules

As a developer you do not need to worry about module dependencies. For example, the FilterToolPanelModule depends on the SideBarModule but as we have set up the dependencies as part of the module definition npm will install the dependent packages for you. Also, when Registering Modules you only need to register the feature you require and AG Grid will take care of registering any dependant modules.

Registering AG Grid Modules

When including AG Grid in your application via modules it is your responsibility to register the required modules with the grid before it is instantiated. You can either register them globally or pass them individually to each grid instance.

Providing Modules Globally

You can import and register modules to the Grid globally, 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 Vue application, so we need to specify the @ag-grid-community/vue dependency:

"dependencies": {
   "@ag-grid-community/client-side-row-model": "~29.3.5",
   "@ag-grid-community/csv-export": "~29.3.5",
   "@ag-grid-enterprise/excel-export": "~29.3.5",
   "@ag-grid-enterprise/master-detail": "~29.3.5",
   "@ag-grid-community/vue": "~29.3.5",
   //...other dependencies...
}

We now need to register the Grid modules we wish to use - note that this does not include @ag-grid-community/vue as the Vue 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
  • Pass to Grid

Using the same real-world example from above the package.json dependencies will be the same but how we register the modules is different.

import { createApp } from 'vue';
import { AgGridVue } from '@ag-grid-community/vue3';
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";

data() {
    return {
        columnDefs: ...column defs...,
        rowData: ....row data...,
        modules: [ClientSideRowModelModule, CsvExportModule, ExcelExportModule, MasterDetailModule]
    }
}
<ag-grid-vue
    :columnDefs="columnDefs"
    :rowData="rowData"
    :modules="modules">
</ag-grid-vue>

It's important to note that when a module is added via the modules property, this module will be available to all other instances of the Grid created afterwards. This will produce the same behaviour as registering modules globally by calling ModuleRegistry.registerModules(). This means that you can't limit the functionality of specific grid instances based on whether you've registered a particular module for that specific grid. If a module was already registered by any one AG Grid instance, it is available to all AG Grid instances created subsequently. To control features per grid use the relevant Grid Property.

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 include @ag-grid-community/client-side-row-model - a Community Module - then @ag-grid-community/core will be available. If you include @ag-grid-enterprise/excel-export - an Enterprise Module - then @ag-grid-enterprise/core will also be available.

You'll require the @ag-grid-community/core module for Grid related definitions and @ag-grid-enterprise/core for the LicenseManager.

If we have the following modules specified:

"dependencies": {
    "@ag-grid-community/client-side-row-model": "~29.3.5",
    "@ag-grid-enterprise/excel-export": "~29.3.5",
    //...other dependencies...
}

We can then assume the core packages are available implicitly and import from them:

import { ColumnApi, GridApi } from "@ag-grid-community/core";
import { LicenseManager } from "@ag-grid-enterprise/core";

LicenseManager.setLicenseKey(...your key...);

CSS/SCSS Paths

CSS & SCSS is available in the @ag-grid-community/styles module.

/* CSS Community */
import "@ag-grid-community/styles/ag-grid.css";
import "@ag-grid-community/styles/ag-theme-alpine.css";

If using SCSS the theme defaults to alpine, so you don't have to explicitly include it.

// SCSS Community
@use "~@ag-grid-community/styles" as ag;

// Choose balham over default alpine
@include ag.grid-styles((
    theme: balham
));

See Choosing a Theme for full details of how to select a theme.

Module Examples

Our Example Runner enables you to view the modules version of an example via the dropdown in the top right-hand corner.

When 'Modules' is selected, the source code includes the required modules along with the module import paths. This means you can copy and paste code from our examples without further tweaks.