LITGRID COMMUNITY EDITION
Open-source Angular DataGrid
LitGrid brings row and column virtualization to Angular through an integration backed by its Web Component-based core. Community Edition is MIT licensed. The Angular package includes the Web Component dependency, so Angular applications only need to install @tipolox/litgrid-angular.
Angular · Web Components · TypeScript · MIT
LitGrid / Live example
See LitGrid in action
Explore the real LitGrid component 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.
The TipoloX site renders this showcase through the React integration. Angular uses the same Web Component-based LitGrid core.
Architecture / Angular
Why use LitGrid in Angular?
Use the documented Angular component while LitGrid renders through its shared Web Component core.
Angular-facing integration
Import the standalone DataGridComponent and use <litgrid-data-grid> in an Angular template.
One package to install
@tipolox/litgrid-angular includes the Web Component dependency.
Shared Web Component core
The Angular integration builds on the same LitGrid core used by the other framework integrations.
Useful for data-heavy UI
Row and column virtualization work alongside sorting, filtering, selection, keyboard navigation, and column controls.
Get started / Angular
Install LitGrid for Angular
Install the Angular package, then import its standalone component and bind rows and columns in your template.
01 / Install
Add the Angular package
Terminal
pnpm add @tipolox/litgrid-angularThe Angular package includes the Web Component dependency, so Angular applications only need to install @tipolox/litgrid-angular.
02 / Render
Set up a first grid
users-grid.component.ts
import { Component } from '@angular/core'
import { DataGridComponent } from '@tipolox/litgrid-angular'
@Component({
standalone: true,
imports: [DataGridComponent],
template: `<litgrid-data-grid
[data]="users" [columns]="columns" [height]="320"
/>`
})
export class UsersGridComponent {
readonly users = [{ id: 1, name: 'Ada' }]
readonly columns = [
{ key: 'id', header: 'ID' },
{ key: 'name', header: 'Name' }
]
}LitGrid / Capabilities
Built for data-heavy Angular applications
LitGrid combines virtualized rendering with controls for working with client-side data in Angular interfaces.
01 / Capability
Row and column virtualization
Render the visible part of a client-side dataset as users scroll 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.
LitGrid / Integrations
One core, multiple frameworks
LitGrid is built around a Web Component core with integrations for React, Angular, Vue, and Blazor. Use the Angular package in an Angular application or choose the integration that fits your stack.
- 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 Angular guide.
View Angular documentation