A way to trigger onFetchData in ReactTable

Question

Is there a way to manually trigger a onFetchData callback using React-Table.

in documentation I can find server-side section with says that onFetchData is called at componentDidMount and any time sorting, pagination or filterting is changed in the table.

The question is: Can I trigger the onFetchData callback manually (it should update when other independent props change)?

Answer 1

You can keep a reference to the table in the parent component:

render( ... <ReactTable ref={(refReactTable) => {this.refReactTable = refReactTable;}}... /> ...

and then fire the update from the parent like so:

this.refReactTable.fireFetchData()

Answer 2

Just if somebody is still looking for a way to do this, I was able to do it using hooks. You need a reference to the ReactTable component and then call .fireFetchData() to refetch the server data:

const Table = ({ columns, ...props }) => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  const reactTable = useRef();

  useEffect(() => {
    reactTable.current && reactTable.current.fireFetchData();
  }, [/* your variable(s) here*/]);

  return (
    <ReactTable
      ref={reactTable}
      data={data}
      loading={loading}
      columns={columns}
      manual
      onFetchData={(state, instance) => {
        setLoading(true);
        // ... fetchData
        setData(data);
        setLoading(false);
      }}
      {...props}
    />
  );
};