metropolitan-bronze
metropolitan-bronze•8mo ago

Can't change list pages

const { tableProps, filters } = useTable({
    resource: 'venues',
    onSearch: (values: any) => {
      return [
        {
          field: 'name',
          operator: 'contains',
          value: values.name,
        },
      ];
    },
    pagination: {
      pageSize: 20,
    },
    sorters: {
      initial: [
        {
          field: 'created',
          order: 'desc',
        },
      ],
    },
    filters: {
      permanent: [
        {
          field: 'business.id',
          operator: 'eq',
          value: sessionStorage.getItem('currentBusiness'),
        },
      ],
      initial: [
        {
          field: 'name',
          operator: 'contains',
          value: undefined,
        },
      ],
    },
    meta: {
      gqlQuery: VENUES_QUERY,
    },
  });
const { tableProps, filters } = useTable({
    resource: 'venues',
    onSearch: (values: any) => {
      return [
        {
          field: 'name',
          operator: 'contains',
          value: values.name,
        },
      ];
    },
    pagination: {
      pageSize: 20,
    },
    sorters: {
      initial: [
        {
          field: 'created',
          order: 'desc',
        },
      ],
    },
    filters: {
      permanent: [
        {
          field: 'business.id',
          operator: 'eq',
          value: sessionStorage.getItem('currentBusiness'),
        },
      ],
      initial: [
        {
          field: 'name',
          operator: 'contains',
          value: undefined,
        },
      ],
    },
    meta: {
      gqlQuery: VENUES_QUERY,
    },
  });
Why can't I change page to next one? The pagination arrow at the bottom of the page is disabled. I my Table component I have it setup: 
<Table
          {...tableProps}
          pagination={{ ...tableProps.pagination }}
          bordered
          rowHoverable
          showSorterTooltip
        >
<Table
          {...tableProps}
          pagination={{ ...tableProps.pagination }}
          bordered
          rowHoverable
          showSorterTooltip
        >
8 Replies
kapa.ai
kapa.ai•8mo ago
Hi @chachi. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided and the knowledge sources, it seems like the issue might be related to the pagination configuration in your useTable hook. Here are a few things to check and try: 1. Ensure Pagination is Enabled: Make sure that pagination is not disabled. According to the knowledge sources, you can disable pagination by setting hasPagination: false. Ensure this property is not set to false. 2. Check Pagination Configuration: Ensure that the pagination configuration is correctly set up in your useTable hook. The pageSize and current properties should be correctly configured. 3. Server-Side Pagination: By default, pagination happens on the server side. Ensure that your server-side logic is correctly handling pagination requests. Here is a refined version of your code with some additional checks: 
const { tableProps, filters } = useTable({
    resource: 'venues',
    onSearch: (values: any) => {
      return [
        {
          field: 'name',
          operator: 'contains',
          value: values.name,
        },
      ];
    },
    pagination: {
      pageSize: 20,
      current: 1, // Ensure the current page is set
    },
    sorters: {
      initial: [
        {
          field: 'created',
          order: 'desc',
        },
      ],
    },
    filters: {
      permanent: [
        {
          field: 'business.id',
          operator: 'eq',
          value: sessionStorage.getItem('currentBusiness'),
        },
      ],
      initial: [
        {
          field: 'name',
          operator: 'contains',
          value: undefined,
        },
      ],
    },
    meta: {
      gqlQuery: VENUES_QUERY,
    },
    hasPagination: true, // Ensure pagination is enabled
  });
const { tableProps, filters } = useTable({
    resource: 'venues',
    onSearch: (values: any) => {
      return [
        {
          field: 'name',
          operator: 'contains',
          value: values.name,
        },
      ];
    },
    pagination: {
      pageSize: 20,
      current: 1, // Ensure the current page is set
    },
    sorters: {
      initial: [
        {
          field: 'created',
          order: 'desc',
        },
      ],
    },
    filters: {
      permanent: [
        {
          field: 'business.id',
          operator: 'eq',
          value: sessionStorage.getItem('currentBusiness'),
        },
      ],
      initial: [
        {
          field: 'name',
          operator: 'contains',
          value: undefined,
        },
      ],
    },
    meta: {
      gqlQuery: VENUES_QUERY,
    },
    hasPagination: true, // Ensure pagination is enabled
  });
In your Table component, ensure that the pagination is correctly passed: 
<Table
  {...tableProps}
  pagination={{ ...tableProps.pagination }}
  bordered
  rowHoverable
  showSorterTooltip
/>
<Table
  {...tableProps}
  pagination={{ ...tableProps.pagination }}
  bordered
  rowHoverable
  showSorterTooltip
/>
Additional Resources - Pagination Configuration (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table/#pagination) - Setting Initial Page Size (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table/#paginationpagesize) - Setting Initial Page Index (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table/#paginationcurrent) If the issue persists, ensure that your server-side logic is correctly handling pagination parameters and returning the appropriate data for each page request. If you need further assistance, you might want to check the GitHub issues (https://github.com/refinedev/refine/issues) for similar problems or open a new issue with detailed information. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•8mo ago
<@95552725294518272> kapa.ai is still learning and improving, please let us know how it did by reacting below
metropolitan-bronze
metropolitan-bronzeOP•8mo ago
@kapa.ai the pagination works, it's just that the buttons are disabled for some reason
kapa.ai
kapa.ai•8mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- If the pagination buttons are disabled, it typically means that the table is not recognizing that there are additional pages to navigate to. Here are a few things to check and try: 1. Ensure Data is Correctly Fetched: Verify that the data fetching logic is correctly implemented and that the total number of records is being returned. The pagination controls depend on knowing the total number of records to determine if there are more pages. 2. Check Pagination Properties: Ensure that the pagination object in tableProps includes the necessary properties like total, current, and pageSize. 3. Inspect the Pagination State: Check the state of the pagination to ensure it is being updated correctly when data is fetched. Here is a refined version of your code with some additional checks: 
const { tableProps, filters } = useTable({
    resource: 'venues',
    onSearch: (values: any) => {
      return [
        {
          field: 'name',
          operator: 'contains',
          value: values.name,
        },
      ];
    },
    pagination: {
      pageSize: 20,
      current: 1, // Ensure the current page is set
    },
    sorters: {
      initial: [
        {
          field: 'created',
          order: 'desc',
        },
      ],
    },
    filters: {
      permanent: [
        {
          field: 'business.id',
          operator: 'eq',
          value: sessionStorage.getItem('currentBusiness'),
        },
      ],
      initial: [
        {
          field: 'name',
          operator: 'contains',
          value: undefined,
        },
      ],
    },
    meta: {
      gqlQuery: VENUES_QUERY,
    },
    hasPagination: true, // Ensure pagination is enabled
  });
const { tableProps, filters } = useTable({
    resource: 'venues',
    onSearch: (values: any) => {
      return [
        {
          field: 'name',
          operator: 'contains',
          value: values.name,
        },
      ];
    },
    pagination: {
      pageSize: 20,
      current: 1, // Ensure the current page is set
    },
    sorters: {
      initial: [
        {
          field: 'created',
          order: 'desc',
        },
      ],
    },
    filters: {
      permanent: [
        {
          field: 'business.id',
          operator: 'eq',
          value: sessionStorage.getItem('currentBusiness'),
        },
      ],
      initial: [
        {
          field: 'name',
          operator: 'contains',
          value: undefined,
        },
      ],
    },
    meta: {
      gqlQuery: VENUES_QUERY,
    },
    hasPagination: true, // Ensure pagination is enabled
  });
In your Table component, ensure that the pagination is correctly passed and inspect the pagination state: 
<Table
  {...tableProps}
  pagination={{ ...tableProps.pagination }}
  bordered
  rowHoverable
  showSorterTooltip
/>
<Table
  {...tableProps}
  pagination={{ ...tableProps.pagination }}
  bordered
  rowHoverable
  showSorterTooltip
/>
Debugging Steps 1. Inspect Network Requests: Check the network requests to ensure that the correct data is being fetched and that the total number of records is being returned. 2. Check Pagination State: Add some logging to inspect the pagination state: 
console.log(tableProps.pagination);
console.log(tableProps.pagination);
3. Verify Total Records: Ensure that the total property in the pagination object is correctly set and reflects the total number of records. Additional Resources - Pagination Configuration (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table/#pagination) - Setting Initial Page Size (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table/#paginationpagesize) - Setting Initial Page Index (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table/#paginationcurrent) If the issue persists, you might want to check the GitHub issues (https://github.com/refinedev/refine/issues) for similar problems or open a new issue with detailed information. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•8mo ago
<@95552725294518272> kapa.ai is still learning and improving, please let us know how it did by reacting below
metropolitan-bronze
metropolitan-bronzeOP•8mo ago
the API doesn't return total, could that be the reason? @kapa.ai the API doesn't return total, could that be the reason?
kapa.ai
kapa.ai•8mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, if the API does not return the total number of records, that could indeed be the reason why the pagination buttons are disabled. The pagination controls need to know the total number of records to determine if there are additional pages to navigate to. Solution You need to ensure that your API returns the total number of records. This total count is typically used by the pagination component to enable or disable the navigation buttons. Steps to Fix 1. Modify the API to Return Total Count: Ensure that your API returns the total count of records. This can usually be done by including a total field in the response. 2. Update the Data Provider: If you are using a custom data provider, make sure it correctly handles the total count. For example, if you are using GraphQL, you might need to modify the query to include the total count. Here is an example of how you might modify a GraphQL data provider to include the total count: 
const response = await Promise.all([
    client.request(query, variables),
    fetch(`${restApiUrl}/${resource}/count?${stringify(filterBy)}`).then((res) => res.json()),
]);

return {
    data: response[0][operation],
    total: response[1],
};
const response = await Promise.all([
    client.request(query, variables),
    fetch(`${restApiUrl}/${resource}/count?${stringify(filterBy)}`).then((res) => res.json()),
]);

return {
    data: response[0][operation],
    total: response[1],
};
Example with useList If you are using the useList hook, ensure that the total count is correctly set: 
const { data, isLoading, isError } = useList({
    resource: "venues",
    pagination: {
        current: 1,
        pageSize: 20,
    },
    meta: {
        gqlQuery: VENUES_QUERY,
    },
});

console.log(data.total); // Ensure this is correctly set
const { data, isLoading, isError } = useList({
    resource: "venues",
    pagination: {
        current: 1,
        pageSize: 20,
    },
    meta: {
        gqlQuery: VENUES_QUERY,
    },
});

console.log(data.total); // Ensure this is correctly set
Documentation Links - Retrieving the Total Row Count (https://refine.dev/docs/data/hooks/use-list/#retrieving-the-total-row-count) - getList Method (https://refine.dev/docs/core/providers/data-provider/#getlist) If your backend does not provide a total count, you might need to implement a workaround to estimate or calculate the total count. If you need further assistance, you might want to check the GitHub issues (https://github.com/refinedev/refine/issues) for similar problems or open a new issue with detailed information. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•8mo ago
<@95552725294518272> kapa.ai is still learning and improving, please let us know how it did by reacting below

Did you find this page helpful?