{"id":50372413,"url":"https://github.com/GioPat/gp-grid","last_synced_at":"2026-06-01T10:00:41.828Z","repository":{"id":329242608,"uuid":"1068355313","full_name":"GioPat/gp-grid","owner":"GioPat","description":"High performance, cross framework typescript library for managing web ui Grids","archived":false,"fork":false,"pushed_at":"2026-05-24T12:26:41.000Z","size":1527,"stargazers_count":33,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-05-24T13:12:39.614Z","etag":null,"topics":["angular","grid","reactjs","table","typescript","vuejs"],"latest_commit_sha":null,"homepage":"https://www.gp-grid.io","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GioPat.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null},"funding":{"github":["GioPat"],"custom":["https://www.paypal.com/donate/?hosted_button_id=XCNMG6BR4ZMLY"]}},"created_at":"2025-10-02T08:59:20.000Z","updated_at":"2026-05-24T12:26:36.000Z","dependencies_parsed_at":"2026-05-07T15:01:30.795Z","dependency_job_id":null,"html_url":"https://github.com/GioPat/gp-grid","commit_stats":null,"previous_names":["giopat/gp-grid"],"tags_count":55,"template":false,"template_full_name":null,"purl":"pkg:github/GioPat/gp-grid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GioPat%2Fgp-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GioPat%2Fgp-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GioPat%2Fgp-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GioPat%2Fgp-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GioPat","download_url":"https://codeload.github.com/GioPat/gp-grid/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GioPat%2Fgp-grid/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33769492,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-01T02:00:06.963Z","response_time":115,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","grid","reactjs","table","typescript","vuejs"],"created_at":"2026-05-30T08:00:26.073Z","updated_at":"2026-06-01T10:00:41.820Z","avatar_url":"https://github.com/GioPat.png","language":"TypeScript","funding_links":["https://github.com/sponsors/GioPat","https://www.paypal.com/donate/?hosted_button_id=XCNMG6BR4ZMLY"],"categories":["Third Party Components"],"sub_categories":["Data Grids"],"readme":"# gp-grid 🏁 🏎️\n\n\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://www.gp-grid.io\"\u003e\n        \u003cpicture\u003e\n        \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://www.gp-grid.io/logo-light.svg\"/\u003e\n        \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://www.gp-grid.io/logo-dark.svg\"/\u003e\n        \u003cimg width=\"50%\" alt=\"gp-grid Logo\" src=\"https://www.gp-grid.io/logo-dark.svg\"/\u003e\n        \u003c/picture\u003e\n    \u003c/a\u003e\n    \u003cdiv align=\"center\"\u003e\n     Logo by \u003ca href=\"https://github.com/camillo18tre\"\u003ecamillo18tre ❤️\u003c/a\u003e\n      \u003ch4\u003e\u003ca href=\"https://www.gp-grid.io/\"\u003e🎮 Demo\u003c/a\u003e • \u003ca href=\"https://www.gp-grid.io/docs\"\u003e📖 Documentation\u003c/a\u003e • \u003ca href=\"https://deepwiki.com/GioPat/gp-grid\"\u003e\u003cimg src=\"https://deepwiki.com/badge.svg\" alt=\"Ask DeepWiki\"/\u003e\u003c/a\u003e\u003c/h4\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n### `@gp-grid/core` quality\n\n[![Reliability Rating](https://sonarcloud.io/api/project_badges/measure?project=giopat_gp-grid_core\u0026metric=reliability_rating)](https://sonarcloud.io/summary/new_code?id=giopat_gp-grid_core) [![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=giopat_gp-grid_core\u0026metric=security_rating)](https://sonarcloud.io/summary/new_code?id=giopat_gp-grid_core) [![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=giopat_gp-grid_core\u0026metric=sqale_rating)](https://sonarcloud.io/summary/new_code?id=giopat_gp-grid_core) [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=giopat_gp-grid_core\u0026metric=coverage)](https://sonarcloud.io/summary/new_code?id=giopat_gp-grid_core) [![Code Smells](https://sonarcloud.io/api/project_badges/measure?project=giopat_gp-grid_core\u0026metric=code_smells)](https://sonarcloud.io/summary/new_code?id=giopat_gp-grid_core)\n\n\u003c/div\u003e\n\nA 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.\n\n## Table of Contents\n\n- [Overview](#overview)\n- [Key Features](#key-features)\n- [Packages](#packages)\n- [Quick Start](#quick-start)\n- [Donations](#donations)\n\n## Overview\n\nDemo and documentation available at: [https://www.gp-grid.io/](https://www.gp-grid.io/)\n\n**gp-grid** is built on three core principles:\n\n### 1. Slot-Based Virtual Scrolling\n\nInstead of rendering all rows, the grid maintains a pool of reusable \"slots\" (DOM containers) that are recycled as users scroll. This approach:\n\n- Renders only visible rows plus a small overscan buffer\n- Recycles DOM elements instead of creating/destroying them\n- Maintains consistent performance regardless of dataset size\n\n### 2. Instruction-Based Architecture\n\nThe core emits declarative **instructions** (commands) that describe what the UI should do, rather than manipulating the DOM directly. This pattern:\n\n- Keeps the core framework-agnostic (works with React, Vue, Angular)\n- Enables batched updates for optimal rendering performance\n- Provides a clean separation between logic and presentation\n\n### 3. DataSource Abstraction\n\nData fetching is abstracted through a `DataSource` interface, supporting both:\n\n- **Client-side**: All data loaded in memory, with local sorting/filtering\n- **Server-side**: Data fetched on-demand from an API with server-side operations\n\n## Key Features\n\n- **Virtual Scrolling**: Efficiently handles millions of rows through slot-based recycling\n- **Cell Selection**: Single cell, range selection, Shift+click extend, Ctrl+click toggle\n- **Multi-Column Sorting**: Click to sort, Shift+click for multi-column sort\n- **Column Filtering**: Built-in filter row with debounced input\n- **Cell Editing**: Double-click or press Enter to edit, with custom editor support\n- **Fill Handle**: Excel-like drag-to-fill for editable cells\n- **Keyboard Navigation**: Arrow keys, Tab, Enter, Escape, Ctrl+A, Ctrl+C, Ctrl+V\n- **Custom Renderers**: Registry-based cell, edit, and header renderers\n- **Dark Mode**: Built-in dark theme support\n- **TypeScript**: Full type safety with exported types\n\n## Packages\n\n| Package                                         | Description                                                                                              |\n| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------- |\n| [**@gp-grid/core**](./packages/core/README.md)   | Framework-agnostic core library with virtual scrolling, data sources, and instruction-based architecture |\n| [**@gp-grid/react**](./packages/react/README.md) | Official React implementation with full feature support                                                  |\n| [**@gp-grid/vue**](./packages/vue/README.md)     | Official Vue3 implementation with full feature support                                                   |\n| [**@gp-grid/angular**](./packages/angular/README.md)     | Official Angular implementation with full feature support                                                   |\n\n## Quick Start\n\n### React\n\n```bash\npnpm add @gp-grid/react\n```\n\n```tsx\nimport { Grid, type ColumnDefinition } from \"@gp-grid/react\";\n\nconst columns: ColumnDefinition[] = [\n  { field: \"id\", cellDataType: \"number\", width: 80, headerName: \"ID\" },\n  { field: \"name\", cellDataType: \"text\", width: 150, headerName: \"Name\" },\n  { field: \"email\", cellDataType: \"text\", width: 250, headerName: \"Email\" },\n];\n\nconst data = [\n  { id: 1, name: \"Alice\", email: \"alice@example.com\" },\n  { id: 2, name: \"Bob\", email: \"bob@example.com\" },\n];\n\nfunction App() {\n  return (\n    \u003cdiv style={{ width: \"800px\", height: \"400px\" }}\u003e\n      \u003cGrid columns={columns} rowData={data} rowHeight={36} /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Core (for custom framework adapters)\n\n```bash\npnpm add @gp-grid/core\n```\n\nSee the [@gp-grid/core README](./packages/core/README.md) for detailed documentation on creating custom framework adapters.\n\n## Donations\n\nKeeping 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.\n\nIf you think this project helped you achieve your goals, it's hopefully worth a beer! 🍻\n\n[Support the project](https://www.gp-grid.io/support)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGioPat%2Fgp-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FGioPat%2Fgp-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGioPat%2Fgp-grid/lists"}