React-Datasheet with React-Virtualized

react-datasheet-virtualized.jsx

// DataSheet.js

render() {
  const { sheetRenderer: SheetRenderer, rowRenderer: RowRenderer, cellRenderer,
    dataRenderer, valueRenderer, dataEditor, valueViewer, attributesRenderer,
    className, overflow, data, keyFn } = this.props
  const { forceEdit } = this.state
  
  return (
    <span ref={ r => { this.dgDom = r } } tabIndex='0' className='data-grid-container' onKeyDown={ this.handleKey }>
      <SheetRenderer data={ data } className={ ['data-grid', className, overflow].filter(a => a).join(' ') }
        virtualRowRenderer={ ({ key, index: i, style }) => {
          const row = data[i]
          return (<RowRenderer style={ style } key={ keyFn ? keyFn(i) : i } row={ i } cells={ row }>
            {
              row.map((cell, j) => {
                return (
                  <DataCell
                    key={ cell.key ? cell.key : `${i}-${j}` }
                    row={ i }
                    col={ j }
                    cell={ cell }
                    forceEdit={ forceEdit }
                    onMouseDown={ this.onMouseDown }
                    onMouseOver={ this.onMouseOver }
                    onDoubleClick={ this.onDoubleClick }
                    onContextMenu={ this.onContextMenu }
                    onChange={ this.onChange }
                    onRevert={ this.onRevert }
                    onNavigate={ this.handleKeyboardCellMovement }
                    onKey={ this.handleKey }
                    selected={ this.isSelected(i, j) }
                    editing={ this.isEditing(i, j) }
                    clearing={ this.isClearing(i, j) }
                    attributesRenderer={ attributesRenderer }
                    cellRenderer={ cellRenderer }
                    valueRenderer={ valueRenderer }
                    dataRenderer={ dataRenderer }
                    valueViewer={ valueViewer }
                    dataEditor={ dataEditor }
                  />
                )
              })
            }
          </RowRenderer>);
         } />
      }
    </span>
  )
}
        
        
 
// In another component
import Datasheet from 'react-datasheet';
import List from 'react-virtualized/dist/commonjs/List';

const sheetRenderer = ({virtualRowRenderer, data, className}) => (
  <List
    className={className}
    height={ 600 }
    rowHeight={ ({ index }) => 20 }
    rowRenderer={ virtualRowRenderer }
    rowCount={ data.length }
    width={ 600 }
  />
)
        
//  And the render on some component       
render() {
  return (
    <Datasheet
      style={ { width: '100%' } }
      data={ this.state.grid }
      valueRenderer={ (cell) => cell.value }
      onContextMenu={ (e, cell, i, j) => cell.readOnly ? e.preventDefault() : null }
      sheetRenderer={ sheetRenderer }
      onCellsChanged={ changes => {
        const grid = this.state.grid.map(row => [...row])
        changes.forEach(({ cell, row, col, value }) => {
          grid[row][col] = { ...grid[row][col], value }
        })
        this.setState({ grid })
      } }
    />
  )
}
        
        
        
        

unfortunately it seems to throw an error when adding the render function to datasheet.js
./src/DataSheet.js
Line 517: Parsing error: Unterminated regular expression

515 | }
516 | );

517 | } />
| ^
518 | }
519 |
520 | )

I know it's been a while since you threw this together, but any thoughts?