react-datasheet, an Excel-like Datagrid Component for React

A simple react component to create a spreadsheet:

  • Select cells, copy-paste cells
  • Navigation using keyboard keys
  • Deletion using keyboard keys
  • Callbacks for onChange, valueRenderer(visible data)
  • dataRenderer(underlying data in the input, takes the value by default)

Installation per npm, of course:

npm install react-datasheet --save

Cells can have both a value and an expression (the underlying data), each with their own renderer:

const grid = [
   [{value:  5, expr: '1 + 4'}, {value:  6, expr: '6'}, {value: new Date('2008-04-10')}],
   [{value:  5, expr: '1 + 4'}, {value:  5, expr: '1 + 4'}, {value: new Date('2004-05-28')}]
]
const onChange = (cell, i, j, newValue) => console.log("New expression :" + newValue)

<ReactDataSheet 
  data={grid}
  valueRenderer={(cell, i, j) => j == 2 ? cell.value.toDateString() : cell.value}
  dataRenderer={(cell, i, j) => j == 2 ? cell.value.toISOString() : cell.expr}
  onChange={} 
/>

React datasheet (GitHub) →
React datasheet Demos →

Elsewhere , ,

Leave a Reply

Your email address will not be published. Required fields are marked *