Getting Started
Get started with gp-grid in Angular
Angular
gp-grid provides official Angular bindings through the @gp-grid/angular package.
Quick Start
npm install @gp-grid/angularimport { Component } from "@angular/core";
import { GridComponent, type ColumnDefinition } from "@gp-grid/angular";
@Component({
selector: "app-my-grid",
standalone: true,
imports: [GridComponent],
template: `
<div style="width: 800px; height: 400px">
<gp-grid [columns]="columns" [rowData]="data" [rowHeight]="36" />
</div>
`,
})
export class MyGridComponent {
columns: ColumnDefinition[] = [
{ field: "id", cellDataType: "number", width: 80, headerName: "ID" },
{ field: "name", cellDataType: "text", width: 150, headerName: "Name" },
{ field: "email", cellDataType: "text", width: 250, headerName: "Email" },
];
data = [
{ id: 1, name: "Giovanni", email: "giovanni@example.com" },
{ id: 2, name: "Luca", email: "luca@example.com" },
];
}