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 Module	Exported
Grid Core	@ag-grid-community/core	Core Grid Components: GridOptions, ColDef etc
Grid Styles	@ag-grid-community/styles	Core Grid Styles and Themes
Client Side Row Model	@ag-grid-community/client-side-row-model	ClientSideRowModelModule
Infinite Row Model	@ag-grid-community/infinite-row-model	InfiniteRowModelModule
CSV Export	@ag-grid-community/csv-export	CsvExportModule

	Framework Module	Exported
Vue Support	@ag-grid-community/vue	Vue Support

	Enterprise Module	Exported
Enterprise Core	@ag-grid-enterprise/core	LicenseManager
Charts	@ag-grid-enterprise/charts	GridChartsModule
Sparklines	@ag-grid-enterprise/sparklines	SparklinesModule
Clipboard	@ag-grid-enterprise/clipboard	ClipboardModule
Column Tool Panel & Column Menu Panel	@ag-grid-enterprise/column-tool-panel	ColumnsToolPanelModule
Excel Export	@ag-grid-enterprise/excel-export	ExcelExportModule
Filter Tool Panel	@ag-grid-enterprise/filter-tool-panel	FiltersToolPanelModule
Master Detail	@ag-grid-enterprise/master-detail	MasterDetailModule
Context & Column Menu	@ag-grid-enterprise/menu	MenuModule
Range Selection	@ag-grid-enterprise/range-selection	RangeSelectionModule
Rich Select	@ag-grid-enterprise/rich-select	RichSelectModule
Row Grouping, Pivoting & Tree Data	@ag-grid-enterprise/row-grouping	RowGroupingModule
Server Side Row Model	@ag-grid-enterprise/server-side-row-model	ServerSideRowModelModule
Set Filter	@ag-grid-enterprise/set-filter	SetFilterModule
Multi Filter	@ag-grid-enterprise/multi-filter	MultiFilterModule
Side Bar	@ag-grid-enterprise/side-bar	SideBarModule
Status Bar	@ag-grid-enterprise/status-bar	StatusBarModule
Viewport Row Model	@ag-grid-enterprise/viewport-row-model	ViewportRowModelModule

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.

Modules	Packages
`@ag-grid-community/xxxxx`	`ag-grid-community`
`@ag-grid-enterprise/xxxxx`	`ag-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.