Material-table: how to reset page Index？[Pagination]

[Kelier]

In the first operation, I went to the page index 2. At this time, I clicked the button to reload a batch of new data, but the page number below was not set to 1.

[guiphc]

same problem here

[AbelRodriguezGumiel]

How can I change the current page programmatically?

[lkostrowski]

I had this issue and I hacked it around like this:

const tableRef = useRef<any>();

    const hackyResetPage = () => {
         // null is empty event, 0 is page index
        tableRef.current?.onChangePage(null, 0);
    };

    return (
        <MaterialTable<Account>
            tableRef={tableRef as any}
            onSearchChange={hackyResetPage}
            onFilterChange={hackyResetPage}
        />
    );

@mbrn I can open a PR (if doesn't exist yet) to add this feature, which will be:

1. resetPaginationOnFilter option or something like this, which will set index 0 while searched or paginated.
2. Add public method to set pagination instead of calling an event

[afitzgerald]

I just ran across this as well. I would like to explicitly set the page (usually to 0) on changing the data. Having it always stay on a random page is messy.

[Cristy94]

Same issue, in my case the entire React application crashes because the page is out of bounds after changing filtering options.

I tried @lkostrowski but it looks like it renders before it has time to update the page?

I reload my table data using onQueryChange(), but I have to delay it with a setTimeout, otherwise the fix doesn't work:

table.onChangePage(null, 0);
window.setTimeout(() => table.onQueryChange(), 1000);

That solution didn't really work in my case as I was also manually refreshing the current page using onQueryChange(). I changed it so table is refreshed with onQueryChange() when I want to maintain the page and with onChangePage(null, 0) when my filters are changed:

// Reload data for current page
const [refresh, setRefresh] = useState({});
useEffect(() => {
    (tableRef.current as any)?.onQueryChange()
}, [refresh]);

// Refresh table when we change custom filters and set page to 0
useEffect(() => {
    // If bug is fixed, use above hook for those deps too
    // BUG: https://github.com/mbrn/material-table/issues/955
    // Set page to 0 if filters changed, this will also reload data
    (tableRef.current as any)?.onChangePage(null, 0);
}, [filter1, filter2]);

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.