list, default pageSize

current the pageSize always default to 10, how to change that value?

5 Replies

kapa.ai•11mo ago

Hi @brandonkhj. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can change the default pageSize value by passing the pagination.pageSize prop to the useTable hook. Here's an example:

useTable({  
 refineCoreProps: {  
 pagination: {  
 pageSize: 20,  
 },  
 },  
});

useTable({  
 refineCoreProps: {  
 pagination: {  
 pageSize: 20,  
 },  
 },  
});

In this example, the pageSize is set to 20 instead of the default 10. This means that 20 records will be displayed per page. Please note that the initialPageSize prop is deprecated and you should use pagination.pageSize instead. For more details, you can refer to the documentation (https://refine.dev/docs/packages/documentation/react-table/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•11mo ago

<@391513391870640138> kapa.ai is still learning and improving, please let us know how it did by reacting below

modern-teal•11mo ago

@kapa.ai how about the useSelect pagination?

kapa.ai•11mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In the useSelect hook, you can set the pagination property to enable pagination. The pagination property accepts an object with current and pageSize keys. The current key represents the current page, and the pageSize key represents the number of items per page. Here's an example:

const { selectProps } = useSelect({  
 resource: "categories",  
 pagination: { current: 3, pageSize: 8 },  
});

const { selectProps } = useSelect({  
 resource: "categories",  
 pagination: { current: 3, pageSize: 8 },  
});

In this example, the listing will start from page 3, showing 8 records per page. Please note that pagination is disabled by default in useSelect. If you want to enable it, set the pagination.mode prop to "server".

useSelect({  
 pagination: {  
 mode: "server",  
 },  
})

useSelect({  
 pagination: {  
 mode: "server",  
 },  
})

For more details, you can refer to the documentation (https://refine.dev/docs/api-reference/antd/hooks/field/useCheckboxGroup/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•11mo ago

<@391513391870640138> kapa.ai is still learning and improving, please let us know how it did by reacting below