conscious-sapphire•4mo ago

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

kapa.ai•4mo ago

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.

useList({  
  pagination: {  
    pageSize: 20,  
  },  
});

useList({  
  pagination: {  
    pageSize: 20,  
  },  
});

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.

import { useTable } from "@refinedev/core";  
useTable({  
  pagination: {  
    pageSize: 20,  
  },  
});

import { useTable } from "@refinedev/core";  
useTable({  
  pagination: {  
    pageSize: 20,  
  },  
});

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.

useSimpleList({  
  pagination: {  
    pageSize: 20,  
  },  
});

useSimpleList({  
  pagination: {  
    pageSize: 20,  
  },  
});

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.

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

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

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.

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

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

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: ----------------------

kapa.ai•4mo ago

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

conscious-sapphireOP•4mo ago

@kapa.ai I was looking for more something global like in the refine config

kapa.ai•4mo ago

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:

import { Refine } from "@refinedev/core";

const App = () => {
  return (
    <Refine
      options={{
        pagination: {
          pageSize: 20, // Set your desired default page size here
        },
      }}
      // other props
    />
  );
};

export default App;

import { Refine } from "@refinedev/core";

const App = () => {
  return (
    <Refine
      options={{
        pagination: {
          pageSize: 20, // Set your desired default page size here
        },
      }}
      // other props
    />
  );
};

export default App;

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: ----------------------

kapa.ai•4mo ago

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

conscious-sapphireOP•4mo 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)

kapa.ai•4mo ago

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

useList({
  pagination: {
    pageSize: 20,
  },
});

useList({
  pagination: {
    pageSize: 20,
  },
});

Source (https://refine.dev/docs/data/hooks/use-list/#pagination-1) useTable Hook

import { useTable } from "@refinedev/core";  
useTable({
  pagination: {
    pageSize: 20,
  },
});

import { useTable } from "@refinedev/core";  
useTable({
  pagination: {
    pageSize: 20,
  },
});

Source (https://refine.dev/docs/data/hooks/use-table/#paginationpagesize) useSimpleList Hook

useSimpleList({
  pagination: {
    pageSize: 20,
  },
});

useSimpleList({
  pagination: {
    pageSize: 20,
  },
});

Source (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-simple-list/#paginationpagesize) useTable with Ant Design Integration

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

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

Source (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table/#paginationpagesize) useTable with Tanstack Table Integration

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

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

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: ----------------------

kapa.ai•4mo ago

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