使用自定义分页组件在React数据表中设置每页

Question

我需要在我的react数据表中设置Per-page值，默认情况下数据表会自动管理这个值，但我使用react Paginate作为自定义分页组件，它只管理页面。

如何在不删除React Paginate的情况下更改此值？

数据表：

<DataTable
noHeader
pagination
paginationComponent={CustomPagination}
paginationPerPage={store.perPage}
paginationRowsPerPageOptions={[10, 25, 50, 100]}
className={dataTableStyles}
columns={columns}
noDataComponent={<img src={EmptyState}/>}
progressPending={spinner}
paginationDefaultPage={currentPage}
progressComponent={<Spinner color="primary" size="md" className="justify-self-center align-self-center"/>}
conditionalRowStyles={customDisabledStyle ? customDisabledStyle : disabledStyle}
sortIcon={<ChevronDown size={10} />}
data={dataToRender()}
/>

自定义分页：

const CustomPagination = (e) => {
const count = Number((store.total / rowsPerPage))
return (
<Row className='mx-0'>
<Col className='d-flex justify-content-start mt-2' sm='6'>
<p>Mostrando {showingFrom} a {showingTo} de {showingOf} registros {totalRows}</p>
</Col>
<Col className='d-flex justify-content-end' sm='6'>
<ReactPaginate
previousLabel={''}
nextLabel={''}
forcePage={currentPage !== 0 ? currentPage - 1 : 0}
onPageChange={page => handlePagination(page)}
pageCount={count || 1}
breakLabel={'...'}
pageRangeDisplayed={2}
marginPagesDisplayed={2}
activeClassName={'active'}
pageClassName={'page-item'}
nextLinkClassName={'page-link'}
nextClassName={'page-item next'}
previousClassName={'page-item prev'}
previousLinkClassName={'page-link'}
pageLinkClassName={'page-link'}
breakClassName='page-item'
breakLinkClassName='page-link'
containerClassName={'pagination react-paginate pagination-sm justify-content-end pr-1 mt-1'}
/>
</Col>
</Row>
)
}

Answer 1

我需要与paginationRowsPerPageOptions属性相同的东西来为该元素提供自定义组件。这就是我解决问题的方法：

import * as React from "react";
import {
PaginationComponentProps as DataTablePaginationComponentProps
} from "react-data-table-component/dist/src/DataTable/types";
import {useTranslation} from "react-i18next";
// Inheritance is required from API
interface TablePaginationProps extends DataTablePaginationComponentProps {
paginationRowsPerPageOptions?: number[];
}
export default function TablePagination({
currentPage,
rowCount,
onChangePage,
paginationRowsPerPageOptions,
rowsPerPage,
onChangeRowsPerPage
}: TablePaginationProps) {
const {t} = useTranslation();
return <div className={"d-flex mt-2 justify-content-end align-items-baseline"}>
<div className={"me-3"}>
// ... component
</div>
// ... component
<div className={'ms-3 border'}>
// ... component that uses paginationRowsPerPageOptions
</div>
</div>
}

API组件的文档位于此处https://react-data-table-component.netlify.app/?path=/docs/api-props--page
您还可以查看该库自己的分页组件的实际实现https://github.com/jbetancur/react-data-table-component/blob/master/src/DataTable/Pagination.tsx

我希望你得到你的答案

Answer 2

通过道具paginationRowsPerPageOptions={[2,4,8,12,15]}