Pagination
Hi, My REST API endpoints that support pagination have the items wrapped in following JSON
{"metadata":{"page":1,"per":10,"total":0},"items":[]}
How would I make the pagination work with a table?
4 Replies
Hi @petr4990. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To make pagination work with a table in refine, you can use the
tableProps.pagination
feature that comes out of the box with refine. It generates the pagination links for the <Table>
component and overrides <Table>
's pagination.itemRender
value.
Here is an example of how to use it:
By default, pagination happens on the server side. If you want to do pagination handling on the client side, you can pass the pagination.mode
property and set it to "client". Also, you can disable the pagination by setting the "off".
In your case, you can modify your EmailLeadHistoryItemList
component as follows:
For more information, you can refer to the refine documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table/#pagination) and refine blog (https://refine.dev/blog/tanstack-react-table/#pagination).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@356390195681296387> kapa.ai is still learning and improving, please let us know how it did by reacting below
eastern-cyan•9mo ago
Hello @petr4990, you can
swizzle
your data provider and modify it as needed. Current rest provider takes total count from header.
https://refine.dev/docs/packages/cli/#swizzleCLI | refine
Refine CLI is a command line application that allows you to interact with your Refine project and perform some tasks. This includes creating a new resource, managing updates, swizzle components, and runs your project (build, start, dev).
conventional-tan•9mo ago
Thanks! I'll take a look.