TipoloX / Developer Platform
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.
Built for your stack
LitGrid / Live demo
Sample product inventory. Select rows, sort from a column menu, or resize a column to try the real Community Edition grid.
Running from the published @tipolox/litgrid-react package.
LitGrid / Community Edition
A focused set of grid capabilities for working with data in the browser.
01 / Performance
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.
02 / Data interaction
Sort, filter, search, and paginate entirely on the client.
03 / Selection
Select rows or cells and copy selections as TSV.
04 / Column control
Resize, reorder, hide, and restore column state.
05 / Interface foundation
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 gridLitGrid / Framework support
Choose your stack, install its public package, and render a first grid.
01 / Install
npm package
@tipolox/litgrid-reactpnpm add @tipolox/litgrid-react02 / Render a grid
Minimal example
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 guideOpen source / Community
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.