LightFastGrid

LightFastGrid is a performance-first JavaScript data grid for large client-side datasets. This repository contains the MIT-licensed, framework-agnostic Core package and the official React, Vue, and Angular integrations.

Packages

Package	Use it when
@lightfastgrid/core	You use Vanilla JavaScript or are building a framework integration.
@lightfastgrid/react	You use React 18 or newer. Core is installed automatically.
@lightfastgrid/vue	You use Vue 3.5 or newer. Core is installed automatically.
@lightfastgrid/angular	You use Angular 20.3 or newer. Also install Core.

Install

React:

npm install @lightfastgrid/react

Vue:

npm install @lightfastgrid/vue

Angular:

npm install @lightfastgrid/angular @lightfastgrid/core

Vanilla JavaScript:

npm install @lightfastgrid/core

React quick start

import { LightFastGrid } from "@lightfastgrid/react";

const rows = [
  { id: "order-1001", customer: "Acme", total: 1200 },
  { id: "order-1002", customer: "Globex", total: 850 },
];

const columns = [
  { field: "customer", headerName: "Customer" },
  { field: "total", headerName: "Total" },
];

export function OrdersGrid() {
  return (
    <LightFastGrid
      rows={rows}
      columns={columns}
      getRowId={(row) => String(row.id)}
      height={420}
      accessibility={{ ariaLabel: "Orders" }}
    />
  );
}

The React package loads the default LightFastGrid theme. Give the component a real height, or place it inside a parent with a non-zero height.

Vue quick start

<script setup lang="ts">
import { LightFastGrid } from "@lightfastgrid/vue";

const rows = [
  { id: "order-1001", customer: "Acme", total: 1200 },
  { id: "order-1002", customer: "Globex", total: 850 },
];

const columns = [
  { field: "customer", headerName: "Customer" },
  { field: "total", headerName: "Total" },
];

function getRowId(row: { id?: unknown }): string {
  return String(row.id);
}
</script>

<template>
  <LightFastGrid
    :rows="rows"
    :columns="columns"
    :get-row-id="getRowId"
    :height="420"
    :accessibility="{ ariaLabel: 'Orders' }"
  />
</template>

The Vue package loads the default LightFastGrid theme. Give the component a real height, or place it inside a parent with a non-zero height. Requires Vue 3.5 or newer.

Angular quick start

import { Component } from "@angular/core";
import { LightFastGridComponent } from "@lightfastgrid/angular";
import type { ColumnDef, RowData } from "@lightfastgrid/core";
import "@lightfastgrid/core/themes/default.css";

type Order = { id: string; customer: string; total: number };

@Component({
  selector: "orders-page",
  standalone: true,
  imports: [LightFastGridComponent],
  template: `
    <light-fast-grid
      [rows]="rows"
      [columns]="columns"
      [getRowId]="getRowId"
      [height]="420"
      [accessibility]="{ ariaLabel: 'Orders' }"
    />
  `,
  styles: [
    `
      :host {
        display: block;
        height: 420px;
      }
    `,
  ],
})
export class OrdersPage {
  readonly rows: Order[] = [
    { id: "order-1001", customer: "Acme", total: 1200 },
    { id: "order-1002", customer: "Globex", total: 850 },
  ];
  readonly columns: ColumnDef<RowData>[] = [
    { field: "customer", headerName: "Customer" },
    { field: "total", headerName: "Total" },
  ];
  readonly getRowId = (row: RowData) => String(row["id"]);
}

Requires Angular 20.3 or newer. Import the Core theme CSS once in the app.

Vanilla JavaScript quick start

<div id="orders-grid"></div>

#orders-grid {
  height: 420px;
}

import { Grid } from "@lightfastgrid/core";
import "@lightfastgrid/core/themes/default.css";

const host = document.getElementById("orders-grid");

if (!(host instanceof HTMLElement)) {
  throw new Error("Missing #orders-grid");
}

const grid = new Grid({
  rows: [
    { id: "order-1001", customer: "Acme", total: 1200 },
    { id: "order-1002", customer: "Globex", total: 850 },
  ],
  columns: [
    { field: "customer", headerName: "Customer" },
    { field: "total", headerName: "Total" },
  ],
  getRowId: (row) => String(row.id),
  accessibility: { ariaLabel: "Orders" },
});

grid.mount(host);

export function disposeOrdersGrid() {
  grid.destroy();
}

Call disposeOrdersGrid() when the application permanently removes the grid host view.

Highlights

• Virtualized rows and columns
• Sorting, column filters, and Quick Search
• Row and column selection
• Cell editing, menus, actions, and accessible overlays
• Column sizing, ordering, visibility, pinning, and grouped headers
• Pagination and CSV export
• Keyboard navigation and WAI-ARIA grid semantics
• Worker-assisted execution for eligible sort, filter, search, and CSV work

Documentation

• React documentation
• Vue documentation
• Angular documentation
• Vanilla JavaScript documentation
• Benchmarks and reproducible evidence
• LightFastGrid website
• Public release process

Playgrounds

The React, Vue, Angular, and Vanilla playgrounds load static demo JSON from schemas/ (1k, 10k, and 100k). The default is 1,000 rows. Regenerate with pnpm generate:grid-demo-datasets.

Playground	Command
React	pnpm --filter playground-react dev
Vue	pnpm --filter playground-vue dev
Angular	pnpm --filter playground-angular dev
Vanilla JavaScript	pnpm --filter playground-javascript dev

Package-specific setup details are available in packages/react/README.md, packages/vue/README.md, packages/angular/README.md, and packages/core/README.md.

License

LightFastGrid Core and the React, Vue, and Angular integrations are available under the MIT License.