Undo Redo

You can reverse and reapply changes made to your data using the Undo and Redo functions in TableSheet.

This page briefs you on the scope of supported actions, the specific areas where the undo and redo behavior will work, and its important considerations regarding data synchronization.

Supported Undo and Redo Operations

The TableSheet undo and redo functions support a wide range of immediate operations, including:

Configuration Changes: Filtering, sorting, and other configuration settings.
Runtime UI Operations: Similar to Worksheet operations such as editing cells, adding/removing rows or columns, pasting data, dragging/moving rows or columns, and more.
TableSheet API: Includes most API actions that change data or settings, except the setDataView method. Supported APIs include Options, setDefaultRowHeight, rowActionOptions, togglePinnedRows, togglePinnedColumns, groupBy, and many others. Note that the APIs enable undo in the same way as the worksheet commands do. You just need to customize the commands as per your requirements.
SpreadJS Designer Support: The undo and redo functions are supported by most of the TableSheet operations in SpreadJS Designer as shown in the screenshots below:
- TABLE SHEET DESIGN Ribbon: Perform undo/redo to the main TableSheet ribbon tab operations, such as adjust row height, stack row height, manage state rules, format theme color, etc.
- TableSheet Column Ribbon: Perform undo/redo actions related to column configuration.
- TableSheet Design Mode: Use undo/redo while configuring TableSheet layout.
- Undo/Redo List: View and manage your list of undo and redo actions. Click on the action item present in the list to revert to the selected action stage.

Undo Behaviors for Different Operations

The table below shows the specific undo behaviors for different operations in different sync modes:

Operations	static	batch
Add	Undo will delete the record. Saved to server: Will delete the record in the server and local. Not saved to server: Will delete the record in local.	Undo will delete the record. Will delete the record in local.
Update	Undo will revert data back. Saved to server: Undo will make it dirty. Not saved to server: Undo will make state to normal.
Delete	Undo will add the record back. State is added.	Undo will add the record back. Saved to server: State is added. Not Saved to server: State is normal.

Note:
DataSource tab configuration does not support undo and redo functions.
Certain actions will clear the undo stack, resetting your ability to undo previous changes. These actions vary based on the runtime environment and designer mode.
In Runtime:
setDataView API will clear the undo stack
Refetch data from the server will clear the undo stack
The tableSheet.reset() will clear the undo stack.
In Designer:
Resetting the table in the designer, the undo stack will be cleared.
However, if the table is set from empty, the undo stack will not be cleared.
Refetch data will clear the undo stack.

Special Consideration for Data Source Changes

Each undo action modifies local data only, except for the undo action corresponding to adding rows in autoSync mode. In this mode, deleting a row directly synchronizes with the server, and undoing this action will add the row back at the end of the list.

Another common method is to use a flag to indicate deletion, allowing for more flexible handling. If you want to utilize undo to revert a deleted column, the server must support representing deletions using the deletion flag. Without such support, undoing a deleted row will restore it to its original position on the front end. However, refreshing the page or data would move that entry to the end of the list.

The following code sample depicts a simple example of adding a deletion flag. Run the code and make any changes and then press Ctrl + Z to see the Undo action behavior.

  window.onload = function () {
      var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 });
      initSpreadJS(spread);
  };
  const jsonData = [
      {
          "Id": 1,
          "CompanyName": "Exotic Liquids",
          "ContactName": "Grace Campbell",
          "ContactTitle": "Purchasing Manager",
          "Address": "248 Jac And Mac St",
          "City": "Raven",
          "Region": "Southeast",
          "PostalCode": "24639",
          "State": "Virginia",
          "Phone": "(276) 964-4382",
          "Fax": null,
          "HomePage": null
      },
      {
          "Id": 2,
          "CompanyName": "New Orleans Delights",
          "ContactName": "Bert Garrett",
          "ContactTitle": "Order Administrator",
          "Address": "5291 Collins Rd",
          "City": "Middleburg",
          "Region": "Southeast",
          "PostalCode": "32068",
          "State": "Florida",
          "Phone": "(904) 264-9720",
          "Fax": null,
          "HomePage": null
      },
      {
          "Id": 3,
          "CompanyName": "Grandma Kellys Homestead",
          "ContactName": "Doris Schultz",
          "ContactTitle": "Sales Representative",
          "Address": "488 W Loyola Ave",
          "City": "Clovis",
          "Region": "West",
          "PostalCode": "93619",
          "State": "California",
          "Phone": "(559) 451-0210",
          "Fax": null,
          "HomePage": null
      },
      {
          "Id": 4,
          "CompanyName": "Tokyo Traders",
          "ContactName": "Judy Gill",
          "ContactTitle": "Marketing Manager",
          "Address": "664 N Holden St",
          "City": "Port Washington",
          "Region": "Midwest",
          "PostalCode": "53074",
          "State": "Wisconsin",
          "Phone": "(262) 284-5862",
          "Fax": null,
          "HomePage": null
      }
  ]

  function initSpreadJS(spread) {
      spread.suspendPaint();
      spread.clearSheets();
      spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader;
      // Initialize a data manager
      var dataManager = spread.dataManager();
      var myTable = dataManager.addTable("myTable", {
          autoSync: true, // Enable the autoSync mode
          // This is only for demo. In a real environment, these logics need to be implemented on the server.
          remote: {
              read: async function () {
                  return jsonData.filter(item => item._isDelete !== true);
              },
              delete: async function (item) {
                  const sourceIndex = deleteItem(item[0]);
                  return jsonData[sourceIndex]
              },
              create: async function (changes) {
                  return createItem(changes);
              }
          }
      });
      function deleteItem(dataItem) {
          const sourceIndex = jsonData.findIndex(item => item.Id === dataItem.Id);
          jsonData[sourceIndex]._isDelete = true;
          return sourceIndex;
      }
      function createItem(dataItem) {
          const index = jsonData.findIndex(item => item.Id === dataItem.Id);
          if (index > -1 && jsonData[index]) {
              jsonData[index]._isDelete = false;
              return jsonData[index];
          } else {
              jsonData.push({ ...dataItem, Id: createID() });
              return jsonData[jsonData.length - 1];
          }
      }
      function createID() {
          return `${Math.random() * 1000}`;
      }

      // Initialize a tablesheet
      const sheet = spread.addSheetTab(0, 'tablesheet', GC.Spread.Sheets.SheetType.tableSheet);
      var rowActions = GC.Spread.Sheets.TableSheet.BuiltInRowActions;
      var options = sheet.rowActionOptions();
      options.push(
          rowActions.removeRow,
          rowActions.saveRow,
          rowActions.resetRow,
      );
      sheet.rowActionOptions(options);

      // Bind a view to the tablesheet
      myTable.fetch().then(function () {
          const view = myTable.addView("myView", [
              { value: "Id", width: 50, caption: "Id" },
              { value: "CompanyName", width: 100, caption: "CompanyName" },
              { value: "ContactTitle", width: 100, caption: "ContactTitle" },
              { value: "Phone", width: 100, caption: "Phone" },
              { value: "State", width: 100, caption: "State" }
          ]);
          sheet.setDataView(view);
      });

      spread.resumePaint();
  }