Fetch & Reload

The fetch method initializes or refreshes table data based on the table’s configured data source.

fetch(reload?: boolean): Promise<any>;

• fetch() initializes the table if it has not been loaded.

• fetch(true) forces the table to reload data from its configured data source.

This section describes the behavior and usage of the reload mode.

When to Use Fetch

Regardless of whether a table is configured with:

• Local data (data), or

• Remote data (remote)

You should always call table.fetch() before performing further operations such as:

• Creating a View

• Binding to a TableSheet

• Accessing table data

• Creating relationships

Calling fetch() ensures the table is fully initialized and ready for subsequent operations.

Basic Usage

table.fetch().then(function(data) {
  // Data is available here
});

For example:

const table = dataManager.addTable("products", {
  data: [
    { id: 1, name: "Pen" },
    { id: 2, name: "Notebook" }
  ]
});

const tableSheet = spread.addSheetTab( 0, "ProductTableSheet", GC.Spread.Sheets.SheetType.tableSheet );

// Always call fetch before using the table
table.fetch().then(function () {

  const view = table.addView("productView");

  view.fetch().then(function () {
     tableSheet.setDataView(view);
  });

});

Reloading Data

When to Use Reload

Reload is typically used with remote tables, where the underlying data may change outside the current application session.

Common scenarios include:

• A manual Refresh button.

• Periodic synchronization with a backend service.

• Data updated by other users.

• Re-querying the same endpoint to obtain the latest results.

To refresh table data from its configured data source, call:

table.fetch(true);

Functional Impact

When fetch(true) is called:

• The table data is reloaded.

• Existing views are re-evaluated.

• Sorting and filtering rules remain unchanged.

• Bound components update automatically if the data changes.

Reload doess not:

• Recreate the table

• Recreate views

• Require view.fetch()

• Require setDataView() again

If the reloaded data is identical to the previous result, no visible change occurs.

Sorting and Filtering Behavior

If a view has active sorting or filtering:

• The rules are preserved.

• After reload, they are applied to the newly loaded data.

• The result set may change depending on the new data.

No additional operation is required.

Example

const dataManager = spread.dataManager();
const tableSheet = spread.addSheetTab( 0, "ProductTableSheet", GC.Spread.Sheets.SheetType.tableSheet );

const products = dataManager.addTable("products", {
  remote: {
    read: {
      url: "https://demodata.mescius.io/northwind/api/v1/products",
    }
  }
});

// Initial load
products.fetch().then(() => {

  const view = products.addView("productView");

  view.fetch().then(function () {
     tableSheet.setDataView(view);
  });

  // Later: force reload
  document.getElementById("refreshBtn").addEventListener("click", () => {
    products.fetch(true).then(() => {
      tableSheet.setDataView(view);
      console.log("Table data reloaded.");
    });
  });

});

After fetch(true):

• The table re-requests data from the remote endpoint.

• Existing view rules remain.

• The TableSheet reflects updated data automatically.

Switching the Data Source

In addition to refreshing the same endpoint, fetch(true) can also be used when the table’s data source needs to change at runtime.

A common scenario occurs in template-based workflows.

Designers often build spreadsheet templates using test or demo endpoints during development.

When the template is deployed to production, the application must replace the test endpoint with a production data source.

In this case:

• The table definition remains.

• The remote endpoint is updated.

• fetch(true) is used to load data from the new source.

Example

var options = myTable.options;

// Replace the remote endpoint (development → production)
options.remote.read.url = "https://developer.mescius.com/spreadjs/demos/server/api/Order";

myTable.options = options;

// Reload from the new endpoint
myTable.fetch(true).then(function () {

  // Recreate view for the new dataset
  var view = myTable.addView("myView2");

  view.fetch().then(function () {
     sheet.setDataView(view);
  });

});

When switching to a different endpoint:

• The returned dataset may differ in structure or content.

• Existing view state may not align with the new data.

• Recreating the view ensures correct binding and recalculation.

This pattern is commonly used when promoting templates from development to production environments.