LITGRID COMMUNITY EDITION
Open-source Web Component DataGrid
LitGrid is an MIT-licensed DataGrid built on a Web Component core. It supports row and column virtualization, with the same core available through React, Angular, Vue, and Blazor integrations.
Web Components · React · Angular · Vue · Blazor · MIT
LitGrid / Live example
See LitGrid in action
This interactive product inventory uses the real LitGrid component through the published React integration used by the TipoloX site. Try selecting rows, sorting from a column menu, or resizing a column.
Live grid
Sample product inventory
Generated sample data for exploring LitGrid interactions.
Shown through @tipolox/litgrid-react, the React integration used by this site. LitGrid's framework integrations share the same Web Component-based core.
Architecture / Web Components
Why use a Web Component DataGrid?
A Web Component core gives LitGrid a browser-standard boundary for data-heavy interfaces, while its integrations let applications use the grid from their own frontend stack.
Standards-based core
LitGrid exposes its grid as a custom element, built around browser platform concepts instead of one application framework.
Works across frontend stacks
Use the custom element directly, or use LitGrid's React, Angular, Vue, and Blazor integrations within those applications.
Shared foundation
The integrations build on a common Web Component core, reducing the need to maintain a separate grid implementation for each stack.
A useful long-term boundary
In applications whose frontend framework changes over time, a framework-neutral grid core can remain a useful integration boundary.
Get started / Web Component
Install LitGrid
Install the published Web Component package, register the custom element, then assign rows and columns as properties.
01 / Install
Add the Web Component package
Terminal
pnpm add @tipolox/litgrid-webThe package registers the yc-grid custom element when imported.
02 / Render
Set up a first grid
index.html
<yc-grid id="users"></yc-grid>main.ts
import '@tipolox/litgrid-web'
import type { DataGridElement } from '@tipolox/litgrid-web'
const grid = document.querySelector('#users') as DataGridElement
grid.data = [{ id: 1, name: 'Ada' }]
grid.columns = [
{ key: 'id', header: 'ID' },
{ key: 'name', header: 'Name' }
]
grid.viewportHeight = 320LitGrid / Capabilities
Built for data-heavy interfaces
LitGrid combines virtualized rendering with practical controls for exploring and organizing data in the browser.
01 / Capability
Virtualized views
Row and column virtualization keep rendering focused on the visible part of a client-side dataset.
02 / Capability
Data operations
Sort, filter, and paginate rows in the browser.
03 / Capability
Grid interaction
Select rows and navigate the grid with keyboard support.
04 / Capability
Column control
Resize, reorder, and show or hide columns to shape the view.
05 / Capability
Column state
Save and restore column state when users return to a view.
LitGrid / Integrations
One core, multiple frameworks
Use the Web Component directly, or integrate LitGrid through the framework adapter that fits your application. Each option builds on the Web Component-based core.
- Web ComponentsCustom element
- ReactIntegration
- AngularIntegration
- VueIntegration
- BlazorIntegration
Explore LitGrid
Try the grid in your browser.
Use the live demo or review the open-source project.