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
npm i @revolist/angular-datagridpnpm
pnpm add @revolist/angular-datagridyarn
yarn add @revolist/angular-datagridbun
bun 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:
ts
// 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
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.
ts
// 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 {}ts
// 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