@diagramers/admin
Version:
Diagramers Admin Template - React starter for admin dashboards.
43 lines (39 loc) • 1.42 kB
JavaScript
import React from 'react';
import { Pagination } from 'react-bootstrap';
import CsLineIcons from 'cs-line-icons/CsLineIcons';
const TablePagination = ({ tableInstance }) => {
const {
gotoPage,
canPreviousPage,
previousPage,
pageCount,
nextPage,
canNextPage,
state: { pageIndex },
} = tableInstance;
if (pageCount <= 1) {
return <></>;
}
return (
<Pagination className="justify-content-center mb-0 mt-3">
<Pagination.First className="shadow" onClick={() => gotoPage(0)} disabled={!canPreviousPage}>
<CsLineIcons icon="arrow-double-left" />
</Pagination.First>
<Pagination.Prev className="shadow" disabled={!canPreviousPage} onClick={() => previousPage()}>
<CsLineIcons icon="chevron-left" />
</Pagination.Prev>
{[...Array(pageCount)].map((x, i) => (
<Pagination.Item key={`pagination${i}`} className="shadow" active={pageIndex === i} onClick={() => gotoPage(i)}>
{i + 1}
</Pagination.Item>
))}
<Pagination.Next className="shadow" onClick={() => nextPage()} disabled={!canNextPage}>
<CsLineIcons icon="chevron-right" />
</Pagination.Next>
<Pagination.Last className="shadow" onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>
<CsLineIcons icon="arrow-double-right" />
</Pagination.Last>
</Pagination>
);
};
export default TablePagination;