@aures/custom-react-table
Version:
dynamic table based on react table v7
57 lines • 4.77 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 react_i18next_1 = require("react-i18next");
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({ name, 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]);
// console.log(pageSize, defaultPaginationValues);
function TablePaginationActions(props) {
const { count, page, rowsPerPage, onPageChange } = props;
const { t } = (0, react_i18next_1.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, 500];
// console.log({ paginationValues, pageSize });
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: [t('Rows per page'), (0, jsx_runtime_1.jsx)("select", Object.assign({ value: pageSize, onChange: (e) => {
setPageSize(Number(e.target.value));
const json = JSON.parse(window.localStorage.getItem('tableState2:' + name) || '{}');
json.pageSize = Number(e.target.value);
window.localStorage.setItem('tableState2:' + name, JSON.stringify(json));
}, 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: [t('Page'), " ", pageIndex + 1, " ", t('of'), " ", 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