glideapps/glide-data-grid
Glide Data Grid
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.
Features
- Data Grid Components - A high-performance data grid component for React that renders millions of cells using the HTML Canvas API.
- Enterprise Data Grids - Provides a professional-grade enterprise data grid with keyboard navigation, accessibility, and complex layout controls.
- High-Performance Visualizers - Renders millions of rows at high frame rates with smooth scrolling and fast visual updates.
- Grid Rendering - Utilizes an HTML5 canvas-based rendering architecture to display millions of cells with high performance.
- Large Dataset Optimizations - Optimizes the rendering and handling of massive datasets in the browser using lazy rendering.
- Canvas Rendering Pipelines - Implements a high-performance rendering pipeline that draws the grid interface directly to an HTML5 canvas.
- Data Model Mapping - Transforms raw data into visible cells on demand using a function-based mapping approach.
- Custom Cell Styling - Allows defining the visual appearance and layout of individual cells to support diverse data types.
- Canvas Cell Renderers - Provides a high-performance drawing API for rendering specialized cell content while maintaining smooth visual updates.
- On-Demand Cell Renderers - Transforms raw data into visual cells using a callback function only when cells enter the viewport.
- Virtualized Cell Rendering - Employs lazy rendering to display millions of rows with minimal memory and latency.
- Viewport-Based Virtualization - Uses viewport-based virtualization to render only the visible subset of cells from massive datasets.
- Virtualized Data Grids - Uses lazy rendering and virtualization to maintain high frame rates when scrolling through massive datasets.
- Editable Data Tables - Provides a strongly typed, editable data grid supporting high-performance virtual scrolling and in-place editing.
- Cell Editors - Provides built-in interfaces for modifying the content of individual cells within the grid.
- Selection State Layers - Tracks cell and row selections as a separate data layer to optimize update frequency.
- Data-Driven Visual Styling - Implements visual definitions that map data values (numbers, text, images) to specific cell styles.
- Selective Cell Refresh - Provides a mechanism to trigger the re-rendering of specific cells to ensure visuals match the most recent data updates.
- Column Layout Configurations - Provides centralized configuration for resizable columns, movable columns, variable row heights, and merged cells.
- Cell-Relative Positioning - Calculates screen-space coordinates of cells to accurately position interactive overlays and UI elements.
- Grid Index Coordinate Mappers - Maps grid indices to pixel coordinates to ensure accurate placement of interactive overlays and mouse interactions.
- Canvas Drawing APIs - Exposes a low-level rendering interface for specialized cell content that bypasses standard DOM update cycles.
- Data Table Accessibility - Implements first-class accessibility standards for navigating and interacting with large tabular datasets.
- Table Rendering Overrides - Allows for specialized data table rendering using custom drawing logic for diverse content types.
- Spreadsheet Interfaces - Implements an interactive spreadsheet interface featuring cell editing, column freezing, and merged cells.
- Frozen Grid Elements - Ships the ability to lock specific columns in place so they remain visible during horizontal scrolling.
- Virtualized Variable-Height Items - Implements variable row heights that automatically adjust as content sizes change within the virtualized grid.
- Grid Element Selection - Enables selection of single or multiple cells, rows, and columns for bulk actions or inspection.
