StarGet Started
On this page

Quick Start

Install LightFastGrid and render a minimal grid in React.

What LightFastGrid is

LightFastGrid is a performance-first JavaScript data grid for large client-side datasets. @lightfastgrid/react is the React package. It depends on @lightfastgrid/core and loads the default theme for you.

Both packages are MIT licensed. This page shows the smallest working React grid. Later guides will cover features such as filtering, selection, and virtualization.

Installation

npm install @lightfastgrid/react

Working grid

Try a working grid with rows, columns, and stable row ids.

Preview loads when visible.

import { LightFastGrid } from "@lightfastgrid/react"; import { columns, getRowId, rows } from "../shared/data"; import "../shared/styles.css"; export function OrdersGrid() {  return (    <div className="docs-example-grid-host">      <LightFastGrid        rows={rows}        columns={columns}        getRowId={getRowId}        columnMenu={{ enabled: false }}        theme={{ base: "dark", accentColor: "#2563eb", density: "standard" }}        accessibility={{ ariaLabel: "Orders" }}      />    </div>  );} 

tsx

LightFastGrid accepts the same rows, columns, and getRowId contract as the core Grid.

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.

If you omit height on LightFastGrid, the adapter uses height: 100%, so the parent must not collapse.

Next steps

Continue with Installation and setup for TypeScript or JavaScript configuration, client rendering, CSS ownership, and supported environments. Then define application data with Rows and columns.

Evaluating the React package? Start from the React data grid overview, browse React examples, or compare measured payloads on Benchmarks and the AG Grid comparison.