Package Exports

onchain-ui-grid
onchain-ui-grid/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (onchain-ui-grid) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-datasheet-grid

GitHub Workflow Status npm bundle size

View demo and documentation

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

Preview

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}
    />
  )
}