or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

charts-visualization.mddata-processing.mdfiltering-search.mdimport-export.mdindex.mdrow-operations.mdselection-interaction.mdui-components.md
tile.json

index.mddocs/

AG Grid Enterprise

AG Grid Enterprise is a comprehensive commercial data grid library that extends ag-grid-community with advanced features for building sophisticated data tables and grids in web applications. It provides enterprise-grade capabilities including advanced filtering, integrated charts, server-side data models, row grouping, pivoting, Excel export, and extensive customization options across React, Angular, Vue, and vanilla JavaScript/TypeScript frameworks.

Package Information

  • Package Name: ag-grid-enterprise
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install ag-grid-enterprise
  • License: Commercial (requires license key for production use)
  • Dependencies: ag-grid-community (34.1.2)
  • Optional Dependencies: ag-charts-community, ag-charts-enterprise (for chart integration)

Core Imports

ES Modules:

import { createGrid, GridApi, ColDef } from "ag-grid-enterprise";

Importing specific modules:

import { 
  AllEnterpriseModule,
  LicenseManager,
  ExcelExportModule,
  ChartsModule 
} from "ag-grid-enterprise";

CommonJS:

const { createGrid, AllEnterpriseModule } = require("ag-grid-enterprise");

License Management

AG Grid Enterprise requires a valid license key for production use:

import { LicenseManager } from "ag-grid-enterprise";

// Set license key before creating grids
LicenseManager.setLicenseKey("your-license-key-here");

Basic Usage

import { createGrid, AllEnterpriseModule, ColDef, GridOptions } from "ag-grid-enterprise";

// Column definitions with enterprise features
const columnDefs: ColDef[] = [
  { field: "athlete", filter: "agSetColumnFilter" }, // Enterprise set filter
  { field: "age", filter: "agNumberColumnFilter" },
  { field: "country", rowGroup: true }, // Enterprise row grouping
  { field: "year", pivot: true }, // Enterprise pivoting
  { field: "gold", aggFunc: "sum" } // Enterprise aggregation
];

// Grid options with enterprise features
const gridOptions: GridOptions = {
  columnDefs,
  rowData: [], // Your data
  modules: [AllEnterpriseModule], // Load all enterprise features
  
  // Enterprise features
  enableRangeSelection: true,
  enableCharts: true,
  sideBar: true,
  statusBar: {
    statusPanels: [
      { statusPanel: "agTotalRowCountComponent", align: "left" },
      { statusPanel: "agAggregationComponent" }
    ]
  }
};

// Create the grid
const gridDiv = document.getElementById("myGrid");
const gridApi = createGrid(gridDiv!, gridOptions);

Architecture

AG Grid Enterprise is built on a modular architecture with these key components:

  • Core Framework: Extends ag-grid-community with enterprise-specific functionality
  • Module System: Granular feature modules that can be imported individually or together
  • License Management: Commercial license validation and watermarking system
  • Integration Layer: Framework adapters for React, Angular, Vue, and vanilla JS
  • Extension Points: Comprehensive API for customization and third-party integrations

Capabilities

Data Processing and Management

Core data handling capabilities including server-side processing, tree data structures, and advanced row models.

// Server-side row model for large datasets
interface IServerSideGetRowsParams {
  request: IServerSideGetRowsRequest;
  success: (params: IServerSideGetRowsSuccessParams) => void;
  fail: () => void;
}

// Tree data structure support
interface TreeDataGridOptions {
  treeData: boolean;
  getDataPath: (data: any) => string[];
  groupDefaultExpanded?: number;
}

Data Processing

Filtering and Search

Advanced filtering capabilities including set filters, multi-column filters, and find functionality.

// Set filter with enterprise features
interface ISetFilter {
  getModel(): ISetFilterModel | null;
  setModel(model: ISetFilterModel | null): void;
  selectEverything(): void;
  selectNothing(): void;
  getMiniFilter(): string;
  setMiniFilter(newMiniFilter: string): void;
}

// Multi-column filter
interface IMultiFilter {
  getChildFilterInstance(index: number): IFilterComp;
  getFilterCount(): number;
}

Filtering and Search

Charts and Visualization

Integrated charting capabilities with ag-charts integration for creating interactive visualizations from grid data.

// Chart creation from selected ranges
interface CreateRangeChartParams {
  cellRange: CellRangeParams;
  chartType: ChartType;
  chartContainer?: HTMLElement;
  suppressChartRanges?: boolean;
  aggFunc?: string | IAggFunc;
}

// Chart management API
interface ChartRef {
  chartId: string;
  destroyChart(): void;
}

Charts and Visualization

Import and Export

Comprehensive data import/export capabilities including Excel export with multi-sheet support.

// Excel export functions
function exportMultipleSheetsAsExcel(params: ExcelExportMultipleSheetParams): void;
function getMultipleSheetsAsExcel(params: ExcelExportMultipleSheetParams): Blob | undefined;

// Excel export parameters
interface ExcelExportMultipleSheetParams {
  data: ExcelSheetData[];
  fileName?: string;
  author?: string;
}

Import and Export

Selection and Interaction

Enhanced selection capabilities including range selection, cell selection, and advanced clipboard operations.

// Range selection API
interface IRangeService {
  getCellRanges(): CellRange[] | null;
  addCellRange(params: CellRangeParams): void;
  clearSelection(): void;
}

// Cell selection parameters
interface CellRangeParams {
  rowStartIndex?: number;
  rowEndIndex?: number;
  columnStart?: string | Column;
  columnEnd?: string | Column;
}

Selection and Interaction

UI Components and Layout

Enterprise UI components including tool panels, status bar, side bar, and enhanced menus.

// Side bar configuration
interface SideBarDef {
  toolPanels?: (ToolPanelDef | string)[];
  defaultToolPanel?: string;
  hiddenByDefault?: boolean;
  position?: "left" | "right";
}

// Tool panel definition
interface ToolPanelDef {
  id: string;
  labelDefault: string;
  labelKey?: string;
  iconKey: string;
  toolPanel?: string;
  toolPanelParams?: any;
}

UI Components and Layout

Row Operations

Advanced row manipulation including grouping, pivoting, aggregation, row numbers, and master-detail functionality.

// Row grouping configuration
interface RowGroupingDisplayType {
  singleColumn?: boolean;
  multipleColumns?: boolean;
  groupRows?: boolean;
  custom?: boolean;
}

// Pivot configuration
interface PivotColumnGroupDef extends ColGroupDef {
  pivotKeys?: string[];
  pivotTotalColumnIds?: string[];
}

Row Operations

Module System

AG Grid Enterprise uses a modular architecture allowing selective feature inclusion:

// Individual modules
import { 
  ExcelExportModule,
  SetFilterModule,
  RangeSelectionModule,
  ChartsModule,
  TreeDataModule,
  ServerSideRowModelModule,
  RowNumbersModule
} from "ag-grid-enterprise";

// All enterprise features
import { AllEnterpriseModule } from "ag-grid-enterprise";

// Module registration
const gridOptions: GridOptions = {
  modules: [ExcelExportModule, SetFilterModule, RangeSelectionModule]
  // or use AllEnterpriseModule for everything
};

Types

// License manager interface
interface GridLicenseManager {
  setLicenseKey(licenseKey: string): void;
  setChartsLicenseManager(chartsLicenseManager: any): void;
  getLicenseDetails(licenseKey: string): any;
  validateLicense(): void;
  isDisplayWatermark(): boolean;
  getWatermarkMessage(): string;
}

// Excel export types
interface ExcelSheetData {
  sheetName: string;
  data: any[];
}

interface ExcelExportMultipleSheetParams {
  data: ExcelSheetData[];
  fileName?: string;
  author?: string;
}

// Chart types
type ChartType = 
  | "column" 
  | "groupedColumn" 
  | "stackedColumn" 
  | "normalizedColumn"
  | "bar" 
  | "groupedBar" 
  | "stackedBar" 
  | "normalizedBar"
  | "line" 
  | "scatter" 
  | "bubble" 
  | "pie" 
  | "doughnut"
  | "area" 
  | "stackedArea" 
  | "normalizedArea";