In antd Table, can you combine Pagination and Footer somhow?

Question

I'm trying to save vertical space in an antd Table. I'm trying to render an "export CSV" link at the bottom of the Table alongside the Paginator. You can get the itemrender for each item in the Paginator, but you can't render adequately. i.e. this:

    itemrender(page, type, originalElement) {
        if (type === "prev") {
            return <><a onClick={() => ExportCSV()}>Export CSV</a>{originalElement}</>
        }
        return <>{originalElement}</>;
    }

Results in a cramped, line-breaking manner because both the a tag and the a tag of the 'prev' are both rendered inside of the same <li> block.

I tried rendering a Paginator in the Table footer, but that Paginator doesn't connect to the Table.

Is there a way to move the Paginator into the footer and still have it connected to the Table somehow?

Answer 1

I have a very similar use-case and landed up here for searching the same, Here's how I managed to combine Pagination with Table Footer.

import { Table, Pagination, Row } from 'antd';

const TableFooter = ({
  paginationProps
}) => {
    return( 
      <Row
        justify='space-between'
      >
         <Row>
            Some Left Side Content...
         </Row>
         <Pagination 
            {...paginationProps}
         />
      </Row>
    )
}

const App = () => {
  const pagination = {
    current: 1,
    total: 0,
    pageSize: 10,
    showTotal: (total, range) => `Total ${total} Pokemons`,
    onChange: onPaginationChange
  }
  
  const columns = [
    {title: "ID", dataIndex: "id"},
    {title: "Name", dataIndex: "name"}
  ]
  
  const data = [
    {id: 1, name: "Pikachu"},
    {id: 2, name: "Psyduck"}
  ]

  return (
    <Table 
      columns={columns}
      data={data}
      footer={() => 
        <TableFooter />
      }
      pagination={false}
    />
  )
}

ReactDOM.render(
  <App />,
  document.getElementById('react')
);