Feature request: Undo/redo actions

[birgersp]

It would be great if the user could undo/redo changes in the table

[iddan]

Definitely, PRs are welcome 🙏

[klesun]

If anyone finds this useful, here is how I implemented it in my project:

this.state = {
    dataRows: [],
    historyStack: [[]],
    historyStackIndex: -1,
};
...
<Spreadsheet
    data={this.state.dataRows}
    onKeyDown={event => {
        if ((event.ctrlKey || event.metaKey) && event.key === "z") {
            event.preventDefault();
            if (event.shiftKey) { // redo
                this.setState(oldState => {
                    if (oldState.historyStackIndex < oldState.historyStack.length - 1) {
                        return {
                            ...oldState,
                            dataRows: oldState.historyStack[oldState.historyStackIndex + 1],
                            historyStackIndex: oldState.historyStackIndex + 1,
                        };

                    } else {
                        return oldState;
                    }
                });
            } else { // undo
                this.setState(oldState => {
                    if (oldState.historyStackIndex > 0) {
                        return {
                            ...oldState,
                            dataRows: oldState.historyStack[oldState.historyStackIndex - 1],
                            historyStackIndex: oldState.historyStackIndex - 1,
                        };

                    } else {
                        return oldState;
                    }
                });
            }
        }
    }}
    onChange={dataRows => {
        const dataRowsStr = JSON.stringify(dataRows);
        this.setState(oldState => {
            const olddataRowsStr = JSON.stringify(oldState.dataRows);
            if (dataRowsStr === olddataRowsStr) {
                return oldState;
            } else {
                let historyStack = oldState.historyStack;
                if (oldState.historyStackIndex !== historyStack.length - 1) {
                    historyStack = historyStack.slice(0, oldState.historyStackIndex + 1);
                }
                historyStack.push(dataRows);
                return {
                    ...oldState,
                    historyStack: historyStack,
                    historyStackIndex: historyStack.length - 1,
                    dataRows,
                };
            }
        });
    }}
/>