stormy-gold

Reset Pagination manually

Hello! I'm using a server-side manual pagination. There are also search and filter forms, which which change what data the table receives. This works fine now, but whenever a user interacts with the pagination, and then interacts with filters or the search (say, user is on page 2/20), the tables pagination won't reset. So the pageIndex will remain the same. And I don't know how to reset the index. I'm aware that there are methods for this case exactly, but I have a container component which is concerned with data fetching, and a table component which contains the tanstack table. So I can't really call table.resetPagination() from the event handler that handles the search form submit. What is the right way of triggering a reset of the table from outside?

2 Replies

genetic-orange•5mo ago

Not sure if this help but might work figuring out https://tanstack.com/table/latest/docs/api/features/pagination#autoresetpageindex

Pagination APIs | TanStack Table Docs

State Pagination state is stored on the table using the following shape: tsx export type PaginationState = { pageIndex: number pageSize: number } export type PaginationTableState = { pagination: Pagin...

stormy-goldOP•5mo ago

Thanks for pointing it out - I'm aware of the option! It's set to false when using manual pagination. Turning it on won't help unfortunately. I eventually gave up and conceeded that I need to manage the pagination state manually myself. That means, I'm now calculating the pageIndex manually and passing it to state={pagination}. And with this, resetPagination(), manually reseting the pagination isn't necessary anymore, because the pageIndex is derived from the pagination offset:

const pagination = {
    pageSize: profilesData.length,
    pageIndex: profilesDataResponse.offset
        ? Math.floor(profilesDataResponse.offset / profilesData.length)
        : 0 // Calculate current page index based on offset and page size
}

const pagination = {
    pageSize: profilesData.length,
    pageIndex: profilesDataResponse.offset
        ? Math.floor(profilesDataResponse.offset / profilesData.length)
        : 0 // Calculate current page index based on offset and page size
}

All I need to do, is make sure that I'm sending the server an offset of 0 and it will respond accordingly. This response is then pulled into the paginations tate, and that's it.

Gaming

Programming

Reset Pagination manually

Did you find this page helpful?