Angular Data Grid
This page covers the key concepts of RevoGrid - a high-performance, customizable Angular Table and Angular Data Grid for managing large datasets.
INFO
This tutorial assumes that an Angular project has already been set up. If not, please refer to the official documentation Angular Installation
Install your Angular Data Grid
Install RevoGrid for Angular using the following command:
npm i @revolist/angular-datagridpnpm add @revolist/angular-datagridyarn add @revolist/angular-datagridbun add @revolist/angular-datagridStandalone Components
Now you can import and reference your components in your consuming application in the same way you would with any other standalone Angular components:
// app.component.ts
import { Component } from "@angular/core";
import { RevoGrid, Template } from "@revolist/angular-datagrid";
@Component({
selector: "app-root",
standalone: true,
imports: [RevoGrid],
template: `<revo-grid
style="height: 200px; width: 200px"
[columns]="columns"
[source]="source"
></revo-grid>`
})
export class AppComponent {
source = [
{
name: "1",
details: "Item 1",
},
{
name: "2",
details: "Item 2",
},
];
columns = [
{
prop: "name",
name: "First",
},
{
prop: "details",
name: "Second",
},
];
}Example
Dynamic Component Usage
When using RevoGrid with Angular 19+, there are known edge cases with dynamically loading or using the component in certain scenarios. The grid frame may render, but columns and source data may not display properly.
Known Symptoms:
- Columns and source data might not render when the component is used dynamically.
- Plugins and readonly properties may stop working in some dynamic scenarios.
- Silent errors might occur without any visible error messages.
Related GitHub Discussion: GitHub Discussion #798
Helpful Resources:
If you encounter issues with dynamic component usage, please report them on GitHub Issues with details about your Angular version and setup.
Modules
Import your component library into your component. You must distribute your components through a primary NgModule to use your components in a standalone component.
// app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { RevoGrid } from "@revolist/angular-datagrid";
import { AppComponent } from "./app.component";
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, RevoGrid],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}// app.component.ts
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `<revo-grid [source]='source' [columns]='columns'/>`,
})
export class AppComponent {
source = [
{
name: "1",
details: "Item 1",
},
{
name: "2",
details: "Item 2",
},
];
columns = [
{
prop: "name",
name: "A",
},
{
prop: "details",
name: "B",
},
];
}Example