@maherunlocker/custom-react-table/dist/esm/Table/TablePagination.js

dynamic table based on react table v7

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
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({ 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]);
    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 (_jsxs("div", Object.assign({ className: "d-flex justify-content-end  pagination" }, { children: [_jsxs("div", Object.assign({ className: "d-flex align-items-center" }, { children: ["Lignes par page", _jsx("select", Object.assign({ value: pageSize, onChange: (e) => {
                                setPageSize(Number(e.target.value));
                            }, 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: ["Page ", pageIndex + 1, " sur ", 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