LITGRID COMMUNITY EDITION

Open-source virtualized React DataGrid

LitGrid brings row and column virtualization to React through an integration backed by its Web Component-based core. Community Edition is MIT licensed. The React package includes the Web Component dependency, so React applications only need to install @tipolox/litgrid-react.

View live demo View on GitHub

React · Web Components · TypeScript · MIT

LitGrid / Live example

See LitGrid in action

Explore the real LitGrid React integration using a sample product inventory. Try selecting rows, sorting from a column menu, or resizing a column.

Live grid

Sample product inventory

Generated sample data for exploring LitGrid interactions.

Loading live grid…

Shown through @tipolox/litgrid-react, the React integration used by this site.

Open full demo View source on GitHub

Architecture / React

Why use LitGrid in React?

Use a React-facing component with LitGrid's shared Web Component core underneath.

React-facing component

Use the DataGrid component directly in a React application.

One package to install

@tipolox/litgrid-react includes the Web Component dependency.

Shared Web Component core

The React integration builds on the same LitGrid core used by the other framework integrations.

Useful for data-heavy UI

Row and column virtualization work alongside selection, sorting, filtering, and column controls.

Get started / React

Install LitGrid for React

Install the React package, then render DataGrid with rows and columns. Its Web Component dependency is included; React applications only need the React package.

01 / Install

Add the React package

Terminal

pnpm add @tipolox/litgrid-react

The React package includes the Web Component dependency.

View React documentation

02 / Render

Set up a first grid

UsersGrid.tsx

import { DataGrid } from '@tipolox/litgrid-react'

const data = [
  { id: 1, name: 'Ada' },
  { id: 2, name: 'Grace' }
]

export function UsersGrid() {
  return (
    <DataGrid
      data={data}
      columns={[
        { key: 'id', header: 'ID', width: 80 },
        { key: 'name', header: 'Name', width: 180 }
      ]}
      config={{ selection: { mode: 'multi-row', checkboxes: true } }}
      height={400}
    />
  )
}

LitGrid / Capabilities

Built for data-heavy React applications

LitGrid combines virtualized rendering with controls for working with client-side data in React interfaces.

01 / Capability

Row and column virtualization

Render the visible part of a client-side dataset while scrolling through rows and columns.

02 / Capability

Sorting, filtering, pagination

Explore and organize rows with client-side data operations.

03 / Capability

Selection and keyboard navigation

Select grid content and navigate the interface with a keyboard.

04 / Capability

Column controls

Resize, reorder, and show or hide columns to shape a view.

05 / Capability

State persistence

Save and restore column state when returning to a view.

06 / Capability

Custom cell rendering

Customize cell content for the data presented in a grid view.

LitGrid / Integrations

One core, multiple frameworks

LitGrid is built around a Web Component core with integrations for React, Angular, Vue, and Blazor. Use the custom element directly or choose the integration that fits your application.

Web ComponentsCustom element
ReactIntegration
AngularIntegration
VueIntegration
BlazorIntegration

Explore LitGrid

Try the grid in your browser.

Use the live demo, review the source, or follow the React guide.

View React documentation

Try the live demo View LitGrid on GitHub