gp-grid-logo

Getting Started

Get started with gp-grid in React

React

gp-grid provides official React bindings through the gp-grid-react package.

Quick Start

npm install gp-grid-react
import { Grid, type ColumnDefinition } from "gp-grid-react";

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

const data = [
  { id: 1, name: "Giovanni", email: "giovanni@example.com" },
  { id: 2, name: "Luca", email: "luca@example.com" },
];

function App() {
  return (
    <div style={{ width: "800px", height: "400px" }}>
      <Grid columns={columns} rowData={data} rowHeight={36} />
    </div>
  );
}

Next Steps

On this page