Getting Started

Install the React package:

npm install @lightgrid/react
yarn add @lightgrid/react
pnpm add @lightgrid/react

All grids must provide:

• columns: an array of column definitions
• data: an array of data to render in the grid
• getRowKey: a function which returns a unique ID for each data item. If your data doesn't have one you can combine multiple properties to make a unique value, or generate and insert unique IDs before using the data

import { DataGrid, type GroupedColumns } from '@lightgrid/react'

import '@lightfin/react/dist/styles.css'

type Person = {
  id: string
  name: string
  age: number
}

// If you define columns inside the component function
// it's VERY important to wrap them in useMemo/useState
// so they are not re-calculated unnecessarily
const columns: GroupedColumns<Person> = []

const data: Person[] = []

function App() {
  return (
    <DataGrid<Person>
      columns={columns}
      data={data}
      getRowKey={person => person.id}
    />
  )
}

note

• The Datagrid takes up the size of the parent, make sure it has a width and height
• Don't re-create columns every render. Define them outside or wrap them in useMemo or useState(() => [/* columns */]) (also note the arrow syntax on useState)

Basic grid example

View Source