conventional-tan•9mo ago

Pagination

Hi, My REST API endpoints that support pagination have the items wrapped in following JSON {"metadata":{"page":1,"per":10,"total":0},"items":[]} How would I make the pagination work with a table?

export const EmailLeadHistoryItemList: React.FC<IResourceComponentsProps> = () => {
  const { tableProps } = useTable<EmailLeadHistoryItem>({

  });
  return (
    <List>
      <Table {...tableProps} rowKey="id">
        <Table.Column title="Email" dataIndex="email" />
        <Table.Column title="Last Contacted" dataIndex="lastContactedAt" />
        <Table.Column title="Unsubscribed" dataIndex="unsubscribedAt" />
        <Table.Column<Organization>
          fixed="right"
          title="Actions"
          dataIndex="actions"
          render={(_, record) => {
            return (
              <Space>
                <ShowButton hideText recordItemId={record.id} />
                <DeleteButton hideText recordItemId={record.id} />
              </Space>
            );
          }}
        />
      </Table>
    </List>
  );
};

export const EmailLeadHistoryItemList: React.FC<IResourceComponentsProps> = () => {
  const { tableProps } = useTable<EmailLeadHistoryItem>({

  });
  return (
    <List>
      <Table {...tableProps} rowKey="id">
        <Table.Column title="Email" dataIndex="email" />
        <Table.Column title="Last Contacted" dataIndex="lastContactedAt" />
        <Table.Column title="Unsubscribed" dataIndex="unsubscribedAt" />
        <Table.Column<Organization>
          fixed="right"
          title="Actions"
          dataIndex="actions"
          render={(_, record) => {
            return (
              <Space>
                <ShowButton hideText recordItemId={record.id} />
                <DeleteButton hideText recordItemId={record.id} />
              </Space>
            );
          }}
        />
      </Table>
    </List>
  );
};

4 Replies

kapa.ai•9mo ago

Hi @petr4990. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To make pagination work with a table in refine, you can use the tableProps.pagination feature that comes out of the box with refine. It generates the pagination links for the <Table> component and overrides <Table>'s pagination.itemRender value. Here is an example of how to use it:

const { tableProps } = useTable<IPost>();  
  
<Table  
 {...tableProps}  
 rowKey="id"  
 pagination={{  
 ...tableProps.pagination,  
 position: ["bottomCenter"],  
 size: "small",  
 }}  
>  
 // ---  
</Table>;

const { tableProps } = useTable<IPost>();  
  
<Table  
 {...tableProps}  
 rowKey="id"  
 pagination={{  
 ...tableProps.pagination,  
 position: ["bottomCenter"],  
 size: "small",  
 }}  
>  
 // ---  
</Table>;

By default, pagination happens on the server side. If you want to do pagination handling on the client side, you can pass the pagination.mode property and set it to "client". Also, you can disable the pagination by setting the "off". In your case, you can modify your EmailLeadHistoryItemList component as follows:

export const EmailLeadHistoryItemList: React.FC<IResourceComponentsProps> = () => {
  const { tableProps } = useTable<EmailLeadHistoryItem>();

  return (
    <List>
      <Table {...tableProps} rowKey="id" pagination={{  
 ...tableProps.pagination,  
 position: ["bottomCenter"],  
 size: "small",  
 }}>
        <Table.Column title="Email" dataIndex="email" />
        <Table.Column title="Last Contacted" dataIndex="lastContactedAt" />
        <Table.Column title="Unsubscribed" dataIndex="unsubscribedAt" />
        <Table.Column<Organization>
          fixed="right"
          title="Actions"
          dataIndex="actions"
          render={(_, record) => {
            return (
              <Space>
                <ShowButton hideText recordItemId={record.id} />
                <DeleteButton hideText recordItemId={record.id} />
              </Space>
            );
          }}
        />
      </Table>
    </List>
  );
};

export const EmailLeadHistoryItemList: React.FC<IResourceComponentsProps> = () => {
  const { tableProps } = useTable<EmailLeadHistoryItem>();

  return (
    <List>
      <Table {...tableProps} rowKey="id" pagination={{  
 ...tableProps.pagination,  
 position: ["bottomCenter"],  
 size: "small",  
 }}>
        <Table.Column title="Email" dataIndex="email" />
        <Table.Column title="Last Contacted" dataIndex="lastContactedAt" />
        <Table.Column title="Unsubscribed" dataIndex="unsubscribedAt" />
        <Table.Column<Organization>
          fixed="right"
          title="Actions"
          dataIndex="actions"
          render={(_, record) => {
            return (
              <Space>
                <ShowButton hideText recordItemId={record.id} />
                <DeleteButton hideText recordItemId={record.id} />
              </Space>
            );
          }}
        />
      </Table>
    </List>
  );
};

For more information, you can refer to the refine documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table/#pagination) and refine blog (https://refine.dev/blog/tanstack-react-table/#pagination). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

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

eastern-cyan•9mo ago

Hello @petr4990, you canswizzle your data provider and modify it as needed. Current rest provider takes total count from header. https://refine.dev/docs/packages/cli/#swizzle

CLI | refine

Refine CLI is a command line application that allows you to interact with your Refine project and perform some tasks. This includes creating a new resource, managing updates, swizzle components, and runs your project (build, start, dev).

conventional-tan•9mo ago

Thanks! I'll take a look.