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 and its dependencies, install the package from npm.

npm install apex-grid

While the apex-grid package installs all the necessary components for the grid, the grid itself does not bundle its dependencies. We suggest using a modern build tool/dev server that understands ECMA modules and bare import specifiers. Some examples are Vite and Snowpack.

Quick start

The setup() helper bundles the three runtime setup steps — component registration, theme configuration, and host-stylesheet adoption — into a single call. Pair it with one theme CSS import and the grid is ready to render:

import { setup } from 'apex-grid';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

setup({ theme: 'bootstrap' });

setup() is idempotent — host styles are adopted on the first call only, and repeat invocations safely re-call register() and configureTheme(). It is SSR-safe and falls back to a <style> tag in older browsers that lack document.adoptedStyleSheets.

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.

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