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/reactimport { 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>
);
}Features
All features are included out of the box — no enterprise tiers, no feature gating.
- Column Dragging — reorder columns by dragging headers
- Row Dragging — reorder rows with drag handle or entire row
- Sorting — single and multi-column sorting
- Filtering — column filtering with operators
- Selection — cell and range selection
- Editing — inline editing with fill handle
- Custom Renderers — custom cell, edit, and header renderers
- Highlighting — row, column, and cell highlighting
- Live Data — real-time data mutations with streaming updates