# glideapps/glide-data-grid

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/glideapps-glide-data-grid).**

5,237 stars · 411 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/glideapps/glide-data-grid
- Homepage: https://grid.glideapps.com
- awesome-repositories: https://awesome-repositories.com/repository/glideapps-glide-data-grid.md

## Topics

`accessible` `data` `datagrid` `grid` `javascript` `react` `reactjs` `table` `typescript`

## Description

Glide Data Grid is a virtualized data grid for React and TypeScript that uses the HTML Canvas API to render millions of cells smoothly. It is designed as an accessible data table that maintains high frame rates when displaying and navigating massive datasets.

The project distinguishes itself through a canvas-based rendering architecture that utilizes lazy rendering and a custom drawing API. This allows for specialized cell content and data-driven styling that bypasses standard DOM update cycles to ensure high performance.

The grid provides comprehensive layout and data management capabilities, including cell merging, frozen columns, variable row heights, and automatic column width calculation. It also includes built-in support for cell editing, element selection, and grid data search.

## Tags

### Part of an Awesome List

- [Data Grid Components](https://awesome-repositories.com/f/awesome-lists/devtools/react-components/data-grid-components.md) — A high-performance data grid component for React that renders millions of cells using the HTML Canvas API.

### User Interface & Experience

- [Enterprise Data Grids](https://awesome-repositories.com/f/user-interface-experience/enterprise-data-grids.md) — Provides a professional-grade enterprise data grid with keyboard navigation, accessibility, and complex layout controls.
- [Canvas Rendering Pipelines](https://awesome-repositories.com/f/user-interface-experience/canvas-rendering-engines/canvas-rendering-pipelines.md) — Implements a high-performance rendering pipeline that draws the grid interface directly to an HTML5 canvas.
- [Data Model Mapping](https://awesome-repositories.com/f/user-interface-experience/dynamic-data-tables/data-model-mapping.md) — Transforms raw data into visible cells on demand using a function-based mapping approach. ([source](https://docs.grid.glideapps.com/extended-quickstart-guide))
- [Custom Cell Styling](https://awesome-repositories.com/f/user-interface-experience/editor-customization-tools/custom-cell-editors/custom-cell-styling.md) — Allows defining the visual appearance and layout of individual cells to support diverse data types. ([source](https://docs.grid.glideapps.com/welcome-to-glide-data-grid.md))
- [Canvas Cell Renderers](https://awesome-repositories.com/f/user-interface-experience/interactive-cell-rendering/canvas-cell-renderers.md) — Provides a high-performance drawing API for rendering specialized cell content while maintaining smooth visual updates. ([source](https://docs.grid.glideapps.com/faq))
- [On-Demand Cell Renderers](https://awesome-repositories.com/f/user-interface-experience/on-demand-cell-renderers.md) — Transforms raw data into visual cells using a callback function only when cells enter the viewport.
- [Virtualized Cell Rendering](https://awesome-repositories.com/f/user-interface-experience/rendering-optimizers/batch-renderers/render-view-controllers/rendering-optimization-techniques/virtualized-cell-rendering.md) — Employs lazy rendering to display millions of rows with minimal memory and latency. ([source](https://cdn.jsdelivr.net/gh/glideapps/glide-data-grid@main/README.md))
- [Viewport-Based Virtualization](https://awesome-repositories.com/f/user-interface-experience/viewport-based-virtualization.md) — Uses viewport-based virtualization to render only the visible subset of cells from massive datasets.
- [Virtualized Data Grids](https://awesome-repositories.com/f/user-interface-experience/virtualized-data-grids.md) — Uses lazy rendering and virtualization to maintain high frame rates when scrolling through massive datasets.
- [Editable Data Tables](https://awesome-repositories.com/f/user-interface-experience/virtualized-data-tables/editable-data-tables.md) — Provides a strongly typed, editable data grid supporting high-performance virtual scrolling and in-place editing.
- [Column Layout Configurations](https://awesome-repositories.com/f/user-interface-experience/column-layout-configurations.md) — Provides centralized configuration for resizable columns, movable columns, variable row heights, and merged cells. ([source](https://cdn.jsdelivr.net/gh/glideapps/glide-data-grid@main/README.md))
- [Cell-Relative Positioning](https://awesome-repositories.com/f/user-interface-experience/coordinate-based-position-calculators/cell-relative-positioning.md) — Calculates screen-space coordinates of cells to accurately position interactive overlays and UI elements. ([source](https://docs.grid.glideapps.com/api))
- [Grid Index Coordinate Mappers](https://awesome-repositories.com/f/user-interface-experience/coordinate-based-position-calculators/grid-index-coordinate-mappers.md) — Maps grid indices to pixel coordinates to ensure accurate placement of interactive overlays and mouse interactions.
- [Canvas Drawing APIs](https://awesome-repositories.com/f/user-interface-experience/custom-ui-components/custom-drawing-implementations/canvas-drawing-apis.md) — Exposes a low-level rendering interface for specialized cell content that bypasses standard DOM update cycles.
- [Data Table Accessibility](https://awesome-repositories.com/f/user-interface-experience/data-table-accessibility.md) — Implements first-class accessibility standards for navigating and interacting with large tabular datasets.
- [Table Rendering Overrides](https://awesome-repositories.com/f/user-interface-experience/data-view-customizers/custom-table-views/table-rendering-overrides.md) — Allows for specialized data table rendering using custom drawing logic for diverse content types.
- [Spreadsheet Interfaces](https://awesome-repositories.com/f/user-interface-experience/grid-cell-configurations/spreadsheet-interfaces.md) — Implements an interactive spreadsheet interface featuring cell editing, column freezing, and merged cells.
- [Frozen Grid Elements](https://awesome-repositories.com/f/user-interface-experience/grid-layouts/frozen-grid-elements.md) — Ships the ability to lock specific columns in place so they remain visible during horizontal scrolling. ([source](https://docs.grid.glideapps.com/faq))
- [Virtualized Variable-Height Items](https://awesome-repositories.com/f/user-interface-experience/measurement-tools/dynamic-size-calculators/runtime-height-calculators/dynamic-height-implementations/virtualized-variable-height-items.md) — Implements variable row heights that automatically adjust as content sizes change within the virtualized grid. ([source](https://docs.grid.glideapps.com/welcome-to-glide-data-grid.md))

### Data & Databases

- [High-Performance Visualizers](https://awesome-repositories.com/f/data-databases/data-visualization-charts/high-performance-visualizers.md) — Renders millions of rows at high frame rates with smooth scrolling and fast visual updates.
- [Cell Editors](https://awesome-repositories.com/f/data-databases/cell-editors.md) — Provides built-in interfaces for modifying the content of individual cells within the grid. ([source](https://cdn.jsdelivr.net/gh/glideapps/glide-data-grid@main/README.md))

### Graphics & Multimedia

- [Grid Rendering](https://awesome-repositories.com/f/graphics-multimedia/canvas-rendering/grid-rendering.md) — Utilizes an HTML5 canvas-based rendering architecture to display millions of cells with high performance. ([source](https://docs.grid.glideapps.com/extended-quickstart-guide))
- [Data-Driven Visual Styling](https://awesome-repositories.com/f/graphics-multimedia/data-visualization-styling/data-driven-visual-styling.md) — Implements visual definitions that map data values (numbers, text, images) to specific cell styles. ([source](https://cdn.jsdelivr.net/gh/glideapps/glide-data-grid@main/README.md))
- [Selective Cell Refresh](https://awesome-repositories.com/f/graphics-multimedia/graphics-and-media/terminal-graphics-rendering/cell-based-grid-renderers/selective-cell-refresh.md) — Provides a mechanism to trigger the re-rendering of specific cells to ensure visuals match the most recent data updates. ([source](https://docs.grid.glideapps.com/api))

### Software Engineering & Architecture

- [Large Dataset Optimizations](https://awesome-repositories.com/f/software-engineering-architecture/performance-reliability/performance-optimization/data-handling-throughput/large-dataset-optimizations.md) — Optimizes the rendering and handling of massive datasets in the browser using lazy rendering.

### Development Tools & Productivity

- [Selection State Layers](https://awesome-repositories.com/f/development-tools-productivity/default-view-selections/selection-state-layers.md) — Tracks cell and row selections as a separate data layer to optimize update frequency.

### Web Development

- [Grid Element Selection](https://awesome-repositories.com/f/web-development/dom-element-manipulators/multi-element-selection/grid-element-selection.md) — Enables selection of single or multiple cells, rows, and columns for bulk actions or inspection. ([source](https://cdn.jsdelivr.net/gh/glideapps/glide-data-grid@main/README.md))