[Bug]: sort and page events are not working with Table chart

[Sagar-AArya]

Would you like to work on a fix?

• [ ] Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

I'm trying to handle 2 events.

1. sort event when a column header is clicked and
2. page event when the page navigation button is clicked.

The events are supposed to fire when the action happens. but they are not working as expected.

Reproduction

https://codesandbox.io/s/reverent-panini-3ntox9?file=/App.tsx

react-google-charts version

v4.0.0

Possible solution

No response

[mangege]

However, ChartWrapper currently only propagates a subset of events thrown by charts: select, ready, and error. Other events are not transmitted through the ChartWrapper instance; to get other events, you must call getChart() and subscribe to events directly on the chart handle, as shown here:

ref: https://developers.google.com/chart/interactive/docs/reference#chartwrapperobject

  {
    eventName: "ready",
    callback: ({ chartWrapper, google }) => {
      console.log("ready event");
      const chart = chartWrapper.getChart();
      google.visualization.events.addListener(chart, 'page', (params) => {
        console.log("params", params);
      });
      google.visualization.events.addListener(chart, 'sort', (params) => {
        console.log("params", params);
      });
    }
  }

Example: https://codesandbox.io/s/rough-https-5lj492