@aures/custom-react-table
Version:
dynamic table based on react table v7
50 lines • 4.07 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { useTranslation } from 'react-i18next';
import { AngleDoubleSmallLeftIcon } from '../components/assets/AngleDoubleSmallLeftIcon';
import { AngleDoubleSmallRightIcon } from '../components/assets/AngleDoubleSmallRightIcon';
import { AngleSmallLeftIcon } from '../components/assets/AngleSmallLeftIcon';
import { AngleSmallRightIcon } from '../components/assets/AngleSmallRightIcon';
export function TablePagination({ name, instance, defaultPaginationValues, }) {
const { state: { pageIndex, pageSize, rowCount = instance.rows.length }, gotoPage, nextPage, pageOptions, previousPage, canPreviousPage, canNextPage, setPageSize, } = instance;
const handleChangePage = React.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 } = 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 (_jsxs("div", Object.assign({ className: "d-flex justify-content-end pagination" }, { children: [_jsxs("div", Object.assign({ className: "d-flex align-items-center" }, { children: [t('Rows per page'), _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) => (_jsx("option", Object.assign({ value: pageSize }, { children: pageSize }), pageSize))) }))] })), _jsx("button", Object.assign({ className: "btn", onClick: handleFirstPageButtonClick, disabled: !canPreviousPage }, { children: _jsx(AngleDoubleSmallLeftIcon, { height: 20, width: 20 }) })), _jsx("button", Object.assign({ className: "btn", onClick: handleBackButtonClick, disabled: !canPreviousPage }, { children: _jsx(AngleSmallLeftIcon, { height: 20, width: 20 }) })), _jsxs("span", Object.assign({ className: "d-flex align-items-center" }, { children: [t('Page'), " ", pageIndex + 1, " ", t('of'), " ", pageOptions.length] })), _jsx("button", Object.assign({ className: "btn", onClick: handleNextButtonClick, disabled: !canNextPage }, { children: _jsx(AngleSmallRightIcon, { height: 20, width: 20 }) })), _jsx("button", Object.assign({ className: "btn", onClick: handleLastPageButtonClick, disabled: !canNextPage }, { children: _jsx(AngleDoubleSmallRightIcon, { height: 20, width: 20 }) }))] })));
}
return rowCount ? (_jsx(TablePaginationActions, { count: rowCount, rowsPerPage: pageSize, page: pageIndex, onPageChange: handleChangePage })) : null;
}
//# sourceMappingURL=TablePagination.js.map