taipy/frontend/taipy-gui/src/components/Taipy/PaginatedTable.tsx

/*
 * Copyright 2021-2025 Avaiga Private Limited
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
 * the License. You may obtain a copy of the License at
 *
 *        http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
 * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
 * specific language governing permissions and limitations under the License.
 */

import React, {
    ChangeEvent,
    CSSProperties,
    MouseEvent,
    useCallback,
    useEffect,
    useMemo,
    useRef,
    useState,
} from "react";

import AddIcon from "@mui/icons-material/Add";
import DataSaverOff from "@mui/icons-material/DataSaverOff";
import DataSaverOn from "@mui/icons-material/DataSaverOn";
import Download from "@mui/icons-material/Download";
import Box from "@mui/material/Box";
import IconButton from "@mui/material/IconButton";
import Paper from "@mui/material/Paper";
import Skeleton from "@mui/material/Skeleton";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TablePagination from "@mui/material/TablePagination";
import TableRow from "@mui/material/TableRow";
import TableSortLabel from "@mui/material/TableSortLabel";
import Tooltip from "@mui/material/Tooltip";
import Typography from "@mui/material/Typography";
import { visuallyHidden } from "@mui/utils";

import { createRequestTableUpdateAction, createSendActionNameAction } from "../../context/taipyReducers";
import { emptyArray } from "../../utils";
import {
    useClassNames,
    useDispatch,
    useDispatchRequestUpdateOnFirstRender,
    useDynamicJsonProperty,
    useDynamicProperty,
    useFormatConfig,
    useModule,
} from "../../utils/hooks";
import TableFilter from "./TableFilter";
import {
    addActionColumn,
    baseBoxSx,
    ColumnDesc,
    DEFAULT_SIZE,
    defaultColumns,
    DownloadAction,
    EDIT_COL,
    EditableCell,
    FilterDesc,
    generateHeaderClassName,
    getClassName,
    getColumnHeader,
    getFormatFn,
    getPageKey,
    getRowIndex,
    getSortByIndex,
    getTooltip,
    headBoxSx,
    iconInRowSx,
    OnCellValidation,
    OnRowClick,
    OnRowDeletion,
    OnRowSelection,
    Order,
    PageSizeOptionsType,
    paperSx,
    ROW_CLASS_NAME,
    RowType,
    RowValue,
    tableSx,
    TaipyPaginatedTableProps,
} from "./tableUtils";
import { getComponentClassName } from "./TaipyStyle";
import { getCssSize, getSuffixedClassNames, getUpdateVar } from "./utils";

const loadingStyle: CSSProperties = { width: "100%", height: "3em", textAlign: "right", verticalAlign: "center" };
const skeletonSx = { width: "100%", height: "3em" };

const rowsPerPageOptions: PageSizeOptionsType = [10, 50, 100, 500];

const PaginatedTable = (props: TaipyPaginatedTableProps) => {
    const {
        id,
        updateVarName,
        pageSizeOptions,
        allowAllRows = false,
        showAll = false,
        height,
        selected = emptyArray,
        updateVars,
        onEdit = "",
        onDelete = "",
        onAdd = "",
        onAction = "",
        width = "100%",
        size = DEFAULT_SIZE,
        userData,
        downloadable = false,
        compare = false,
        onCompare = "",
        useCheckbox = false,
        sortable = true,
    } = props;
    const pageSize = props.pageSize === undefined || props.pageSize < 1 ? 100 : Math.round(props.pageSize);
    const [value, setValue] = useState<Record<string, unknown>>({});
    const [startIndex, setStartIndex] = useState(0);
    const [rowsPerPage, setRowsPerPage] = useState(pageSize);
    const [order, setOrder] = useState<Order>("asc");
    const [orderBy, setOrderBy] = useState("");
    const [loading, setLoading] = useState(true);
    const [aggregates, setAggregates] = useState<string[]>([]);
    const [appliedFilters, setAppliedFilters] = useState<FilterDesc[]>([]);
    const dispatch = useDispatch();
    const pageKey = useRef("no-page");
    const selectedRowRef = useRef<HTMLTableRowElement | null>(null);
    const formatConfig = useFormatConfig();
    const module = useModule();

    const refresh = props.data?.__taipy_refresh !== undefined;
    const className = useClassNames(props.libClassName, props.dynamicClassName, props.className);
    const active = useDynamicProperty(props.active, props.defaultActive, true);
    const editable = useDynamicProperty(props.editable, props.defaultEditable, false);
    const hover = useDynamicProperty(props.hoverText, props.defaultHoverText, undefined);
    const baseColumns = useDynamicJsonProperty(props.columns, props.defaultColumns, defaultColumns);

    const [
        colsOrder,
        columns,
        cellClassNames,
        tooltips,
        formats,
        handleNan,
        filter,
        partialEditable,
        calcWidth,
        nbColHeaders,
        headersInfo,
    ] = useMemo(() => {
        let hNan = !!props.nanValue;
        let nbColHeaders = 1;
        if (baseColumns) {
            try {
                let filter = false;
                let partialEditable = editable;
                const newCols: Record<string, ColumnDesc> = {};
                Object.entries(baseColumns).forEach(([cId, cDesc]) => {
                    const nDesc = (newCols[cId] = { ...cDesc });
                    if (typeof nDesc.filter != "boolean") {
                        nDesc.filter = !!props.filter;
                    }
                    filter = filter || nDesc.filter;
                    if (typeof nDesc.notEditable == "boolean") {
                        partialEditable = partialEditable || !nDesc.notEditable;
                    } else {
                        nDesc.notEditable = !editable;
                    }
                    if (nDesc.tooltip === undefined) {
                        nDesc.tooltip = props.tooltip;
                    }
                    if (nDesc.multi !== undefined) {
                        nDesc.sortable = false;
                    } else if (typeof nDesc.sortable != "boolean") {
                        nDesc.sortable = sortable;
                    }
                    nbColHeaders = Math.max(nbColHeaders, nDesc.headers?.length || 0);
                });
                addActionColumn(
                    (active && partialEditable && (onAdd || onDelete) ? 1 : 0) +
                        (active && filter ? 1 : 0) +
                        (active && downloadable ? 1 : 0),
                    newCols
                );
                const colsOrder = Object.keys(newCols).sort(getSortByIndex(newCols));
                const headersInfo = [];
                if (nbColHeaders > 1) {
                    for (let i = 0; i < nbColHeaders; i++) {
                        const headers = colsOrder.map((col, idx) => {
                            const header = getColumnHeader(newCols, col, i);
                            return idx > 0 && header === getColumnHeader(newCols, colsOrder[idx - 1], i)
                                ? undefined
                                : header;
                        });
                        const colSpans = headers.map((header, idx) => {
                            if (header === undefined) {
                                return 0;
                            }
                            const nh = headers.slice(idx + 1);
                            const nb = nh.findIndex((h) => h !== undefined);
                            return nb == -1 ? nh.length + 1 : nb + 1;
                        });
                        headersInfo.push({ headers, colSpans });
                    }
                }
                let nbWidth = 0;
                let widthRate = 0;
                const functions = colsOrder.reduce<Record<string, Record<string, string>>>((pv, col) => {
                    if (newCols[col].className) {
                        pv.classNames = pv.classNames || {};
                        pv.classNames[newCols[col].dfid] = newCols[col].className;
                    }
                    hNan = hNan || !!newCols[col].nanValue;
                    if (newCols[col].tooltip) {
                        pv.tooltips = pv.tooltips || {};
                        pv.tooltips[newCols[col].dfid] = newCols[col].tooltip;
                    }
                    if (newCols[col].formatFn) {
                        pv.formats = pv.formats || {};
                        pv.formats[newCols[col].dfid] = newCols[col].formatFn;
                    }
                    if (newCols[col].width !== undefined) {
                        const cssWidth = getCssSize(newCols[col].width);
                        if (cssWidth) {
                            newCols[col].width = cssWidth;
                            nbWidth++;
                            if (cssWidth.endsWith("%")) {
                                widthRate += parseInt(cssWidth, 10);
                            }
                        }
                    }
                    return pv;
                }, {});
                nbWidth = nbWidth ? colsOrder.length - nbWidth : 0;
                if (props.rowClassName) {
                    functions.classNames = functions.classNames || {};
                    functions.classNames[ROW_CLASS_NAME] = props.rowClassName;
                }
                return [
                    colsOrder,
                    newCols,
                    functions.classNames,
                    functions.tooltips,
                    functions.formats,
                    hNan,
                    filter,
                    partialEditable,
                    nbWidth > 0 ? `${(100 - widthRate) / nbWidth}%` : undefined,
                    nbColHeaders,
                    headersInfo,
                ];
            } catch (e) {
                console.info("PaginatedTable.columns: ", (e as Error).message || e);
            }
        }
        return [
            [] as string[],
            {} as Record<string, ColumnDesc>,
            {} as Record<string, string>,
            {} as Record<string, string>,
            {} as Record<string, string>,
            hNan,
            false,
            false,
            "",
            1,
            [],
        ];
    }, [
        active,
        editable,
        onAdd,
        onDelete,
        baseColumns,
        props.rowClassName,
        props.tooltip,
        props.nanValue,
        props.filter,
        downloadable,
        sortable,
    ]);

    useDispatchRequestUpdateOnFirstRender(dispatch, id, module, updateVars);

    /*
    TODO: If the 'selected' value is a negative number, it will lead to unexpected pagination behavior.
    For instance, if 'selected' is -1, the pagination will display from -99 to 0 and no data will be selected.
    Need to fix this issue.
    */
    useEffect(() => {
        if (selected.length) {
            if (selected[0] < startIndex || selected[0] > startIndex + rowsPerPage) {
                setLoading(true);
                setStartIndex(rowsPerPage * Math.floor(selected[0] / rowsPerPage));
            }
        }
    }, [selected, startIndex, rowsPerPage]);

    useEffect(() => {
        if (!refresh && props.data && props.data[pageKey.current] !== undefined) {
            setValue(props.data[pageKey.current]);
            setLoading(false);
        }
    }, [refresh, props.data]);

    useEffect(() => {
        const endIndex = showAll ? -1 : startIndex + rowsPerPage - 1;
        const cols = colsOrder.map((col) => columns[col].dfid).filter((c) => c != EDIT_COL);
        const afs = appliedFilters.filter((fd) => Object.values(columns).some((cd) => cd.dfid === fd.col));
        pageKey.current = getPageKey(
            columns,
            `${startIndex}-${endIndex}`,
            cols,
            orderBy,
            order,
            afs,
            aggregates,
            cellClassNames,
            tooltips,
            formats
        );
        if (refresh || !props.data || props.data[pageKey.current] === undefined) {
            setLoading(true);
            const applies = aggregates.length
                ? colsOrder.reduce<Record<string, unknown>>((pv, col) => {
                      if (columns[col].apply) {
                          pv[columns[col].dfid] = columns[col].apply;
                      }
                      return pv;
                  }, {})
                : undefined;
            dispatch(
                createRequestTableUpdateAction(
                    updateVarName,
                    id,
                    module,
                    cols,
                    pageKey.current,
                    startIndex,
                    endIndex,
                    orderBy,
                    order,
                    aggregates,
                    applies,
                    cellClassNames,
                    tooltips,
                    formats,
                    handleNan,
                    afs,
                    compare ? onCompare : undefined,
                    updateVars && getUpdateVar(updateVars, "comparedatas"),
                    typeof userData == "object"
                        ? (userData as Record<string, Record<string, unknown>>).context
                        : undefined
                )
            );
        } else {
            setValue(props.data[pageKey.current]);
            setLoading(false);
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [
        refresh,
        startIndex,
        aggregates,
        colsOrder,
        columns,
        showAll,
        cellClassNames,
        tooltips,
        formats,
        rowsPerPage,
        order,
        orderBy,
        updateVarName,
        updateVars,
        id,
        handleNan,
        appliedFilters,
        dispatch,
        module,
        compare,
        onCompare,
        userData,
    ]);

    const onSort = useCallback(
        (e: MouseEvent<HTMLElement>) => {
            const col = e.currentTarget.getAttribute("data-dfid");
            if (col) {
                const isAsc = orderBy === col && order === "asc";
                setOrder(isAsc ? "desc" : "asc");
                setOrderBy(col);
            }
        },
        [orderBy, order]
    );

    const handleChangePage = useCallback(
        (event: unknown, newPage: number) => {
            setStartIndex(newPage * rowsPerPage);
        },
        [rowsPerPage]
    );

    const handleChangeRowsPerPage = useCallback((event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
        setLoading(true);
        setRowsPerPage(parseInt(event.target.value, 10));
        setStartIndex(0);
    }, []);

    const onAggregate = useCallback((e: MouseEvent<HTMLElement>) => {
        const groupBy = e.currentTarget.getAttribute("data-dfid");
        if (groupBy) {
            setAggregates((ags) => {
                const nags = ags.filter((ag) => ag !== groupBy);
                if (ags.length == nags.length) {
                    nags.push(groupBy);
                }
                return nags;
            });
        }
        e.stopPropagation();
    }, []);

    const onAddRowClick = useCallback(
        () =>
            dispatch(
                createSendActionNameAction(updateVarName, module, {
                    action: onAdd,
                    index: startIndex,
                    user_data: userData,
                })
            ),
        [startIndex, dispatch, updateVarName, onAdd, module, userData]
    );

    const onDownload = useCallback(
        () =>
            dispatch(
                createSendActionNameAction(updateVarName, module, {
                    action: DownloadAction,
                    user_data: userData,
                })
            ),
        [dispatch, updateVarName, module, userData]
    );

    const tableContainerSx = useMemo(() => ({ maxHeight: height }), [height]);

    const pso = useMemo(() => {
        let psOptions = rowsPerPageOptions;
        if (pageSizeOptions) {
            try {
                psOptions = JSON.parse(pageSizeOptions);
            } catch (e) {
                console.log("PaginatedTable pageSizeOptions is wrong ", pageSizeOptions, e);
            }
        }
        if (
            pageSize > 0 &&
            !psOptions.some((ps) =>
                typeof ps === "number" ? ps === pageSize : typeof ps.value === "number" ? ps.value === pageSize : false
            )
        ) {
            psOptions.push({ value: pageSize, label: "" + pageSize });
        }
        if (allowAllRows) {
            psOptions.push({ value: -1, label: "All" });
        }
        psOptions.sort((a, b) => (typeof a === "number" ? a : a.value) - (typeof b === "number" ? b : b.value));
        return psOptions;
    }, [pageSizeOptions, allowAllRows, pageSize]);

    const { rows, rowCount, filteredCount, compRows } = useMemo(() => {
        const ret = { rows: undefined, rowCount: 0, filteredCount: 0, compRows: [] } as {
            rows?: RowType[];
            rowCount: number;
            filteredCount: number;
            compRows: RowType[];
        };
        if (value) {
            if (value.data) {
                ret.rows = value.data as RowType[];
            }
            if (value.rowcount) {
                ret.rowCount = value.rowcount as unknown as number;
                if (value.fullrowcount && value.rowcount != value.fullrowcount) {
                    ret.filteredCount = (value.fullrowcount as unknown as number) - ret.rowCount;
                }
            }
            if (value.comp) {
                ret.compRows = value.comp as RowType[];
            }
        }
        return ret;
    }, [value]);

    const onCellValidation: OnCellValidation = useCallback(
        (value: RowValue, rowIndex: number, colName: string, userValue: string, tz?: string) =>
            dispatch(
                createSendActionNameAction(updateVarName, module, {
                    action: onEdit,
                    value: value,
                    index: rows ? getRowIndex(rows[rowIndex], rowIndex, startIndex) : startIndex,
                    col: colName,
                    user_value: userValue,
                    tz: tz,
                    user_data: userData,
                })
            ),
        [dispatch, updateVarName, onEdit, rows, startIndex, module, userData]
    );

    const onRowDeletion: OnRowDeletion = useCallback(
        (rowIndex: number) =>
            dispatch(
                createSendActionNameAction(updateVarName, module, {
                    action: onDelete,
                    index: rows ? getRowIndex(rows[rowIndex], rowIndex, startIndex) : startIndex,
                    user_data: userData,
                })
            ),
        [dispatch, updateVarName, onDelete, rows, startIndex, module, userData]
    );

    const onRowSelection: OnRowSelection = useCallback(
        (rowIndex: number, colName?: string, value?: string) =>
            dispatch(
                createSendActionNameAction(updateVarName, module, {
                    action: onAction,
                    index: rows ? getRowIndex(rows[rowIndex], rowIndex, startIndex) : startIndex,
                    col: colName === undefined ? null : colName,
                    value,
                    reason: value === undefined ? "click" : "button",
                    user_data: userData,
                })
            ),
        [dispatch, updateVarName, onAction, rows, startIndex, module, userData]
    );

    const onRowClick: OnRowClick = useCallback(
        (e: MouseEvent<HTMLTableRowElement>) => {
            const { index } = e.currentTarget.dataset || {};
            const rowIndex = index === undefined ? NaN : Number(index);
            if (!isNaN(rowIndex)) {
                onRowSelection(rowIndex);
            }
        },
        [onRowSelection]
    );

    const boxSx = useMemo(() => ({ ...baseBoxSx, width: width }), [width]);

    const rowSpans = useMemo(
        () =>
            rows
                ? colsOrder
                      .filter((col) => columns[col].multi !== undefined)
                      .map((col) => {
                          const values = rows.map((r, idx) =>
                              idx > 0 && rows[idx - 1][col] == r[col] ? undefined : r[col]
                          );
                          return values.map((value, idx) => {
                              if (value === undefined) {
                                  return 0;
                              }
                              const nv = values.slice(idx + 1);
                              const nb = nv.findIndex((v) => v !== undefined);
                              return nb == -1 ? nv.length + 1 : nb + 1;
                          });
                      })
                : [],
        [colsOrder, columns, rows]
    );

    return (
        <Box
            id={id}
            sx={boxSx}
            className={`${className} ${getSuffixedClassNames(className, "-paginated")} ${getComponentClassName(
                props.children
            )}`}
        >
            <Paper sx={paperSx}>
                <Tooltip title={hover || ""}>
                    <TableContainer sx={tableContainerSx}>
                        <Table sx={tableSx} aria-labelledby="tableTitle" size={size} stickyHeader={true}>
                            <TableHead>
                                {Array.from(Array(nbColHeaders).keys()).map((idx) => {
                                    if (idx < nbColHeaders - 1) {
                                        return (
                                            <TableRow key={`rowheader${idx}`}>
                                                {colsOrder.map((col, i) => {
                                                    const colSpan =
                                                        headersInfo[idx] && headersInfo[idx].colSpans.length > i
                                                            ? headersInfo[idx].colSpans[i]
                                                            : 1;
                                                    return colSpan == 0 ? null : (
                                                        <TableCell
                                                            colSpan={colSpan}
                                                            key={`head${columns[col].dfid}`}
                                                            sx={
                                                                columns[col].width
                                                                    ? { minWidth: columns[col].width, maxWidth: columns[col].width }
                                                                    : calcWidth
                                                                    ? { width: calcWidth }
                                                                    : undefined
                                                            }
                                                            className={
                                                                col === "EDIT_COL"
                                                                    ? getSuffixedClassNames(className, "-action")
                                                                    : getSuffixedClassNames(
                                                                          className,
                                                                          generateHeaderClassName(columns[col].dfid)
                                                                      )
                                                            }
                                                        >
                                                            {(headersInfo[idx] &&
                                                                headersInfo[idx].headers.length > i &&
                                                                headersInfo[idx].headers[i]) ||
                                                                ""}
                                                        </TableCell>
                                                    );
                                                })}
                                            </TableRow>
                                        );
                                    } else {
                                        return (
                                            <TableRow key={`rowheader${idx}`}>
                                                {colsOrder.map((col, i) => (
                                                    <TableCell
                                                        key={`head${columns[col].dfid}`}
                                                        sortDirection={orderBy === columns[col].dfid && order}
                                                        sx={
                                                            columns[col].width
                                                                ? { minWidth: columns[col].width, maxWidth: columns[col].width }
                                                                : calcWidth
                                                                ? { width: calcWidth }
                                                                : undefined
                                                        }
                                                        className={
                                                            col === "EDIT_COL"
                                                                ? getSuffixedClassNames(className, "-action")
                                                                : getSuffixedClassNames(
                                                                      className,
                                                                      generateHeaderClassName(columns[col].dfid)
                                                                  )
                                                        }
                                                    >
                                                        {columns[col].dfid === EDIT_COL ? (
                                                            [
                                                                active && (editable || partialEditable) && onAdd ? (
                                                                    <Tooltip title="Add a row" key="addARow">
                                                                        <IconButton
                                                                            onClick={onAddRowClick}
                                                                            size="small"
                                                                            sx={iconInRowSx}
                                                                        >
                                                                            <AddIcon fontSize="inherit" />
                                                                        </IconButton>
                                                                    </Tooltip>
                                                                ) : null,
                                                                active && filter ? (
                                                                    <TableFilter
                                                                        key="filter"
                                                                        columns={columns}
                                                                        colsOrder={colsOrder}
                                                                        onValidate={setAppliedFilters}
                                                                        appliedFilters={appliedFilters}
                                                                        className={className}
                                                                        filteredCount={filteredCount}
                                                                    />
                                                                ) : null,
                                                                active && downloadable ? (
                                                                    <Tooltip title="Download as CSV" key="downloadCsv">
                                                                        <IconButton
                                                                            onClick={onDownload}
                                                                            size="small"
                                                                            sx={iconInRowSx}
                                                                        >
                                                                            <Download fontSize="inherit" />
                                                                        </IconButton>
                                                                    </Tooltip>
                                                                ) : null,
                                                            ]
                                                        ) : (
                                                            <TableSortLabel
                                                                active={orderBy === columns[col].dfid}
                                                                direction={
                                                                    orderBy === columns[col].dfid ? order : "asc"
                                                                }
                                                                data-dfid={columns[col].dfid}
                                                                onClick={onSort}
                                                                disabled={!active || !columns[col].sortable}
                                                                hideSortIcon={!active || !columns[col].sortable}
                                                            >
                                                                <Box sx={headBoxSx}>
                                                                    {columns[col].groupBy ? (
                                                                        <IconButton
                                                                            onClick={onAggregate}
                                                                            size="small"
                                                                            title="aggregate"
                                                                            data-dfid={columns[col].dfid}
                                                                            disabled={!active}
                                                                            sx={iconInRowSx}
                                                                        >
                                                                            {aggregates.includes(columns[col].dfid) ? (
                                                                                <DataSaverOff fontSize="inherit" />
                                                                            ) : (
                                                                                <DataSaverOn fontSize="inherit" />
                                                                            )}
                                                                        </IconButton>
                                                                    ) : null}
                                                                    {columns[col].title === undefined
                                                                        ? (headersInfo[idx] &&
                                                                              headersInfo[idx].headers.length > i &&
                                                                              headersInfo[idx].headers[i]) ||
                                                                          columns[col].dfid
                                                                        : columns[col].title}
                                                                </Box>
                                                                {orderBy === columns[col].dfid ? (
                                                                    <Box component="span" sx={visuallyHidden}>
                                                                        {order === "desc"
                                                                            ? "sorted descending"
                                                                            : "sorted ascending"}
                                                                    </Box>
                                                                ) : null}
                                                            </TableSortLabel>
                                                        )}
                                                    </TableCell>
                                                ))}
                                            </TableRow>
                                        );
                                    }
                                })}
                            </TableHead>
                            <TableBody>
                                {rows?.map((row, index) => {
                                    const sel = selected.indexOf(index + startIndex);
                                    if (sel == 0) {
                                        Promise.resolve().then(
                                            () =>
                                                selectedRowRef.current?.scrollIntoView &&
                                                selectedRowRef.current.scrollIntoView({ block: "center" })
                                        );
                                    }
                                    return (
                                        <TableRow
                                            hover
                                            tabIndex={-1}
                                            key={`row${index}`}
                                            selected={sel > -1}
                                            ref={sel == 0 ? selectedRowRef : undefined}
                                            className={getClassName(row, props.rowClassName)}
                                            data-index={index}
                                            onClick={active && onAction ? onRowClick : undefined}
                                        >
                                            {colsOrder.map((col, idx) => {
                                                const rowSpan = idx < rowSpans.length && index < rowSpans[idx].length ? rowSpans[idx][index] : 1;
                                                return (
                                                    <EditableCell
                                                        key={`cell${index}${columns[col].dfid}`}
                                                        className={getClassName(row, columns[col].className, col)}
                                                        tableClassName={className}
                                                        colDesc={columns[col]}
                                                        value={row[col]}
                                                        formattedVal={getFormatFn(row, columns[col].formatFn, col)}
                                                        formatConfig={formatConfig}
                                                        rowIndex={index}
                                                        onValidation={
                                                            active && !columns[col].notEditable && onEdit
                                                                ? onCellValidation
                                                                : undefined
                                                        }
                                                        onDeletion={
                                                            active && (editable || partialEditable) && onDelete
                                                                ? onRowDeletion
                                                                : undefined
                                                        }
                                                        onSelection={active && onAction ? onRowSelection : undefined}
                                                        nanValue={columns[col].nanValue || props.nanValue}
                                                        tooltip={getTooltip(row, columns[col].tooltip, col)}
                                                        comp={compRows && compRows[index] && compRows[index][col]}
                                                        useCheckbox={useCheckbox}
                                                        rowSpan={rowSpan}
                                                    />
                                                );
                                            })}
                                        </TableRow>
                                    );
                                })}
                                {!rows &&
                                    loading &&
                                    Array.from(Array(30).keys(), (v, idx) => (
                                        <TableRow hover key={"rowSkel" + idx}>
                                            {colsOrder.map((col, cIdx) => (
                                                <TableCell key={"skel" + cIdx}>
                                                    <Skeleton sx={skeletonSx} />
                                                </TableCell>
                                            ))}
                                        </TableRow>
                                    ))}
                            </TableBody>
                        </Table>
                    </TableContainer>
                </Tooltip>
                {!showAll &&
                    (loading ? (
                        <Skeleton sx={loadingStyle}>
                            <Typography>Loading...</Typography>
                        </Skeleton>
                    ) : (
                        <TablePagination
                            component="div"
                            count={rowCount}
                            page={startIndex / rowsPerPage}
                            rowsPerPage={rowsPerPage}
                            showFirstButton={true}
                            showLastButton={true}
                            rowsPerPageOptions={pso}
                            onPageChange={handleChangePage}
                            onRowsPerPageChange={handleChangeRowsPerPage}
                        />
                    ))}
            </Paper>
            {props.children}
        </Box>
    );
};

export default PaginatedTable;