TipoloX / Developer Platform

Build once.
Run everywhere.

Introducing LitGrid Community Edition

A high-performance DataGrid built on Web Components for modern web applications across multiple frameworks. Explore the published Community Edition in the live grid beside this introduction.

Community Editionv1.0.1MIT open source

Built for your stack

  • Web Component
  • React
  • Angular
  • Vue
  • Blazor

LitGrid / Live demo

See the grid in action.

Live

Sample product inventory. Select rows, sort from a column menu, or resize a column to try the real Community Edition grid.

Loading live grid…

Running from the published @tipolox/litgrid-react package.

LitGrid / Community Edition

Built for the way data moves.

A focused set of grid capabilities for working with data in the browser.

01 / Performance

Virtualized by design.

Virtualized rendering built for large client-side datasets.

LitGrid virtualizes rows and columns and maps scrolling across large virtual spaces. The visible viewport stays the focus as you move through the dataset.

  • Rows and columns
  • Mapped scrolling
  • Client-side data
Conceptual diagram: LitGrid maps a large client-side data space to the visible row and column window.

02 / Data interaction

Find the rows you need.

Sort, filter, search, and paginate entirely on the client.

  • Client-side sorting
  • Per-column filtering and Quick Search
  • Client-side pagination

03 / Selection

Work with a selection.

Select rows or cells and copy selections as TSV.

  • Single and multi-row selection
  • Single and multi-cell selection
  • TSV-style clipboard support

04 / Column control

Shape the view.

Resize, reorder, hide, and restore column state.

  • Resize and best-fit sizing
  • Column reorder and visibility
  • Column state and persistence

05 / Interface foundation

Themes and accessible interaction.

Light and dark themes with CSS custom-property customization. Keyboard support, ARIA grid semantics, and accessibility announcements are part of the shipped grid.

Try sorting, selection, and resizing in the live grid

LitGrid / Framework support

One grid architecture.
Multiple frameworks.

Choose your stack, install its public package, and render a first grid.

01 / Install

React

npm package

@tipolox/litgrid-react
Terminal Command
pnpm add @tipolox/litgrid-react

02 / Render a grid

Minimal example

UsersGrid.tsx TSX
import { DataGrid } from '@tipolox/litgrid-react'

export function UsersGrid() {
  return <DataGrid
    data={[{ id: 1, name: 'Ada' }]}
    columns={[
      { key: 'id', header: 'ID' },
      { key: 'name', header: 'Name' }
    ]}
    height={320}
  />
}

The React wrapper includes the Web Component through its package dependencies.

Read the React guide

Open source / Community

Built in the open.

LitGrid Community Edition is MIT licensed. Its source, documentation, issue tracker, and release history are public, so you can inspect the project and report problems directly.

Community Editionv1.0.1MIT License