react-datasheet-grid

View demo and documentation

An Airtable-like / Excel-like component to create beautiful spreadsheets.

Feature rich:

Dead simple to set up and to use
Supports copy / pasting to and from Excel, Google-sheet...
Keyboard navigation and shortcuts fully-supported
Supports right-clicking and custom context menu
Supports dragging corner to expand selection
Easy to extend and implement custom widgets
Blazing fast, optimized for speed, minimal renders count
Smooth animations
Virtualized rows and columns, supports hundreds of thousands of rows
Extensively customizable, controllable behaviors
Built with Typescript

Install

npm i react-datasheet-grid

Usage

import {
  DataSheetGrid,
  checkboxColumn,
  textColumn,
  keyColumn,
} from 'react-datasheet-grid'

// Import the style only once in your app!
import 'react-datasheet-grid/dist/style.css'

const Example = () => {
  const [ data, setData ] = useState([
    { active: true, firstName: 'Elon', lastName: 'Musk' },
    { active: false, firstName: 'Jeff', lastName: 'Bezos' },
  ])

  const columns = [
    {
      ...keyColumn('active', checkboxColumn),
      title: 'Active',
    },
    {
      ...keyColumn('firstName', textColumn),
      title: 'First name',
    },
    {
      ...keyColumn('lastName', textColumn),
      title: 'Last name',
    },
  ]

  return (
    <DataSheetGrid
      value={data}
      onChange={setData}
      columns={columns}
    />
  )
}