Getting Started
Get started with gp-grid in Vue 3
Vue 3
gp-grid provides official Vue 3 bindings through the @gp-grid/vue package.
Quick Start
npm install @gp-grid/vue<script setup lang="ts">
import { Grid, type ColumnDefinition } from "@gp-grid/vue";
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" },
];
</script>
<template>
<div style="width: 800px; height: 400px">
<Grid :columns="columns" :row-data="data" :row-height="36" />
</div>
</template>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