useList pageSize defaults to 10
useList pageSize defaults to 10 how can the default pagigation value be changed across the hooks can it be set in the config
8 Replies
Hi @Joe Gaffney. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Yes, the default pagination value for
pageSize
can be changed across various hooks in refine. Here are the steps to change the default pageSize
for different hooks:
useList
Hook
To change the default pageSize
in the useList
hook, you can pass the pageSize
property to the pagination
object.
Source (https://refine.dev/docs/data/hooks/use-list/#pagination-1)
useTable
Hook
For the useTable
hook, you can also set the pageSize
in the pagination
object.
Source (https://refine.dev/docs/data/hooks/use-table/#paginationpagesize)
useSimpleList
Hook
Similarly, for the useSimpleList
hook, you can set the pageSize
in the pagination
object.
Source (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-simple-list/#paginationpagesize)
useTable
with Ant Design Integration
If you are using the useTable
hook with Ant Design integration, you can set the pageSize
in the pagination
object as well.
Source (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table/#paginationpagesize)
useTable
with Tanstack Table Integration
For the useTable
hook with Tanstack Table integration, you can set the pageSize
in the pagination
object within refineCoreProps
.
Source (https://refine.dev/docs/packages/tanstack-table/use-table/#paginationpagesize)
By setting the pageSize
property in the pagination
object for each hook, you can change the default pagination value as needed.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@422289470487003153> kapa.ai is still learning and improving, please let us know how it did by reacting below
fascinating-indigo•4w ago
@kapa.ai I was looking for more something global like in the refine config
Let me check the knowledge base for you. One moment! :books:
----------------------
To set the default pagination value globally in refine, you can configure it in the
<Refine>
component. This way, the default pageSize
will be applied across all hooks that use pagination.
Here is how you can set the global pagination configuration in the <Refine>
component:
This configuration will ensure that the default pageSize
is set to 20
across all hooks that use pagination, unless overridden locally.
For more detailed information, you can refer to the refine documentation:
- Refine Component (https://refine.dev/docs/core/refine-component/)
By setting the pagination
property in the options
of the <Refine>
component, you can globally configure the default pagination settings for your application.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@422289470487003153> kapa.ai is still learning and improving, please let us know how it did by reacting below
fascinating-indigo•4w ago
@kapa.ai Type '{ syncWithLocation: true; warnWhenUnsavedChanges: true; pagination: { pageSize: number; }; }' is not assignable to type 'IRefineOptions'.
Object literal may only specify known properties, and 'pagination' does not exist in type 'IRefineOptions'.ts(2322)
Let me check the knowledge base for you. One moment! :books:
----------------------
It appears that the
pagination
property is not directly available in the IRefineOptions
type for the <Refine>
component. Therefore, setting the default pagination globally in the refine config is not supported directly.
Instead, you will need to set the pageSize
for each hook individually as shown in the previous examples. Here are the examples again for setting the pageSize
in different hooks:
useList
Hook
Source (https://refine.dev/docs/data/hooks/use-list/#pagination-1)
useTable
Hook
Source (https://refine.dev/docs/data/hooks/use-table/#paginationpagesize)
useSimpleList
Hook
Source (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-simple-list/#paginationpagesize)
useTable
with Ant Design Integration
Source (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table/#paginationpagesize)
useTable
with Tanstack Table Integration
Source (https://refine.dev/docs/packages/tanstack-table/use-table/#paginationpagesize)
Unfortunately, there is no global configuration option for pagination in the <Refine>
component itself. You will need to set the pageSize
individually for each hook where pagination is used.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@422289470487003153> kapa.ai is still learning and improving, please let us know how it did by reacting below