LITGRID COMMUNITY EDITION
Open-source DataGrid for modern web applications
LitGrid Community Edition is an MIT-licensed open-source DataGrid with row and column virtualization. Built around a Web Component core, it can be used directly or through React, Angular, Vue, and Blazor integrations.
MIT · Web Components · React · Angular · Vue · Blazor
LitGrid / Live example
See LitGrid in action
This is the real LitGrid component, rendered on the TipoloX site through its React integration. Select rows, sort from a column menu, or resize columns. The framework integrations share LitGrid's Web Component-based core.
Live grid
Sample product inventory
Generated sample data for exploring grid interactions.
Shown through @tipolox/litgrid-react, the integration used by this site.
Community Edition / Open source
Why choose an open-source DataGrid?
The license and available source give developers a clear starting point for evaluating a grid and deciding how it fits their project.
Inspect the source
Review how the grid is built and understand the code your application integrates.
Work under the MIT license
LitGrid Community Edition is available under the terms of the MIT license.
Choose your frontend stack
Use the Web Component directly or choose an integration for React, Angular, Vue, or Blazor.
Follow the project
Open source lets you study the project, contribute, and plan around its published implementation.
LitGrid / Capabilities
Core grid capabilities
Virtualized rendering sits alongside the controls needed to explore and organize data.
Virtualized views
Row and column virtualization focus rendering on the visible part of a dataset.
Data operations
Sort, filter, and paginate rows in the grid.
Grid interaction
Select rows and move through the grid with keyboard navigation.
Column controls
Size, reorder, and show or hide columns to shape the view.
State persistence
Save and restore column state for a returning view.
Custom cells
Use documented custom cell rendering to present data in a suitable format.
LitGrid / Integration paths
Choose your integration
Start with your application stack. Use the custom element directly, or follow a framework-specific path built on the same core.
Direct custom element
Web Components
Use LitGrid directly as a custom element when you want the browser-native integration path.
React component
React
Use the React DataGrid integration in a React application.
Angular component wrapper
Angular
Use the Angular package and its documented DataGrid component wrapper.
Vue component
Vue
Use the Vue package and its documented DataGrid component in a Vue application.
Blazor component · NuGet
Blazor
Use the Blazor package and DataGrid<TItem> component without Node.js setup.
LitGrid / Architecture
One Web Component core
LitGrid uses a shared Web Component-based rendering and grid foundation. The React, Angular, Vue, and Blazor packages integrate that core into their respective applications. You can also use the Web Component directly.
This structure means LitGrid does not need a completely separate grid implementation for every frontend stack.
Shared foundation
Integration paths
- Direct Web Component
- React
- Angular
- Vue
- Blazor
LitGrid / Packages
Get started with your stack
Pick one package, then follow its integration page for setup and a first grid.
Explore LitGrid
Try the open-source DataGrid
Explore the live grid, then choose the integration that fits your application.