@kadconsulting/dry
Version:
KAD Reusable Component Library
23 lines • 1.87 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Button from '../../Button/Button';
import './TableFooter.scss';
import DropdownSelect from '../../DropdownSelect/DropdownSelect';
const TableFooter = ({ pageIndex, pageSize, totalRows, onClickNext, onClickPrevious, setPageSize, onGoToPage, hasPageSizeInput, hasGoToPageInput, }) => {
const totalPages = Math.ceil(totalRows / pageSize);
const handlePageInputChange = (e) => {
const page = e.target.value ? Number(e.target.value) - 1 : 0;
onGoToPage(page);
};
const handlePageSizeChange = (e) => {
const newPageSize = Number(e.target.value);
setPageSize(newPageSize);
};
const pageSizes = [10, 20, 30, 40, 50, 75, 100, 150, 200, 500, 1000];
const pageSizeOptions = pageSizes.map(size => ({
label: `${size}`,
value: `${size}`,
}));
return (_jsxs("div", { className: 'table-footer', children: [_jsx(Button, { width: '125', buttonType: 'outline-transparent', onClick: onClickPrevious, disabled: pageIndex === 0, children: "Previous" }), _jsxs("div", { className: 'table-footer__page-number-wrapper', children: [hasPageSizeInput && (_jsxs("div", { children: [_jsx("div", { children: "Rows per page:" }), _jsx(DropdownSelect, { name: 'rows per page', value: `${pageSize}`, options: pageSizeOptions, onChange: handlePageSizeChange })] })), _jsxs("div", { children: ["Page ", pageIndex + 1, " of ", totalPages] })] }), hasGoToPageInput && (_jsxs("div", { children: ["Go to page:", _jsx("input", { type: 'number', value: pageIndex + 1, onChange: handlePageInputChange, min: 1, max: totalPages })] })), _jsx(Button, { width: '125', buttonType: 'outline-transparent', onClick: onClickNext, disabled: pageIndex === totalPages - 1, children: "Next" })] }));
};
export default TableFooter;
//# sourceMappingURL=TableFooter.js.map