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, Feb 17 '20 at 07:10
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. — kapil pandey, Feb 19 '20 at 05:39

score 1 · Answer 1 · answered May 22 '20 at 09:26

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

score 0 · Answer 2 · answered Jan 18 '21 at 10:45

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

react-data-grid cell edit with copy paste

2 Answers2