react-datasheet-grid

To support copy-pasting in a custom column component, you must implement three specific properties in your column configuration:

1. deleteValue: A function called when a cell is cut or deleted. Return the value you want the cell to hold after deletion (e.g., () => null).
2. copyValue: A function called when a cell is copied. It receives an object containing rowData. You should return the value you want to appear on the user's clipboard (e.g., a human-readable label).
3. pasteValue: A function called when a value is pasted. It receives the clipboard value and should transform it back into the underlying data type used by the grid.

This is particularly useful for select components where you might want to copy the visible label but paste the underlying ID/value.

function App() {
  const [ data, setData ] = useState(['chocolate', 'strawberry', null])

  return (
    <DataSheetGrid
      value={data}
      onChange={setData}
      columns={[
        {
          component: SelectComponent,
          disableKeys: true,
          deleteValue: () => null,
          copyValue: ({ rowData }) =>
            choices.find((choice) => choice.value === rowData)?.label,
          pasteValue: ({ value }) =>
            choices.find((choice) => choice.label === value)?.value ?? null,
          title: 'Flavor',
        },
      ]}
    />
  )
}

To implement a basic grid, use the DataSheetGrid component. You must provide a value (the data array), an onChange handler to update that data, and a columns configuration array.

Columns are typically created using helper functions like keyColumn combined with column type helpers like textColumn or checkboxColumn.

Important: You must import the component's CSS once in your application to ensure correct styling: import 'react-datasheet-grid/dist/style.css'

import React, { useState } from 'react'
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}
    />
  )
}

The library is written in TypeScript and exports all types directly. To get full type safety and IDE autocompletion, you should define a type for your row data and use it when defining your columns and the DataSheetGrid component.

import {
  checkboxColumn,
  Column,
  DataSheetGrid,
  keyColumn,
  textColumn,
} from 'react-datasheet-grid'
import 'react-datasheet-grid/dist/style.css'

// Define your row type
type Row = {
  active: boolean
  firstName: string | null
  lastName: string | null
}

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

  // Type your columns using Column<Row> to get type checks
  const columns: Column<Row>[] = [
    {
      ...keyColumn<Row, 'active'>('active', checkboxColumn),
      title: 'Active',
    },
    {
      ...keyColumn<Row, 'firstName'>('firstName', textColumn),
      title: 'First name',
n    },
    {
      ...keyColumn<Row, 'lastName'>('lastName', textColumn),
      title: 'Last name',
    },
  ]

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