Getting Started (Angular)

Get started with the official @gp-grid/angular package and learn how to render your first virtualized table inside an Angular app within just a few minutes.

gp-grid provides official Angular bindings through the @gp-grid/angular package.

Angular docs are being written. While this section fills in, the React and Vue docs cover the same conceptual model — the API surface is identical across all three bindings.

Quick Start

npm install @gp-grid/angular

my-grid.component.ts

import { 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" },
  ];
}

Getting Started

Quick Start

Next Steps

Installation

Basic Usage

Examples

API Reference