Comcast/react-data-grid
React Data Grid
react-data-grid is a high-performance table component for React designed to render large datasets using virtualization. It functions as a virtualizing data table that optimizes memory and performance by rendering only the rows and columns currently visible on the screen.
The project provides a customizable spreadsheet interface featuring cell editing, column resizing, and pinned rows. It also acts as a hierarchical data grid, supporting row grouping and tree structures to organize complex nested information.
The grid covers wide-ranging data management and display capabilities, including multi-column sorting, row selection, and summary row generation. It supports visual customization through custom cell rendering and a theme system based on CSS variables, with accessibility features such as right-to-left text direction.
Features
- Virtualized Rendering - Renders only the visible subset of rows and columns to maintain high performance with massive datasets.
- Spreadsheet Interfaces - Provides a comprehensive spreadsheet interface featuring cell editing, column resizing, and pinned rows for a desktop-like experience.
- Keyboard-Driven Grid Navigation - Implements coordinate-based tracking of the active cell to enable keyboard-driven directional navigation.
- Hierarchical Row Grouping - Organizes data into a tree structure with expandable and collapsible parent categories.
- Complex Data Views - Provides advanced UI components for browsing structured data through complex views like hierarchical trees and pinned columns.
- High-Performance Visualizers - Employs high-performance rendering and virtualization to smoothly display massive datasets within a web interface.
- In-Place Cell Editing - Allows updating data values directly within the grid via user input and clipboard operations.
- Tree Structures - Supports organizing data into a recursive tree structure with expandable and collapsible grouped categories.
- Hierarchical Grid Visualizers - Supports row grouping and tree structures to organize and visualize complex nested information within a data grid.
- React Components - Ships as a reusable, high-performance interface element specifically designed for the React ecosystem.
- Column Pinning - Ships the ability to freeze specific columns to the viewport edge during horizontal scrolling.
- Interactive Table Components - Implements interactive table components with dynamic cell editing, column resizing, and row selection.
- Table Sorting Logic - Provides logic for reordering the data source based on user interaction with column headers.
- Multi-Column Sorting - Provides logic for ordering data using a sequence of multiple fields and directions via header interactions.
- Virtualized Data Grids - High-performance grid component featuring virtualization for rendering massive datasets.
- Virtualized Data Tables - Optimizes memory and performance by rendering only the rows and columns currently visible on the screen.
- CSS Variable Theming - Implements a theme system that maps design tokens to CSS variables for dynamic light and dark mode switching.
- Aggregated Metrics Displays - Enables the creation of specialized data views with summary rows and custom rendering to highlight aggregated totals.
- Row Selection Interfaces - Provides interactive controls and state tracking for managing row selection via checkboxes or triggers.
- Manual Column Resizing - Enables changing the width of individual columns through manual dragging or predefined constraints.
- Cell Content Injection - Provides a mechanism to inject custom React components into cells via a data-type to renderer mapping.
- Summary Rows - Supports displaying aggregated data totals in pinned rows at the top or bottom of the data view.
- Custom Cell Subclassing - Allows replacing standard grid cells with custom React components to display specialized data formats.
- Tables and Grids - Feature-rich, customizable data grid component.
- Tables and Grids - Listed in the “Tables and Grids” section of the Awesome React awesome list.
