https://github.com/GioPat/gp-grid
High performance, cross framework typescript library for managing web ui Grids
https://github.com/GioPat/gp-grid
angular grid reactjs table typescript vuejs
Last synced: 10 days ago
JSON representation
High performance, cross framework typescript library for managing web ui Grids
- Host: GitHub
- URL: https://github.com/GioPat/gp-grid
- Owner: GioPat
- License: apache-2.0
- Created: 2025-10-02T08:59:20.000Z (8 months ago)
- Default Branch: master
- Last Pushed: 2026-05-24T12:26:41.000Z (18 days ago)
- Last Synced: 2026-05-24T13:12:39.614Z (18 days ago)
- Topics: angular, grid, reactjs, table, typescript, vuejs
- Language: TypeScript
- Homepage: https://www.gp-grid.io
- Size: 1.46 MB
- Stars: 33
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Agents: AGENTS.md
Awesome Lists containing this project
- fucking-awesome-angular - gp-grid - Data grid library built with a modular architecture that cleanly separates core logic from framework integrations to efficiently handle massive datasets with millions of rows. (Third Party Components / Data Grids)
- awesome-angular - gp-grid - Data grid library built with a modular architecture that cleanly separates core logic from framework integrations to efficiently handle massive datasets with millions of rows. (Third Party Components / Data Grids)
README
# gp-grid 🏁 🏎️
### `@gp-grid/core` quality
[](https://sonarcloud.io/summary/new_code?id=giopat_gp-grid_core) [](https://sonarcloud.io/summary/new_code?id=giopat_gp-grid_core) [](https://sonarcloud.io/summary/new_code?id=giopat_gp-grid_core) [](https://sonarcloud.io/summary/new_code?id=giopat_gp-grid_core) [](https://sonarcloud.io/summary/new_code?id=giopat_gp-grid_core)
A high-performance, TypeScript-first data grid library designed to handle massive datasets (millions of rows) with ease. Built with a modular architecture that separates core logic from framework implementations.
## Table of Contents
- [Overview](#overview)
- [Key Features](#key-features)
- [Packages](#packages)
- [Quick Start](#quick-start)
- [Donations](#donations)
## Overview
Demo and documentation available at: [https://www.gp-grid.io/](https://www.gp-grid.io/)
**gp-grid** is built on three core principles:
### 1. Slot-Based Virtual Scrolling
Instead of rendering all rows, the grid maintains a pool of reusable "slots" (DOM containers) that are recycled as users scroll. This approach:
- Renders only visible rows plus a small overscan buffer
- Recycles DOM elements instead of creating/destroying them
- Maintains consistent performance regardless of dataset size
### 2. Instruction-Based Architecture
The core emits declarative **instructions** (commands) that describe what the UI should do, rather than manipulating the DOM directly. This pattern:
- Keeps the core framework-agnostic (works with React, Vue, Angular)
- Enables batched updates for optimal rendering performance
- Provides a clean separation between logic and presentation
### 3. DataSource Abstraction
Data fetching is abstracted through a `DataSource` interface, supporting both:
- **Client-side**: All data loaded in memory, with local sorting/filtering
- **Server-side**: Data fetched on-demand from an API with server-side operations
## Key Features
- **Virtual Scrolling**: Efficiently handles millions of rows through slot-based recycling
- **Cell Selection**: Single cell, range selection, Shift+click extend, Ctrl+click toggle
- **Multi-Column Sorting**: Click to sort, Shift+click for multi-column sort
- **Column Filtering**: Built-in filter row with debounced input
- **Cell Editing**: Double-click or press Enter to edit, with custom editor support
- **Fill Handle**: Excel-like drag-to-fill for editable cells
- **Keyboard Navigation**: Arrow keys, Tab, Enter, Escape, Ctrl+A, Ctrl+C, Ctrl+V
- **Custom Renderers**: Registry-based cell, edit, and header renderers
- **Dark Mode**: Built-in dark theme support
- **TypeScript**: Full type safety with exported types
## Packages
| Package | Description |
| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
| [**@gp-grid/core**](./packages/core/README.md) | Framework-agnostic core library with virtual scrolling, data sources, and instruction-based architecture |
| [**@gp-grid/react**](./packages/react/README.md) | Official React implementation with full feature support |
| [**@gp-grid/vue**](./packages/vue/README.md) | Official Vue3 implementation with full feature support |
| [**@gp-grid/angular**](./packages/angular/README.md) | Official Angular implementation with full feature support |
## Quick Start
### React
```bash
pnpm add @gp-grid/react
```
```tsx
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: "Alice", email: "alice@example.com" },
{ id: 2, name: "Bob", email: "bob@example.com" },
];
function App() {
return (
);
}
```
### Core (for custom framework adapters)
```bash
pnpm add @gp-grid/core
```
See the [@gp-grid/core README](./packages/core/README.md) for detailed documentation on creating custom framework adapters.
## Donations
Keeping this library requires effort and passion, I'm a full time engineer employed on other project and I'm trying my best to keep this work free! For all the features.
If you think this project helped you achieve your goals, it's hopefully worth a beer! 🍻
[Support the project](https://www.gp-grid.io/support)
