How to Preserve Filters

Filters can be imported from and exported to JSON format, allowing them to be reapplied when reloading the SpreadJS instance or switching to a separate instance. To do this, we need to use the toJSON and fromJSON methods. We will also need to use suspendPaint and resumePaint in order to handle how our filters are loaded. 

Let’s go through an example:

const spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
const sheet = spread.getActiveSheet();

initSpread(spread);

function initSpread(spread) {
  spread.suspendPaint();
  var sheet = spread.getActiveSheet();

  sheet.suspendPaint();
  //Import datasource here
  applyFilter(sheet);
  sheet.resumePaint();
  spread.resumePaint();
}

We are first using suspendPaint, handling with our own applyFilter function (which we will cover momentarily), load our data source, and then using resumePaint. suspendPaint temporarily stops rendering, which improves performance when we make multiple changes to our worksheet. 

Going over our functions: 

function applyFilter(sheet) {
  var filter = new GC.Spread.Sheets.Filter.HideRowFilter(
    new GC.Spread.Sheets.Range(-1, -1, -1, -1)
  );
  sheet.rowFilter(filter);
  sheet.bind(GC.Spread.Sheets.Events.RangeFiltered, function () {
    saveFilter(sheet);
  });
  sheet.bind(GC.Spread.Sheets.Events.RangeFilterCleared, function () {
    saveFilter(sheet);
  });
  restoreFilter(sheet);
}

This is how we can handle applying our filters at the sheet level. HideRowFilter represents our filter instance, which covers the entire sheet and filters out any rows that do not meet our filter’s criteria. We then apply the filter instance to our worksheet using rowFilter. We also have event handlers for when a filter is applied or cleared, which when triggered saves the state of our filter instance using our own saveFilter function. Lastly, we use our restoreFilter function to apply our filter instance we have saved to JSON string. 

Moving on to our saveFilter function:

function saveFilter(sheet) {
  var filter = sheet.rowFilter();
  var filterJSONStr = JSON.stringify(filter.toJSON());

  localStorage.setItem("filterJSON", filterJSONStr);
}

Here we fetch the current filter state first, use toJSON to convert the filter object, then store the resulting JSON in local storage. This can be changed to store the JSON string elsewhere. 

Our last function to create is restoreFilter:

function restoreFilter(sheet) {
  var filterJSONStr = localStorage.getItem("filterJSON");

  if (!filterJSONStr) {
    return;
  }

  var filterJSON = JSON.parse(filterJSONStr);
  var filter = sheet.rowFilter();
  filter.fromJSON(filterJSON);
  filter.filter();
}

We first retrieve the saved JSON string from local storage (or wherever else it may be saved). We make sure to add a return in case there is no saved JSON found. We again fetch the current filter state, parse our retrieved JSON, rebuild the filter object using fromJSON, and finally apply the rebuilt filter object to our current filter instance. 

Here is a preview of the result using sample data: 

You can view the working sample here.