Basic cell editing
You can see the code by clicking the blue rectangular Show Editor View button above, and also edit the example in the code editor directly.
Overview
Above is an example where editing is enabled on the Title column. Try to edit both individual cells using the keyboard, as well as multiple cells using the mouse to drag or double click the cells drag handle.
By default, each cell of ReactDataGrid is readonly. It can be turned on for a given column as described in this article.
Cell Update scenarios
When editing is enabled, it is possible to update the values of a cell in the following ways
- Using the supplied editor of the column. The default editor is the SimpleTextEditor.
- Copy/pasting the value from one cell to another CTRL+C, CTRL+V
- Update multiple cells by dragging the fill handle of a cell up or down to a destination cell.
- Update all cells under a given cell by double clicking the cell's fill handle.
Enabling cell edit
In order for the cells of a column to be editable, you need to do the following:
- Set the
editable
property of the column to be true. - Provide an
onGridRowsUpdated
handler function. The below snippet is an example handler that handles all the above update scenarios.
onGridRowsUpdated = ({ fromRow, toRow, updated }) => {
this.setState(state => {
const rows = state.rows.slice();
for (let i = fromRow; i <= toRow; i++) {
rows[i] = { ...rows[i], ...updated };
}
return { rows };
});
};