Vue Data GridAG Grid Modules
AG Grid modules allow you to cherry pick grid features resulting in a smaller application bundle size overall.
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 |
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...
}
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.
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.
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.
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
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.
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 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.
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.