Skip to main content

Listening for Changes

Using SDK​

To listen for data range changes use addListener.

// create a default workbook
const workbook:IWorkbook = new Workbook();
// get a range that can be iterators or allow for updates

const removeListener:RemoveListener = workbook.getRange('Sheet1!A1:E5000').addListener((event: WorkbookRangeEvent): void => {
  // do something with the range. We are justing going to log it.
  console.log(`We received an event from ${event.getSource().toString()}`);
});
// call removeListener() to remove the listener when finished

Using React​

2 hooks are available for React to listen for changes these are:

useModelListener example
import { IWorkbook } from '@sheetxl/sdk';
import { Studio, useModelListener } from '@sheetxl/mui-studio';

/* Listen for changes to sheet */
useModelListener<ISheet, ISheet.IListeners>(sheet, {
  // See ISheet.IListeners for all events
  onBeforeSave?(source: ISheet): Promise<void> | void {
    // throw an exception to prevent save.
  },
  onSave(source: ISheet, json: ISheet.JSON): void {
    // do something with the json
  },
}, {
  // Optional: Fire listeners immediately on mount with current state
  fireOnModelChange: true
});