How to navigate to the first and last page antd Pagination (React)

Question

In my table component my pagination options are as below :

const showTotal = (total, range) => {
  return `${range[0]}-${range[1]} of ${total}`
};

const  renderPagination=(current, type, originalElement)=>{
  if (type === 'prev') {
    return <a className="table-prev" >Previous</a>;
  } if (type === 'next') {
    return <a>Next</a>;
  }
  return originalElement;

}
  return (
   <Table
   className="process-table-container"
   size='middle'
   columns={columns}
   dataSource={tableData}
   pagination={{
    pageSize: 10,
    showSizeChanger: true,
    itemRender:(current, type, originalElement)=>renderPagination(current, type, originalElement),
    showTotal: showTotal,
    className: 'pagination'
    }}
   />
  )
}

I have the next and previous options in itemRender but no first and last options how to do it without using custom pagination or table wrapper?

the output should be like this

i made the numbers as display none

Answer 1

It's better to use showQuickJumper which is more generic and readable than adding two more buttons for first and last :

<Table
   ...
   pagination={{
    ...,
    itemRender:(current, type, originalElement)=>renderPagination(current, type, originalElement),
    ...,
    showQuickJumper: true
    }}
/>

Demo:

---

If you still want to add two buttons, you need to disable pagination pagination={false} and make new wrapper component which wraps Table with your custom pagination.

function TableWrapper(props) {
  // Pagintation state...
  ...
  return (
      <TableWithFirstLast>
         // Use Table component with pagination={false}
         // Use Pagination component
         // Add first and last work with Pagination
         // Control how much data need to be shown on table's dataSource
      <TableWithFirstLast/>
  );
}