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.

• Sumanth Madishetty: this issue occurs only if cellRangeSelection is enabled right?
• kapil pandey: Yup you are right.
• kapil pandey: 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.

Answer 1

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})}
 />
 );
}

Answer 2

Row selection API has changed in canary and showCheckbox prop is no longer supported. Here is the changelog https://github.com/adazzle/react-data-grid/blob/canary/CHANGELOG.md

Here is an example on how to implement selection https://github.com/adazzle/react-data-grid/blob/canary/stories/demos/CommonFeatures.tsx#L45

Copy from https://www.gitmemory.com/issue/adazzle/react-data-grid/1987/605651911