Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.ag-grid.com/javascript-data-grid/modules/ below:

JavaScript Grid: AG 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.

If you are using the UMD bundle you do not need to register modules as this is already done automatically.

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.

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,
    AllCommunityModule, 
} from 'ag-grid-community';


ModuleRegistry.registerModules([
    AllCommunityModule, 
]);

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';


ModuleRegistry.registerModules([
    AllEnterpriseModule.with(AgChartsEnterpriseModule),
]);

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.

The ValidationModule adds helpful console warnings/errors that can help identify bad configuration during development. When using Modules it is recommended to only include it in your development build to ensure your production build is as small as possible.

if(process.env.NODE_ENV !== 'production') {
    ModuleRegistry.registerModules([ValidationModule]);
}

If using the bundles (AllCommunityModule/AllEnterpriseModule), the ValidationModule is included by default.

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 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
]);

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.

We pass the modules to createGrid via the modules property of the params.

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

createGrid(<dom element>, gridOptions, { modules: [
    ClientSideRowModelModule,
    CsvExportModule,
    ExcelExportModule,
    MasterDetailModule
]});

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: [ClipboardModule, CsvExportModule, SetFilterModule]
• Right Grid individually registers: [ CsvExportModule, ExcelExportModule, NumberFilterModule, TextFilterModule]

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.

To check if a specific module has been registered with a grid instance use the api.isModuleRegistered(moduleName) method.

const isRegistered = api.isModuleRegistered('SetFilterModule');

Function

Check if a Module is registered with the current grid instance via its equivalent string name.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4