Basic Usage

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

Basic Usage

Basic Usage

Minimal Example

Next Steps

On this page