Basic Usage
Walk through the fundamentals of using gp-grid in Angular, from defining columns and providing data to wiring up the Grid component in your first page.
This page is being written. The React Basic Usage and Vue Basic Usage pages cover the same concepts — props, column definitions, and data types are identical across bindings.
Don't forget to import the stylesheet in your global styles.css:
@import "@gp-grid/angular/dist/styles.css";Minimal Example
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: 100%; 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: 200, headerName: "Name" },
];
data = [
{ id: 1, name: "Giovanni Rossi" },
{ id: 2, name: "Luca Verdi" },
];
}Next Steps
- Explore the Examples
- See the API Reference
Installation
Install the @gp-grid/angular package, import the required stylesheet, and prepare your Angular project to use the high-performance gp-grid component today.
Examples
Browse interactive Angular examples and copy-paste code samples that demonstrate how to wire up gp-grid features inside a typical Angular application.