Apex Grid - Installation and Getting Started

The Apex grid is a web component built on top of Lit, couple of helper libraries, and distributed as a Javascript module.

Installation

To add the Apex grid to your project, install it from npm together with its peer dependencies.

npm install apex-grid lit igniteui-webcomponents

lit and igniteui-webcomponents are peer dependencies: install one copy of each alongside the grid. The grid does not bundle its dependencies, so we suggest a modern build tool/dev server that understands ECMA modules and bare import specifiers, such as Vite.

Quick start

The grid registers and styles itself out of the box. Import the self-registering entry point, drop an <apex-grid> on the page, and assign its data. There is no theme stylesheet to import and no configureTheme() call. The grid renders through --ag-* CSS custom properties (see Styles & Themes).

import 'apex-grid/define';

const grid = document.createElement('apex-grid');
grid.autoGenerate = true;
grid.data = [/* … */];

document.querySelector('#app').appendChild(grid);

Upgrading from v2? Per-framework theme imports and configureTheme() have been removed, and Excel (XLSX) export has moved to apex-grid-enterprise. See the v2 → v3 migration guide.

Component registration

The Apex grid package exposes the following entry points for finer-grained setup:

apex-grid

The main entry point of the package. Exports the grid component as well as type information. This entry point is not self-registering. Make sure to call the register method on the component class to trigger the upgrade to a web component.

import { ApexGrid } from 'apex-grid';
ApexGrid.register();

apex-grid/define

Imports the grid component and automatically registers it and its dependencies in the browser customElements registry.

apex-grid/styles.css

An opt-in stylesheet that sets height: 100% with a min-height: 240px fallback on the host. Import it instead of writing your own host height rule:

import 'apex-grid/styles.css';

The grid's internal :host { display: grid } rule cannot be overridden: setting display on <apex-grid> from consumer CSS collapses the virtualizer.

setup()

An optional one-call convenience that registers the component and adopts the host height stylesheet in a single step. It is idempotent and SSR-safe (it falls back to a <style> tag where document.adoptedStyleSheets is unavailable).

import { setup } from 'apex-grid';

setup();                      // register + adopt host styles
setup({ hostStyles: false }); // register only; supply your own host sizing

The theme option is deprecated and does not affect the grid's appearance; the grid styles itself through --ag-* variables regardless. It only forwards to igniteui-webcomponents' configureTheme() for apps that embed the grid alongside other igniteui components, and will be removed in a future major version.

How To Use Apex Grid

import { ApexGrid } from 'apex-grid';

ApexGrid.register();

const grid = document.createElement('apex-grid');
grid.autoGenerate = true;
grid.data = [...];

document.querySelector('#app').appendChild(grid);

Enterprise edition

apex-grid-enterprise is the pro-licensed companion package. It registers as <apex-grid-enterprise> and is a drop-in replacement for <apex-grid> (same configuration API, columns, data binding, sorting, filtering, editing, and theming), layering on row grouping, pivoting, aggregations, integrated charts, a formula engine, cell range selection, master-detail, infinite rows, XLSX export, and an AI toolkit. See the enterprise feature guides in the sidebar (Row Grouping, Pivoting, Integrated Charts, and the rest).

Installation

Install the enterprise package alongside the community grid and the shared peer dependencies:

npm install apex-grid-enterprise apex-grid lit igniteui-webcomponents

apex-grid, lit, and igniteui-webcomponents are shared peer dependencies: install a single copy of each. The enterprise package requires apex-grid@^3.0.0.

Import the self-registering entry point and swap the tag name:

import 'apex-grid-enterprise/define';

const grid = document.createElement('apex-grid-enterprise');
grid.columns = [/* … */];
grid.data = [/* … */];
document.querySelector('#app').appendChild(grid);

Everything you configure on <apex-grid> works unchanged on <apex-grid-enterprise>.

Licensing

Licensing is offline and non-hostile. Without a valid key the grid keeps working: it renders a small watermark and logs a one-time console notice. There are no network calls and no hard blocking.

import { ApexGridEnterprise } from 'apex-grid-enterprise';

ApexGridEnterprise.setLicense('APEX-…');

Call setLicense() once, before (or shortly after) your grids mount. A valid key removes the watermark and the console notice.

Opting into features (tree-shaking)

apex-grid-enterprise/define is the batteries-included path: it registers <apex-grid-enterprise> with every feature module enabled, which pulls in all feature code. To keep the rest tree-shaken, register only the modules you use with the static use() method before constructing any grid:

import { ApexGridEnterprise } from 'apex-grid-enterprise';
import { groupingModule } from 'apex-grid-enterprise/features/grouping';
import { aggregationModule } from 'apex-grid-enterprise/features/aggregation';

ApexGridEnterprise.use(groupingModule, aggregationModule);
customElements.define(ApexGridEnterprise.tagName, ApexGridEnterprise);

use() is idempotent per module id and returns the class so calls can chain. The full set is also exported as enterpriseModules if you want the everything path without the /define side-effect import:

import { ApexGridEnterprise, enterpriseModules } from 'apex-grid-enterprise';
ApexGridEnterprise.use(...enterpriseModules);

Companion custom elements

Some enterprise features render as sibling elements you place in your markup:

Element	Tag	Purpose
ApexGridChart	<apex-grid-chart>	Live chart bound to the grid view or a selected range
ApexGridStatusBar	<apex-grid-status-bar>	Live selection aggregates (count, sum, average, min, max)
ApexGridToolPanel	<apex-grid-tool-panel>	Column + grouping management side panel
ApexGridSetFilter	<apex-grid-set-filter>	Checkbox "set" filter for a column's distinct values

See Companion Elements and Integrated Charts.