Vue Data GridAG Grid Modules

Reduce your application bundle size by cherry-picking grid features using AG Grid modules, generate registration code with the module selector, and validate your setup with the validation module.

Overview Copy

AG Grid Modules allow you to reduce the bundle size of your application by only including the modules you want to use. Use the Module Selector tool below to select the modules you want to use and generate the correct module registration code.

Alternatively, if you are not concerned about bundle size and you want access to every feature in Community / Enterprise, use Bundles to include all Community / Enterprise modules.

Bundles Copy

The AllCommunityModule bundle contains all of the modules available in AG Grid Community. The AllEnterpriseModule bundle contains all of the modules available in Community and Enterprise. Registering one of these bundles replicates the behaviour of the package versions of AG Grid prior to version 33:

// Import ModuleRegistry and the required module
import {
    ModuleRegistry,
    AllCommunityModule, // or AllEnterpriseModule
} from 'ag-grid-community';

// Register the module
ModuleRegistry.registerModules([
    AllCommunityModule, // or AllEnterpriseModule
]);

If you are using Integrated Charts or Sparklines, then you need to provide the relevant module from AG Charts to AllEnterpriseModule, for example:

import { AgChartsEnterpriseModule } from 'ag-charts-enterprise';
import { ModuleRegistry } from 'ag-grid-community';
import { AllEnterpriseModule,} from 'ag-grid-enterprise';

// All Enterprise Features, with Integrated Charts and Sparklines 
ModuleRegistry.registerModules([
    AllEnterpriseModule.with(AgChartsEnterpriseModule),
]);

Selecting Modules Copy

To work out which modules are required, select the features of the grid that you are using below. This will then provide the relevant registration code.

Validation Copy

The ValidationModule adds helpful console warnings/errors, including if a feature has been enabled and the relevant module is missing. It is recommended to include it in your development build. It is automatically included if using one of the bundles (AllCommunityModule/AllEnterpriseModule).

ModuleRegistry.registerModules() can be called multiple times to register additional modules, so ModuleRegistry.registerModules([ValidationModule]) can be run when in development.

Registering AG Grid Modules Copy

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 Copy

You can import and register modules globally, but you need to ensure that this is done before any grids are instantiated. Any modules registered globally will be available to all grids.

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

We need to register the grid modules we wish to use via the ModuleRegistry.

import { ModuleRegistry, ClientSideRowModelModule, CsvExportModule } from 'ag-grid-community';
import { ExcelExportModule, MasterDetailModule } from 'ag-grid-enterprise';

ModuleRegistry.registerModules([
    ClientSideRowModelModule,
    CsvExportModule,
    ExcelExportModule,
    MasterDetailModule
]);

Providing Modules To Individual Grids Copy

Modules can be registered directly with individual grids. Modules registered directly with a grid will only be available to that grid. When a grid is instantiated it uses both globally and individually registered modules.

Individually registering modules is most useful when you have multiple grids in your application with varying feature requirements. It may also lead to smaller bundle sizes if your application uses lazy loading / code splitting.

The steps required are:

• Import Modules
• Pass to Grid

Using the same real-world example from above (the Client-Side Row Model together with the CSV, Excel and Master/Detail features), how we register the modules is now different.

import { createApp } from 'vue';
import { AgGridVue } from 'ag-grid-vue3';
import { ClientSideRowModelModule, CsvExportModule } from 'ag-grid-community';
import { ExcelExportModule, MasterDetailModule } from 'ag-grid-enterprise';

data() {
    return {
        // ... other properties
        modules: [
            ClientSideRowModelModule,
            CsvExportModule,
            ExcelExportModule,
            MasterDetailModule
        ]
    }
}
<ag-grid-vue
    :modules="modules"
    // ... other properties
/>

The following example shows how you can configure individual grids using a combination of shared Global registrations as well as individual grid module registration. Note the following:

• Globally registered modules: [ClientSideRowModelModule, ColumnMenuModule, ContextMenuModule].
• Left Grid individually registers: [SetFilterModule, ClipboardModule, CsvExportModule]
• Right Grid individually registers: [TextFilterModule, NumberFilterModule, CsvExportModule, ExcelExportModule]

To see the difference in features open the context menu and open the column filter:

• The left grid has options for clipboard and CSV export.
• The right grid has options for CSV and Excel export.
• The left grid uses the Set Filter while the right grid uses the Text Filter or Number Filter depending on the cell data type.