Quick Start
Install LightFastGrid and render a minimal grid in Vanilla JavaScript.
What LightFastGrid is
LightFastGrid is a performance-first JavaScript data grid for large client-side
datasets. @lightfastgrid/core owns the engine, renderer, and public grid API.
This page uses that core package directly.
The package is MIT licensed. This page shows the smallest working Vanilla JavaScript grid. Later guides will cover features such as filtering, selection, and virtualization.
Installation
npm install @lightfastgrid/coreImport the published default theme wherever you create a grid:
import "@lightfastgrid/core/themes/default.css";Working grid
Try a working grid with rows, columns, and stable row ids.
Preview loads when visible.
import { Grid } from "@lightfastgrid/core";import "@lightfastgrid/core/themes/default.css"; import { columns, getRowId, rows } from "../shared/data";import "../shared/styles.css"; /** * @param {HTMLElement} host * @returns {() => void} */export function mountOrdersGrid(host) { if (!(host instanceof HTMLElement)) { throw new Error("Orders grid host must be an HTMLElement"); } const grid = new Grid({ columns, rows, getRowId, columnMenu: { enabled: false }, theme: { base: "dark", accentColor: "#2563eb", density: "standard" }, accessibility: { ariaLabel: "Orders" }, }); grid.mount(host); return () => { grid.destroy(); };} const pageHost = document.getElementById("orders-grid");const disposePageGrid = pageHost instanceof HTMLElement ? mountOrdersGrid(pageHost) : undefined; export function disposeOrdersGrid() { if (disposePageGrid) { disposePageGrid(); }} js
<!doctype html><html lang="en" style="background: #0b0f18; color-scheme: dark"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Orders</title> <style> html, body, #orders-grid { height: 100%; margin: 0; background: #0b0f18; color-scheme: dark; } </style> </head> <body style="margin: 0; background: #0b0f18; color: #f5f7fa; color-scheme: dark"> <div id="orders-grid" class="docs-example-grid-host"></div> <script type="module" src="/vanilla/main.js"></script> </body></html> html
Subscribe to events with grid.on(...) before mount() when you need the
synchronous grid:mounted notification. Retain each unsubscribe function and
call destroy() when the host is removed. The example exposes
disposeOrdersGrid() for that teardown.
getRowId must return a unique, stable id for every row. Do not derive it from
the row's current position because sorting, filtering, and updates can move
that row.
Container sizing
The grid fills its parent. The live preview gives that host a real height.
The host element needs an explicit height. The example uses
.docs-example-grid-host.
Next steps
Continue with Installation and setup for TypeScript or JavaScript configuration, module delivery, CSS ownership, and supported environments. Then define application data with Rows and columns.
Evaluating the Vanilla package? Start from the JavaScript data grid overview, browse Vanilla examples, or compare measured payloads on Benchmarks and the AG Grid comparison.