@maherunlocker/custom-react-table
Version:
dynamic table based on react table v7
51 lines • 4.26 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TablePagination = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const AngleDoubleSmallLeftIcon_1 = require("../components/assets/AngleDoubleSmallLeftIcon");
const AngleDoubleSmallRightIcon_1 = require("../components/assets/AngleDoubleSmallRightIcon");
const AngleSmallLeftIcon_1 = require("../components/assets/AngleSmallLeftIcon");
const AngleSmallRightIcon_1 = require("../components/assets/AngleSmallRightIcon");
function TablePagination({ instance, defaultPaginationValues, }) {
const { state: { pageIndex, pageSize, rowCount = instance.rows.length }, gotoPage, nextPage, pageOptions, previousPage, canPreviousPage, canNextPage, setPageSize, } = instance;
const handleChangePage = react_1.default.useCallback((event, newPage) => {
if (newPage === pageIndex + 1) {
nextPage();
}
else if (newPage === pageIndex - 1) {
previousPage();
}
else {
gotoPage(newPage);
}
}, [gotoPage, nextPage, pageIndex, previousPage]);
function TablePaginationActions(props) {
const { count, page, rowsPerPage, onPageChange } = props;
// const { t } = useTranslation();
const handleFirstPageButtonClick = (event) => {
onPageChange(event, 0);
};
const handleBackButtonClick = (event) => {
onPageChange(event, page - 1);
};
const handleNextButtonClick = (event) => {
onPageChange(event, page + 1);
};
const handleLastPageButtonClick = (event) => {
onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
};
const paginationValues = (defaultPaginationValues === null || defaultPaginationValues === void 0 ? void 0 : defaultPaginationValues.length) > 0
? defaultPaginationValues
: [10, 20, 30, 40, 50, 250];
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "d-flex justify-content-end pagination" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "d-flex align-items-center" }, { children: ["Lignes par page", (0, jsx_runtime_1.jsx)("select", Object.assign({ value: pageSize, onChange: (e) => {
setPageSize(Number(e.target.value));
}, style: { marginRight: '32px', marginLeft: '8px' } }, { children: paginationValues.map((pageSize) => ((0, jsx_runtime_1.jsx)("option", Object.assign({ value: pageSize }, { children: pageSize }), pageSize))) }))] })), (0, jsx_runtime_1.jsx)("button", Object.assign({ className: "btn", onClick: handleFirstPageButtonClick, disabled: !canPreviousPage }, { children: (0, jsx_runtime_1.jsx)(AngleDoubleSmallLeftIcon_1.AngleDoubleSmallLeftIcon, { height: 20, width: 20 }) })), (0, jsx_runtime_1.jsx)("button", Object.assign({ className: "btn", onClick: handleBackButtonClick, disabled: !canPreviousPage }, { children: (0, jsx_runtime_1.jsx)(AngleSmallLeftIcon_1.AngleSmallLeftIcon, { height: 20, width: 20 }) })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "d-flex align-items-center" }, { children: ["Page ", pageIndex + 1, " sur ", pageOptions.length] })), (0, jsx_runtime_1.jsx)("button", Object.assign({ className: "btn", onClick: handleNextButtonClick, disabled: !canNextPage }, { children: (0, jsx_runtime_1.jsx)(AngleSmallRightIcon_1.AngleSmallRightIcon, { height: 20, width: 20 }) })), (0, jsx_runtime_1.jsx)("button", Object.assign({ className: "btn", onClick: handleLastPageButtonClick, disabled: !canNextPage }, { children: (0, jsx_runtime_1.jsx)(AngleDoubleSmallRightIcon_1.AngleDoubleSmallRightIcon, { height: 20, width: 20 }) }))] })));
}
return rowCount ? ((0, jsx_runtime_1.jsx)(TablePaginationActions, { count: rowCount, rowsPerPage: pageSize, page: pageIndex, onPageChange: handleChangePage })) : null;
}
exports.TablePagination = TablePagination;
//# sourceMappingURL=TablePagination.js.map