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