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={}
/>