frontend/src/core/components/DataTable/toolbar/TablePagination.js

import { flipIconStyles, getCommonTooltipProps, parseFromValuesOrFunc } from "@/core/utils/utils";
import { useTheme } from "@emotion/react";
import {
    Box,
    IconButton,
    InputLabel,
    MenuItem,
    Pagination,
    PaginationItem,
    Select,
    Tooltip,
    Typography,
    useMediaQuery,
} from "@mui/material";

const defaultRowsPerPage = [5, 10, 15, 20, 25, 30, 50, 100];

const DataTable_TablePagination = ({ position = "bottom", table, ...rest }) => {
    const theme = useTheme();
    const isMobile = useMediaQuery("(max-width: 720px)");

    const {
        getState,
        options: {
            enableToolbarInternalActions,
            icons: { ChevronLeftIcon, ChevronRightIcon, FirstPageIcon, LastPageIcon },
            localization,
            muiPaginationProps,
            paginationDisplayMode,
        },
    } = table;

    const {
        pagination: { pageIndex = 0, pageSize = 10 },
        showGlobalFilter,
    } = getState();

    const paginationProps = {
        ...parseFromValuesOrFunc(muiPaginationProps, {
            table,
        }),
        ...rest,
    };

    const totalRowCount = table.getRowCount();
    const numberOfPages = table.getPageCount();
    const showFirstLastPageButtons = numberOfPages > 2;
    const firstRowIndex = pageIndex * pageSize;
    const lastRowIndex = Math.min(pageIndex * pageSize + pageSize, totalRowCount);

    const {
        SelectProps = {},
        disabled = false,
        rowsPerPageOptions = defaultRowsPerPage,
        showFirstButton = showFirstLastPageButtons,
        showLastButton = showFirstLastPageButtons,
        showRowsPerPage = true,
        ...restPaginationProps
    } = paginationProps ?? {};

    const disableBack = pageIndex <= 0 || disabled;
    const disableNext = lastRowIndex >= totalRowCount || disabled;

    if (isMobile && SelectProps?.native !== false) {
        SelectProps.native = true;
    }

    const tooltipProps = getCommonTooltipProps();

    return (
        <Box
            className="MuiTablePagination-root"
            sx={{
                alignItems: "center",
                display: "flex",
                flexWrap: "wrap",
                gap: "8px",
                justifyContent: { md: "space-between", sm: "center" },
                justifySelf: "flex-end",
                mt: position === "top" && enableToolbarInternalActions && !showGlobalFilter ? "3rem" : undefined,
                position: "relative",
                px: "8px",
                py: "12px",
                zIndex: 2,
            }}
        >
            {showRowsPerPage && (
                <Box sx={{ alignItems: "center", display: "flex", gap: "8px" }}>
                    <InputLabel htmlFor="mrt-rows-per-page" sx={{ mb: 0 }}>
                        {localization.rowsPerPage}
                    </InputLabel>
                    <Select
                        MenuProps={{ disableScrollLock: true }}
                        disableUnderline
                        disabled={disabled}
                        inputProps={{
                            "aria-label": localization.rowsPerPage,
                            id: "mrt-rows-per-page",
                        }}
                        label={localization.rowsPerPage}
                        onChange={(event) => table.setPageSize(+event.target.value)}
                        sx={{ mb: 0 }}
                        value={pageSize}
                        variant="standard"
                        {...SelectProps}
                    >
                        {rowsPerPageOptions.map((option) => {
                            const value = typeof option !== "number" ? option.value : option;
                            const label = typeof option !== "number" ? option.label : `${option}`;
                            return (
                                SelectProps?.children ??
                                (SelectProps?.native ? (
                                    <option key={value} value={value}>
                                        {label}
                                    </option>
                                ) : (
                                    <MenuItem key={value} sx={{ m: 0 }} value={value}>
                                        {label}
                                    </MenuItem>
                                ))
                            );
                        })}
                    </Select>
                </Box>
            )}
            {paginationDisplayMode === "pages" ? (
                <Pagination
                    count={numberOfPages}
                    disabled={disabled}
                    onChange={(_e, newPageIndex) => table.setPageIndex(newPageIndex - 1)}
                    page={pageIndex + 1}
                    renderItem={(item) => (
                        <PaginationItem
                            slots={{
                                first: FirstPageIcon,
                                last: LastPageIcon,
                                next: ChevronRightIcon,
                                previous: ChevronLeftIcon,
                            }}
                            {...item}
                        />
                    )}
                    showFirstButton={showFirstButton}
                    showLastButton={showLastButton}
                    {...restPaginationProps}
                />
            ) : paginationDisplayMode === "default" ? (
                <>
                    <Typography
                        align="center"
                        component="span"
                        sx={{ m: "0 4px", minWidth: "8ch" }}
                        variant="body2"
                    >{`${
                        lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()
                    }-${lastRowIndex.toLocaleString()} ${
                        localization.of
                    } ${totalRowCount.toLocaleString()}`}</Typography>
                    <Box gap="xs">
                        {showFirstButton && (
                            <Tooltip {...tooltipProps} title={localization.goToFirstPage}>
                                <span>
                                    <IconButton
                                        aria-label={localization.goToFirstPage}
                                        disabled={disableBack}
                                        onClick={() => table.firstPage()}
                                        size="small"
                                    >
                                        <FirstPageIcon {...flipIconStyles(theme)} />
                                    </IconButton>
                                </span>
                            </Tooltip>
                        )}
                        <Tooltip {...tooltipProps} title={localization.goToPreviousPage}>
                            <span>
                                <IconButton
                                    aria-label={localization.goToPreviousPage}
                                    disabled={disableBack}
                                    onClick={() => table.previousPage()}
                                    size="small"
                                >
                                    <ChevronLeftIcon {...flipIconStyles(theme)} />
                                </IconButton>
                            </span>
                        </Tooltip>
                        <Tooltip {...tooltipProps} title={localization.goToNextPage}>
                            <span>
                                <IconButton
                                    aria-label={localization.goToNextPage}
                                    disabled={disableNext}
                                    onClick={() => table.nextPage()}
                                    size="small"
                                >
                                    <ChevronRightIcon {...flipIconStyles(theme)} />
                                </IconButton>
                            </span>
                        </Tooltip>
                        {showLastButton && (
                            <Tooltip {...tooltipProps} title={localization.goToLastPage}>
                                <span>
                                    <IconButton
                                        aria-label={localization.goToLastPage}
                                        disabled={disableNext}
                                        onClick={() => table.lastPage()}
                                        size="small"
                                    >
                                        <LastPageIcon {...flipIconStyles(theme)} />
                                    </IconButton>
                                </span>
                            </Tooltip>
                        )}
                    </Box>
                </>
            ) : null}
        </Box>
    );
};
export default DataTable_TablePagination;