添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
Results:
Loading...

Angular Data Grid AG 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
Angular Support @ag-grid-community/angular Angular 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.2" <- a package dependency
    "@ag-grid-enterprise/row-grouping": "~29.3.2"  <- 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 an Angular application, so we need to specify the @ag-grid-community/angular dependency:

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

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

    Example

    import { Component } from '@angular/core';
    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"; 
    public modules: Module[] = [ClientSideRowModelModule, CsvExportModule, ExcelExportModule, MasterDetailModule];
    <ag-grid-angular>
        [rowData]="rowData"
        [columnDefs]="columnDefs" [modules]="modules"</ag-grid-angular>

    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.2",
        "@ag-grid-enterprise/excel-export": "~29.3.2",
        //...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.