Initial ajaxRequestFunc blocked due to componentSetUpdate call to setData

[groboclown]

Short Description: The componentSetUpdate calls setData which blocks the initial ajaxRequestFunc load request by the wrapped Tabulator object.

Environment Details

• OS: Linux
• Node.js version: 11.9.0
• npm version: 6.7.0

Long Description When the Tabulator component is first rendered, "Page.setPage" is called, which invokes the ajaxRequestFunc. This causes Tabulator to keep track of the number of calls; it expects the handling of the promise to not have any blocking calls between when it started and when it finally resolves.

However, the React componentSetUpdate call will eventually invoke setData, after the ajaxRequestFunc is called. This in turn causes the result of the ajaxRequestFunc to resolve after the setData.

Code

const OPTIONS = {
  ajaxProgressiveLoad: "scroll",
  ajaxURL: "does/not/matter",
  ajaxRequestFunc: (url, config, params) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve({
        status: 200,
        json: () => ({last_page: 1, data: [1,2,3]})
      }), 1000);
    });
  }
}

Workaround

The best I've found is forcing a refresh after the page is loaded. However, this causes two loads, which is really impractical. Not specifying the data

It seems like the fix is to avoid calling setData if ajax loading is being used.

[bartvde]

yeah I also ran into this one, my workaround was wrapping the component and preventing the update

export default class ReactTabulatorWrapper extends Component<Props> {
  shouldComponentUpdate() {
    return false;
  }
  render() {
    return <ReactTabulator {...this.props} />;
  }
}

[ngduc]

added an example for Ajax Scrolling: https://github.com/ngduc/react-tabulator/blob/master/src/ReactTabulatorExample.tsx#L91-L129

today it has this code:

componentDidUpdate() {
    this.table.setData(this.state.data);
  }

Will it help if I put a check there to ignore it (don't call table.setData) when ajaxURL exists?

[ngduc]

This seems to be related to this issue - https://github.com/ngduc/react-tabulator/issues/82