react-data-grid cell edit with copy paste

Question

I am trying to create copy paste functionality using react data grid (same as excel). Copy paste is working fine as expected but I am facing issues with inline cell edit. Please refer to the code here https://codesandbox.io/embed/sweet-wave-3qw4y?fontsize=14&hidenavigation=1&theme=dark

In this code if I edit a cell(change cells value) and without pressing enter or arrow key directly click on a different cell (other than the on which is being edited), the edited value gets transferred to clicked cell instead.

I found something on github but couldn't figure out the solution: https://github.com/adazzle/react-data-grid/issues/942, https://github.com/adazzle/react-data-grid/issues/293, https://github.com/adazzle/react-data-grid/issues/1460 and https://github.com/adazzle/react-data-grid/issues/1474

Please let me know how can I resolve this issue.

Work-around I have found a solution here https://www.npmjs.com/package/fixed-react-data-grid. He has fixed that issue and created another package out of it, but I am still clueless how he did it. Any help regarding this will be very helpful.

this issue occurs only if cellRangeSelection is enabled right? — Sumanth Madishetty
I have found a solution here npmjs.com/package/fixed-react-data-grid. He has fixed that issue and created another package out of it, but I am still clueless how he did it. Any help regarding this will be very helpful. — kapil pandey

Amit Amit · Accepted Answer · 2020-05-22T09:26:23

A simple workaround can be to use 'onCellSeleted' instead of 'cellRangeSelection'. Like this:

 render() {
    const { rows } = this.state
    return (
      <ReactDataGrid
        columns={columns}
        rowGetter={i => rows[i]}
        rowsCount={rows.length}
        onGridRowsUpdated={this.onGridRowsUpdated}
        enableCellSelect= {true}
       // cellRangeSelection={{onComplete: this.setSelection}}
        onCellSelected={s => this.setSelection({topLeft: s, bottomRight: s})}
      />
    );
}

react-data-grid cell edit with copy paste

2 Answers