History tracker

The History tracker in JSS automatically logs all changes made to the sheet. So, the user can undo (CTRL+Z) their actions and restore the sheet to a previous state or redo (CTRL+Y) their changes. This feature provides valuable safety for users, allowing them to restore changes and prevent losing their work.

If you are migrating from previous versions
The new JSS version 10 significantly improves the history of changes. The change tracker is now decoupled from a specific grid instance and will track changes across all sheets on the screen. The new feature aligns the changes-tracking capabilities with other spreadsheet applications, allowing for safer cross-worksheet operations and providing a more comprehensive history of changes made to the worksheets available on the screen.

Documentation

Methods

The undo and redo methods are normally invoked by the CTRL+Z, CTRL+Y keyboard shortcut. The following methods can be called programmatically, as follows:

Method	Description
history.undo()	Undo the last spreadsheet changes. `jspreadsheet.history.undo() : void`
history.redo()	Redo the most recent spreadsheet changes. `jspreadsheet.history.redo() : void`
history.reset()	Remove all history entries. `jspreadsheet.history.reset() : void`
Advance usage
history(object)	Add a new entry on the history tracker. `jspreadsheet.history(changes: Object) : void`

Events

Events related to the history changes tracker.

Event	Description
onredo	`onredo(worksheet: Object, info: Object) : null` The info array contains all necessary information about the history and depends on which change was performed.
onundo	`onundo(worksheet: Object, info: Object) : null` The info array contains all necessary information about the history and depends on which change was performed.

Interface

The history tracker interface is composed of the following attributes:

Event	Description
index: number;	History index cursor
actions: [];	History items
cascade: boolean;	When true the next item is cascaded in the same existing history element
ignore: boolean;	When true no history will be added to the tracker
progress: string;	Tell if a history process is ongoing.
undo: () => void;	Undo last action
redo: () => void;	Redo most recent action
reset: () => void;	Reset history tracker

Examples

Controlling the changes programmatically

As explained above, the history actions are available on the spreadsheet level.

Source code

<html>
<script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v10/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

<div id='spreadsheet'></div>

<input type="button" value="Undo" onclick="jspreadsheet.history.undo()" />
<input type="button" value="Redo" onclick="jspreadsheet.history.redo()" />
<input type="button" value="Reset" onclick="jspreadsheet.history.reset()" />

<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('MTBmZjdlOWQyMjEzMDhhZGY1YjM0MGRlZmI5MGQwMThmNDEwN2YzOTU1ZmZmMmYzNGU5ZTNmMjE3ZjIyMjRjMjVlOTVmY2ZhZTZlOWVjOTRlZGMyMmJhYjYwZGM2ZTQyZjJlYWQ3N2RhY2M1ZDA2NzFjZWVjOTlmOThiNjQ5ZTcsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakkwTURRd01Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');

// Create the spreadsheet
var spreadsheet = jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        minDimensions: [8, 8],
    }],
});
</script>
</html>

React example

import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
import jspreadsheet from "jspreadsheet";

const license = 'MTBmZjdlOWQyMjEzMDhhZGY1YjM0MGRlZmI5MGQwMThmNDEwN2YzOTU1ZmZmMmYzNGU5ZTNmMjE3ZjIyMjRjMjVlOTVmY2ZhZTZlOWVjOTRlZGMyMmJhYjYwZGM2ZTQyZjJlYWQ3N2RhY2M1ZDA2NzFjZWVjOTlmOThiNjQ5ZTcsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakkwTURRd01Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09';

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();

    // Render component
    return (
        <>
            <Spreadsheet ref={spreadsheet} license={license}>
                <Worksheet minDimensions={[8,8]} />
            </Spreadsheet>
            <input type="button" value="Undo" onClick={() => jspreadsheet.history.undo()} />
            <input type="button" value="Redo" onClick={() => jspreadsheet.history.redo()} />
            <input type="button" value="Reset" onClick={() => jspreadsheet.history.reset()} />
        </>
    );
}

Vue example

<template>
    <Spreadsheet ref="spreadsheet" :license="license">
        <Worksheet :minDimensions="[8,8]" />
    </Spreadsheet>
    <input type="button" value="Undo" @click="jspreadsheet.history.undo()" />
    <input type="button" value="Redo" @click="jspreadsheet.history.redo()" />
    <input type="button" value="Reset" @click="jspreadsheet.history.reset()" />
</template>

<script>
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/vue";

const license = 'MTBmZjdlOWQyMjEzMDhhZGY1YjM0MGRlZmI5MGQwMThmNDEwN2YzOTU1ZmZmMmYzNGU5ZTNmMjE3ZjIyMjRjMjVlOTVmY2ZhZTZlOWVjOTRlZGMyMmJhYjYwZGM2ZTQyZjJlYWQ3N2RhY2M1ZDA2NzFjZWVjOTlmOThiNjQ5ZTcsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakkwTURRd01Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09';

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    data() {
        return {
            license,
            jspreadsheet,
        }
    }
}
</script>

Angular example

import { Component, ViewChild, ElementRef } from "@angular/core";
import * as jspreadsheet from "jspreadsheet";

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('MTBmZjdlOWQyMjEzMDhhZGY1YjM0MGRlZmI5MGQwMThmNDEwN2YzOTU1ZmZmMmYzNGU5ZTNmMjE3ZjIyMjRjMjVlOTVmY2ZhZTZlOWVjOTRlZGMyMmJhYjYwZGM2ZTQyZjJlYWQ3N2RhY2M1ZDA2NzFjZWVjOTlmOThiNjQ5ZTcsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakkwTURRd01Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');

// Create component
@Component({
    selector: "app-root",
    template: `<div #spreadsheet></div>
        <input type="button" value="Undo" (click)="jspreadsheet.history.undo()" />
        <input type="button" value="Redo" (click)="jspreadsheet.history.redo()" />
        <input type="button" value="Reset" (click)="jspreadsheet.history.reset()" />`;
})
export class AppComponent {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Create a new data grid
    ngOnInit() {
        // Create spreadsheet
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            worksheets: [{
                minDimensions: [8, 8],
            }],
        });
    }
}

Releases notes

Differences from version 9

As previously mentioned, the history tracker in JSS version 10 can register changes across all spreadsheets on the screen, regardless of the worksheet instance. Therefore, the syntax to access this feature need revision to the following:

Attribute	Description
worksheet.resetHistory()	Please use `jspreadsheet.history.reset()`
worksheet.setHistory()	Please use `jspreadsheet.history()`