Data Operations

TableSheet provides the ability to interact with the data in the form of row operations such as create, read, update, and delete row operations. With these operations, you can conveniently sync edited row data with your database.

The following tablesheet class methods are available as row operations:

The following GIF illustrates the row operations in action.

Different Sync Modes

The tablesheet interacts with the Data Manager to make changes in the tablesheet data. If you want to sync the changed data with your remote database, automatic updates or batch updates should be enabled as well.

You can set either the automatic sync mode or the batch mode property when using the addTable method. Both the properties and their uses are described below.

• autoSync mode syncs changes to the remote source automatically. This mode is mainly suitable for low-frequency data operation scenarios.

  var myTable = dataManager.addTable("myTable", {
      // ... other settings
      autoSync: true // enable the autoSync mode
  });

• batch mode syncs the changes to the remote source by invoking the submitChanges method manually. This mode is mainly suitable for scenarios where data is frequently manipulated.

  var myTable = dataManager.addTable("myTable", {
      // ... other settings
      batch: true, // enable the batch mode
      remote: {
          // ... other settings
          batch: {
              url: BatchApiUrl // specify the api url
          }
      }
  });
  
  // Save all changes
  tablesheet.submitChanges();
  // Or discard all changes
  tablesheet.cancelChanges();

Customize Remote Requests

TableSheet supports self-defined functions to configure the remote request options. By default, the tablesheet configures the remote requests by an object so if you want to handle the requests by yourself, replace the object with a function and the data changes will be passed to the function.

When using self-defined functions, the autoSync and batch modes have the following parameters:

• autoSync: The parameter of the create, update, and delete functions is the data item, and the return value is a Promise that wraps the data item from the remote. The return value of the read function is a Promise that wraps the data items.

• batch: The parameter of the batch function has the data changes, and the return value of the function is a Promise that wraps the success information from the remote.

The following code sample shows how to create and implement a custom request function.

// Create custom request function
function sendRequest(url, options) {
    options.method = options.method || 'POST';
    options.headers = { 'Content-Type': 'application/json; charset=utf-8' };
    if (options.body) {
        options.body = JSON.stringify(options.body);
    }
    return fetch(url, options).then(resp => {
        if (resp.ok) {
            return resp.json();
        } else {
            throw resp.statusText;
        }
    });
}

//init a data manager
var dataManager = spread.dataManager();
myTable = dataManager.addTable("myTable", {
    remote: {
        read: function () {
            return sendRequest(apiUrl, { method: 'GET' });
        },
        update: function (item) {
            return sendRequest(apiUrl, { body: item, method: 'PUT' });
        },
        create: function (item) {
            return sendRequest(apiUrl, { body: item });
        },
        delete: function (item) {
            return sendRequest(apiUrl, { body: item, method: 'DELETE' });
        },
        batch: function (changes) {
            return sendRequest(batchApiUrl, { body: changes });
        }
    },
    batch: true,
    onFailed: function(type, args) {
        console.log("error", type, args);
    }
});

Handling Errors

When the server returns connect error (e.g. HTTP 404, HTTP 500) and server database error (e.g. duplicated primary key, update failed), the tablesheet lets the user handle it through call-back or displays the error.

The row header displays a red alarm icon and when the user hovers on it, shows the error tips.

Fetch Data Changes

TableSheet supports fetching changes from its current data view before the changes are saved on the server. You can use the getChanges method of TableSheet class that returns the array of the following objects for each sync mode.

• Data Item: The current row data.

• Old Data Item: The original row data (This is optional).

• Index: The TableSheet view index.

• Type of change: Update, Insert and Delete depending on the sync mode.

In autoSync mode, the getChanges method returns the 'update rows' or 'insert row' information. However, in batch mode, the getChanges method returns the 'update rows', 'insert rows', and 'delete rows' information.

tablesheet.getChanges();