React Data Grid

react-data-grid is a high-performance tabular interface for rendering and manipulating large datasets within a React application. It functions as a virtualized data table and editable spreadsheet component that supports hierarchical data grids with expandable and collapsible row groupings.

The component maintains performance with massive datasets by rendering only the rows and columns currently visible in the viewport. It provides spreadsheet-like data manipulation, including cell editing and the ability to copy, paste, or drag values between cells.

The grid supports advanced layout capabilities such as freezing columns, resizing column widths, and spanning cells across multiple columns. It also includes tools for organizing data through sorting, row selection, and the display of aggregated summary rows.

The project is written in TypeScript.

Features

Data Grids - Provides a high-performance interactive tabular component for rendering and manipulating large datasets in React.

Spreadsheet Components - Provides a high-performance UI component for viewing and editing tabular data with spreadsheet-like manipulation.

Hierarchical State Management - Organizes data into a hierarchical tree structure with expandable and collapsible row groupings.

In-Place Cell Editing - Provides in-place editing of cell values with customizable editors that commit changes on blur.

Hierarchical Row Grouping - Organizes data into a tree structure with expandable and collapsible rows based on specified column keys.

Large Dataset Optimizations - Implements virtualization to render only visible rows and columns, ensuring high performance with massive datasets.

React Components - Built specifically as a reusable interface element for integration within React applications.

Hierarchical Grids - Supports complex data organization through hierarchical row groupings with expandable and collapsible levels.

Viewport-Based Virtualization - Maintains high performance by rendering only the rows and columns currently visible in the viewport.

Virtualized Data Grids - Utilizes viewport-based virtualization to maintain performance when rendering massive amounts of tabular data.

Cell Data Manipulation - Implements copy, paste, and drag operations to quickly fill data across multiple cells and rows.

Column Spanning - Enables defining how many columns a specific cell occupies across the grid layout.

Coordinate-Based Positioning - Implements a coordinate-based system for calculating precise cell positions and dimensions using row and column metrics.

Column Pinning - Pins specific columns to the edge of the grid to keep them visible during horizontal scrolling.

Custom Cell Styling - Provides the ability to modify the appearance of rows and cells using custom class names, visual variables, and themes.

Row Selection Interfaces - Provides interactive controls for marking individual or multiple rows as active, including select-all header logic.

Cell Content Injection - Allows replacing default grid cells with custom React components for tailored visual presentation.

Interactive Column Resizing - Allows adjusting the width of columns interactively or programmatically using defined constraints.

Summary Rows - Ships pinned specialized rows at the top or bottom of the grid to show aggregated data or totals.

Table Column Grouping - Organizes multiple columns under a shared common header to create a visual hierarchy.

Multi-Column Sorting - Orders rows based on one or multiple columns in ascending or descending order via header interactions.

Custom Cell Design - Allows replacing default cell, header, and group elements with custom components to control visual presentation.

Cell-Level Event Handling - Triggers data updates through specialized editor components that commit changes on specific events or focus loss.

Data Grids - Excel-like grid component for React applications.

adazzlereact-data-grid

Features

Star history