useList pageSize defaults to 10

sad-indigo · 2024-09-10T16:15:10.018Z

useList pageSize defaults to 10 how can the default pagigation value be changed across the hooks can it be set in the config

K

kapa.ai•9/10/24, 4:15 PM

Hi @Joe Gaffney. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

K

kapa.ai•9/10/24, 4:15 PM

----------------------
Yes, the default pagination value for

pageSize

pageSize

can be changed across various hooks in refine. Here are the steps to change the default

pageSize

pageSize

for different hooks:

useList

useList

Hook

To change the default

pageSize

pageSize

in the

useList

useList

hook, you can pass the

pageSize

pageSize

property to the

pagination

pagination

object.

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

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

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

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

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

useTable

useTable

Hook

For the

useTable

useTable

hook, you can also set the

pageSize

pageSize

in the

pagination

pagination

object.

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

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

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

useSimpleList

Hook

Similarly, for the

useSimpleList

useSimpleList

hook, you can set the

pageSize

pageSize

in the

pagination

pagination

object.

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

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

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

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

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

useTable

useTable

with Ant Design Integration

If you are using the

useTable

useTable

hook with Ant Design integration, you can set the

pageSize

pageSize

in the

pagination

pagination

object as well.

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

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

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

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

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

useTable

useTable

with Tanstack Table Integration

For the

useTable

useTable

hook with Tanstack Table integration, you can set the

pageSize

pageSize

in the

pagination

pagination

object within

refineCoreProps

refineCoreProps

.

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

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

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

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

Source (https://refine.dev/docs/packages/tanstack-table/use-table/#paginationpagesize)

K

kapa.ai•9/10/24, 4:15 PM

By setting the

pageSize

pageSize

property in the

pagination

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

----------------------

K

kapa.ai•9/10/24, 4:15 PM

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

S

sad-indigoOP•9/10/24, 4:15 PM

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

K

kapa.ai•9/10/24, 4:15 PM

Let me check the knowledge base for you. One moment!

K

kapa.ai•9/10/24, 4:16 PM

----------------------
To set the default pagination value globally in refine, you can configure it in the

<Refine>

<Refine>

component. This way, the default

pageSize

pageSize

will be applied across all hooks that use pagination.

Here is how you can set the global pagination configuration in the

<Refine>

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

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

pageSize

is set to

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

pagination

property in the

options

options

of the

<Refine>

<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

----------------------

K

kapa.ai•9/10/24, 4:16 PM

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

S

sad-indigoOP•9/10/24, 4:16 PM

@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)

K

kapa.ai•9/10/24, 4:16 PM

Let me check the knowledge base for you. One moment!

K

kapa.ai•9/10/24, 4:16 PM

----------------------
It appears that the

pagination

pagination

property is not directly available in the

IRefineOptions

IRefineOptions

IRefineOptions

IRefineOptions type for the

<Refine>

<Refine>

component. Therefore, setting the default pagination globally in the refine config is not supported directly.

Instead, you will need to set the

pageSize

pageSize

for each hook individually as shown in the previous examples. Here are the examples again for setting the

pageSize

pageSize

in different hooks:

useList

useList

Hook

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

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

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

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

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

useTable

useTable

Hook

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

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

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

useSimpleList

Hook

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

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

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

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

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

useTable

useTable

with Ant Design Integration

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

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

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

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

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

useTable

useTable

with Tanstack Table Integration

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

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

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>

<Refine>

component itself. You will need to set the

pageSize

pageSize

individually for each hook where pagination is used.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•9/10/24, 4:16 PM

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

useList pageSize defaults to 10

`useList`
`useList`
Hook

`useTable`
`useTable`
Hook

`useSimpleList`
`useSimpleList`
Hook

`useTable`
`useTable`
with Ant Design Integration

`useTable`
`useTable`
with Tanstack Table Integration

`useList`
`useList`
Hook

`useTable`
`useTable`
Hook

`useSimpleList`
`useSimpleList`
Hook

`useTable`
`useTable`
with Ant Design Integration

`useTable`
`useTable`
with Tanstack Table Integration

`useList`
`useList`
Hook

`useTable`
`useTable`
Hook

`useSimpleList`
`useSimpleList`
Hook

`useTable`
`useTable`
with Ant Design Integration

`useTable`
`useTable`
with Tanstack Table Integration

`useList`
`useList`
Hook

`useTable`
`useTable`
Hook

`useSimpleList`
`useSimpleList`
Hook

`useTable`
`useTable`
with Ant Design Integration

`useTable`
`useTable`
with Tanstack Table Integration

useList pageSize defaults to 10

useListuseList Hook

useTableuseTable Hook

useSimpleListuseSimpleList Hook

useTableuseTable with Ant Design Integration

useTableuseTable with Tanstack Table Integration

useListuseList Hook

useTableuseTable Hook

useSimpleListuseSimpleList Hook

useTableuseTable with Ant Design Integration

useTableuseTable with Tanstack Table Integration

useListuseList Hook

useTableuseTable Hook

useSimpleListuseSimpleList Hook

useTableuseTable with Ant Design Integration

useTableuseTable with Tanstack Table Integration

useListuseList Hook

useTableuseTable Hook

useSimpleListuseSimpleList Hook

useTableuseTable with Ant Design Integration

useTableuseTable with Tanstack Table Integration

`useList`
`useList`
Hook

`useTable`
`useTable`
Hook

`useSimpleList`
`useSimpleList`
Hook

`useTable`
`useTable`
with Ant Design Integration

`useTable`
`useTable`
with Tanstack Table Integration

`useList`
`useList`
Hook

`useTable`
`useTable`
Hook

`useSimpleList`
`useSimpleList`
Hook

`useTable`
`useTable`
with Ant Design Integration

`useTable`
`useTable`
with Tanstack Table Integration

`useList`
`useList`
Hook

`useTable`
`useTable`
Hook

`useSimpleList`
`useSimpleList`
Hook

`useTable`
`useTable`
with Ant Design Integration

`useTable`
`useTable`
with Tanstack Table Integration

`useList`
`useList`
Hook

`useTable`
`useTable`
Hook

`useSimpleList`
`useSimpleList`
Hook

`useTable`
`useTable`
with Ant Design Integration

`useTable`
`useTable`
with Tanstack Table Integration