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.

Component registration

The Apex grid package exposes two entry points:

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.

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