# nadbm/react-datasheet

**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/nadbm-react-datasheet).**

5,445 stars · 447 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/nadbm/react-datasheet
- Homepage: https://nadbm.github.io/react-datasheet/
- awesome-repositories: https://awesome-repositories.com/repository/nadbm-react-datasheet.md

## Topics

`component` `grid` `javascript` `react` `sheet` `spreadsheet` `table` `tableau`

## Description

react-datasheet is a React data grid component and tabular editor that provides an interactive spreadsheet interface. It is designed for managing tabular data with built-in support for cell editing and keyboard navigation.

The project is distinguished by its flexibility in rendering and structure, allowing the replacement of standard table elements with custom markup such as lists or divs. It supports custom cell rendering through a mapping system that swaps default cells with specialized components based on cell metadata.

The component covers broad capabilities for tabular data management, including state tracking for edits, range deletions, and pasting data. It also provides controls for cell behavior, such as defining read-only status and column spanning.

## Tags

### User Interface & Experience

- [Spreadsheet Interfaces](https://awesome-repositories.com/f/user-interface-experience/spreadsheet-interfaces.md) — Provides a React-based UI component that emulates spreadsheet software for structured data entry.
- [Tabular Editors](https://awesome-repositories.com/f/user-interface-experience/tabular-data-components/tabular-editors.md) — Provides a full-featured spreadsheet-like editor for React with support for bulk data pasting and range deletions.
- [Reactive Grid Renderers](https://awesome-repositories.com/f/user-interface-experience/canvas-components/spreadsheet-renderers/reactive-grid-renderers.md) — Provides a reactive data grid with built-in cell editing and keyboard navigation. ([source](https://cdn.jsdelivr.net/gh/nadbm/react-datasheet@master/README.md))
- [Data Grid Customization](https://awesome-repositories.com/f/user-interface-experience/data-grid-customization.md) — Enables the creation of specialized tables with custom rendering and behavior for complex information.
- [Data Tables](https://awesome-repositories.com/f/user-interface-experience/data-tables/table-data-syncers/data-tables.md) — Provides a grid system for interacting with tabular datasets featuring custom rendering and state tracking.
- [Interactive Cell Rendering](https://awesome-repositories.com/f/user-interface-experience/interactive-cell-rendering.md) — Renders table cells as custom React components for rich interactive elements and specialized inputs.
- [Component-Based Cell Rendering](https://awesome-repositories.com/f/user-interface-experience/view-customizations/component-based-cell-rendering.md) — Renders data using custom React components to display specialized inputs and visual indicators. ([source](https://cdn.jsdelivr.net/gh/nadbm/react-datasheet@master/README.md))
- [Component Overrides](https://awesome-repositories.com/f/user-interface-experience/editor-customization-tools/editor-component-replacements/component-overrides.md) — Provides mechanisms to replace default table components with custom implementations for sheets, rows, and cells. ([source](https://cdn.jsdelivr.net/gh/nadbm/react-datasheet@master/README.md))
- [Grid Cell Configurations](https://awesome-repositories.com/f/user-interface-experience/grid-cell-configurations.md) — Provides tools for defining the read-only status, span, and placement of individual grid cells. ([source](https://cdn.jsdelivr.net/gh/nadbm/react-datasheet@master/README.md))
- [Cell Column Spanning](https://awesome-repositories.com/f/user-interface-experience/grid-column-sizing/cell-column-spanning.md) — Supports defining column spanning for individual cells via behavioral properties.
- [DOM Element Overrides](https://awesome-repositories.com/f/user-interface-experience/grid-layouts/list-layout-arrangements/dynamic-grid-layouts/grid-element-arrangement/dom-element-overrides.md) — Allows the underlying spreadsheet markup to be changed to elements like lists or divs. ([source](https://nadbm.github.io/react-datasheet/))
- [Table Layout Engines](https://awesome-repositories.com/f/user-interface-experience/table-layout-engines.md) — Implements layout logic to manage cell spanning and styling based on cell metadata.

### Part of an Awesome List

- [Data Grid Components](https://awesome-repositories.com/f/awesome-lists/devtools/react-components/data-grid-components.md) — Ships an Excel-like data grid component for React with cell editing and keyboard navigation.

### Data & Databases

- [Data Change Callbacks](https://awesome-repositories.com/f/data-databases/data-change-callbacks.md) — Triggers custom callbacks when users perform edits, range deletions, or data pasting. ([source](https://cdn.jsdelivr.net/gh/nadbm/react-datasheet@master/README.md))
- [Keyboard Navigation](https://awesome-repositories.com/f/data-databases/in-place-cell-editing/keyboard-navigation.md) — Implements keyboard-driven focus movement and navigation between cells in a two-dimensional grid.
- [Tabular Data Management Interfaces](https://awesome-repositories.com/f/data-databases/tabular-data-frameworks/tabular-data-management-interfaces.md) — Provides an interface for managing two-dimensional data arrays via an interactive spreadsheet.
- [UI State Callbacks](https://awesome-repositories.com/f/data-databases/data-change-callbacks/ui-state-callbacks.md) — Provides callbacks that trigger when the visual state of the data grid changes during cell editing.

### Content Management & Publishing

- [Behavioral](https://awesome-repositories.com/f/content-management-publishing/metadata-tagging/cell-metadata/behavioral.md) — Allows attaching arbitrary attributes to cells to control hints, styling, and interactivity. ([source](https://cdn.jsdelivr.net/gh/nadbm/react-datasheet@master/README.md))

### Software Engineering & Architecture

- [Visual State Reconciliation](https://awesome-repositories.com/f/software-engineering-architecture/visual-state-reconciliation.md) — Synchronizes the internal data model with the visual table hierarchy through React re-renders.

### Web Development

- [Markup Abstractions](https://awesome-repositories.com/f/web-development/css-grid-table-patterns/markup-abstractions.md) — Allows the underlying DOM elements of the grid to be swapped from tables to divs or lists.