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 →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.