Getting Started

LyteNyte Grid is an incredibly fast React Data Grid. It offers full extensibility, memory efficiency, and a small bundle size compared to other data grids. This guide walks you through creating an app using LyteNyte Grid.

In this guide, you'll:

1. Install LyteNyte Grid
2. Create a sized container to house LyteNyte Grid
3. Prepare data and define columns for display
4. Enable core features like sorting and resizing

The demo below is the end result of this getting started guide. If you prefer to dive directly into the completed code, fork a working demo by clicking the stackblitz icon in the code frame below.

Installing LyteNyte Grid

LyteNyte Grid comes in two editions:

• Core: Free core functionality available under an Apache 2.0 License
• Enterprise: Advanced version with enterprise-grade features

This guide works with either edition. If you already have a valid LyteNyte Grid license, we recommend installing the Enterprise edition. The enterprise edition may be used without a license but a watermark will appear on the page.

pnpm add @1771technologies/lytenyte-pro

pnpm add @1771technologies/lytenyte-grid-core

pnpm add @1771technologies/sample-data

pnpm create vite

Creating a Sized Container

LyteNyte Grid uses virtualization for maximum performance, with both rows and columns virtualized. This approach requires a sized container—a DOM element that occupies space even without child nodes.

The simplest approach is setting the height style on the element, which we'll do in this guide. For more information about sized containers, see our dedicated Sized Container guide.

First, define your component with a sized container:

export function MyLyteNyteGridComponent() {
  return <div style={{ height: 500 }}></div>;
}

Data and Columns

Next we will import LyteNyteGrid, prepare your data, and define columns to specify what the grid should display.

This demo uses sample data from the @1771technologies/sample-data package, but feel free to use your own dataset.

Importing LyteNyte Grid

LyteNyte Grid has a modular design to minimize bundle size. The minimal setup requires two imports:

• useLyteNyte: A hook that initializes grid state and provides both declarative and imperative interfaces
• LyteNyteGrid: A React renderer that displays data in the DOM

The useLyteNyte hook works similarly to React's useState. The provided value only initializes the grid's state, and changes to the object won't affect the initial value.

import { LyteNyteGrid, useLyteNyte } from "@1771technologies/lytenyte-pro";
 
export function MyLyteNyteGridComponent() {
  const grid = useLyteNyte({
    id: "my-grid", // A unique id is the only required property
 
    // We'll add more properties later
  });
 
  return (
    <div style={{ height: 500 }}>
      <LyteNyteGrid grid={grid} />
    </div>
  );
}

Required CSS

LyteNyte Grid requires specific CSS to function properly. Add the following import somewhere in your application:

import "@1771technologies/lytenyte-pro/css";

The best location is your application's root file—in a Vite template, this would be main.tsx, or in NextJS, the root layout.tsx file.

Providing Data to the Grid

LyteNyte Grid retrieves data from a row data source. While several types exist, the most common is client data, which works when all required data is available (or can be fetched) in the browser.

Here we import the useClientDataSource hook and provide it with our bankData sample data object.

import {
  LyteNyteGrid,
  useLyteNyte,
  useClientDataSource,
} from "@1771technologies/lytenyte-pro";
 
import { bankData } from "@1771technologies/sample-data";
 
export function MyLyteNyteGridComponent() {
  const ds = useClientDataSource({ data: bankData });
 
  const grid = useLyteNyte({
    id: "my-grid",
    rowDataSource: ds,
  });
 
  return (
    <div style={{ height: 500 }}>
      <LyteNyteGrid grid={grid} />
    </div>
  );
}

const grid = useLyteNyte({
  id: "my-grid",
  rowDataSource: { kind: "client", data: bankData },
});

Defining Columns

The minimal column in LyteNyte Grid is an object with an id field. Columns serve two purposes:

1. Declaring what capabilities the grid should enable for columns
2. Providing the source of truth for calculating field data for cells, filters, and pivots

Start by defining your columns:

const columns = [
  { id: "age" },
  { id: "job" },
  { id: "marital" },
  { id: "education" },
  { id: "balance" },
];

Now provide these columns to the grid:

export function MyLyteNyteGridComponent() {
  const ds = useClientDataSource({ data: bankData });
 
  const grid = useLyteNyte({
    id: "my-grid",
    rowDataSource: ds,
    columns: columns,
  });
 
  // Rest of the code remains the same
}

This completes the minimal setup. To enhance functionality, make columns sortable, movable, and resizable by providing a columnBase object that defines default settings for all columns:

export function MyLyteNyteGridComponent() {
  const ds = useClientDataSource({ data: bankData });
 
  const grid = useLyteNyte({
    id: "my-grid",
    rowDataSource: ds,
    columns: columns,
    columnBase: { sortable: true, movable: true, resizable: true },
  });
 
  // Rest of the code remains the same
}

Next Steps

LyteNyte Grid offers many more capabilities beyond what we've covered in this guide. Here are some topics you might want to explore next:

• Row Data Sources: Learn about creating and using various row data sources
• Column Definitions: Discover the full set of column configuration options
• Grid Reactivity: Understand how LyteNyte Grid enables declarative reactivity in your apps
• API Reference: Browse the technical specifications of all interfaces exported by LyteNyte Grid packages