Is there a way to disable cell dragging in the react-data-grid?

Question

I'm making editable table with react-data-grid. In react-data-grid seems like feature for editing single cell and dragging it (therefore updating multiple cells) with cell handle (similar to Excel) are coupled. Is there a way to let editing cell by cell and disable dragging?

handleGridRowsUpdated = ({ fromRow, toRow, updated }) => {
    let { rows } = this.state
    rows = rows.slice()

    for (let i = fromRow; i <= toRow; i += 1) {
        const rowToUpdate = rows[i]
        rows[i] = update(rowToUpdate, { $merge: updated })
    }

    this.setState({ rows })
}

rowGetter = (i) => {
    const { rows } = this.state
    return rows[i]
}

render() {
        const { columns, rows } = this.state

        return (
            <div className="table">
                <ReactDataGrid
                    enableCellSelect={true}
                    columns={columns}
                    rowGetter={this.rowGetter}
                    rowsCount={rows.length}
                    onGridRowsUpdated={this.handleGridRowsUpdated}
                    rowHeight={44}
                    minColumnWidth={100}
                />
            </div>
        )
}

score 0 · Answer 1 · answered Nov 05 '19 at 22:01

You can easily hide the drag handle with css: .drag-handle { display: none; }

It also looks like there are onCellsDragged and onDragHandleDoubleClick functions on the grid properties that you could override, but I haven't bothered because hiding it via css is much easier.

Is there a way to disable cell dragging in the react-data-grid?

1 Answers1