Как перейти к первой и последней странице и нумерации страниц (React)

Question

В моем компоненте таблицы параметры пагинации следующие:

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'
    }}
   />
  )
}

У меня есть следующий и предыдущий параметры в itemRender, но нет первого и последнего вариантов, как это сделать без использования нумерации страниц или обертки таблицы?

вывод должен быть таким

я сделал цифры, как нет ни одного

Answer 1

Лучше использовать showQuickJumper, который более универсален и удобочитаем, чем добавление еще двух кнопок для first и last:

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

Демо:

---

Если вы все еще хотите добавить две кнопки, вам нужно отключить нумерацию страниц pagination={false} и сделать новыйКомпонент-обертка, который обёртывает Table в пользовательскую нумерацию страниц.

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/>
  );
}