@argusoft/medplat-app-shell 1.0.6 → 1.0.8

package/src/views/custom-components/CustomizedTable/CustomizedTableV2.jsx

@@ -0,0 +1,1407 @@
+import React, { useState, useEffect, useMemo, useDeferredValue, useRef } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Pagination,
+  Paper,
+  TablePagination,
+  Box,
+  Typography,
+  Checkbox,
+  TableContainer,
+  useTheme,
+  alpha,
+} from '@mui/material';
+import Grid from '@mui/material/Grid2';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowDownShortWide, faArrowUpWideShort, faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import CustomActionIcons from '@/views/custom-components/CustomActionIcons';
+import CustomInfiniteScroll from '@/views/custom-components/CustomInfiniteScroll';
+import { useTranslateProvider } from '@/common/languageTranslator/TranslationContext';
+import {
+  createStyledTableCell,
+  createStyledTableContainer,
+  createStyledTableRow,
+  defaultStyles,
+  TooltipContent,
+} from './helper.jsx';
+import VirtualizedTableBody from './VirtualizeTableBody.jsx';
+import { useSelector } from 'react-redux';
+import { getUseSkeleton } from '@/store/reducers/SkeletonReducer';
+
+/**
+ * A customizable table component that supports various features like pagination, sorting,
+ * row selection, infinite scrolling, and custom column rendering.
+ *
+ * @component
+ */
+const CustomizedTable = ({
+  colspanData,
+  dataColspan,
+  columns, // Column configuration
+  tableData, // Data to display
+  actions, // Row actions (can be array or function returning array)
+  displayPageSelect = false, // Show page selection dropdown
+  doNotShowTableHead, // Hide table headers
+  handleSort, // Function to handle column sorting
+  disableHtml = false, // Disable HTML rendering in cells
+  conditionCheckObj = {}, // Conditions for showing actions
+  dataTestId, // For testing
+  styleConfig = {},
+  isLoading, // Loading state
+  strip = true, // Zebra striping for rows
+  paginationConfig = {},
+  rowSelectionConfig = {},
+  scrollToTop = false,
+  setScrollToTop = () => {  },
+  showAllBorders = false,
+  showScrollArrows = false,
+  showFullContent = true,
+  ...props
+}) => {
+  const useSkeleton = useSelector(getUseSkeleton);
+  const headerRow1Ref = useRef(null);
+  const headerRow2Ref = useRef(null);
+  const [headerRow1Height, setHeaderRow1Height] = useState(0);
+  const [headerRow2Height, setHeaderRow2Height] = useState(0);
+  const theme = useTheme();
+  // Add selection column if row selection is enabled
+  const {
+    pagination = true,
+    paginationType = 'client-side',
+    rowsPerPageInTable = 10,
+    currentPage: propCurrentPage,
+    onPageChange,
+    loadMore,
+    hasMore,
+    totalRows,
+  } = paginationConfig;
+  const {
+    setSelectedRows,
+    selectedRows = [],
+    rowSelectionEnabled = false,
+    selectedRowsUnique = 'id',
+  } = rowSelectionConfig;
+
+  const [pinnedCols, setPinnedCols] = useState([]);
+  const deferredPinnedCols = useDeferredValue(pinnedCols);
+  const tableRef = useRef(null);
+  const containerRef = useRef(null);
+  const scrollPosRef = useRef({ top: 0, left: 0 });
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+
+  const checkScroll = React.useCallback((element) => {
+    if (!element) return;
+    const { scrollLeft, scrollWidth, clientWidth } = element;
+    setCanScrollLeft(scrollLeft > 0);
+    setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 5); // 5px buffer
+  }, []);
+
+  const handleScroll = React.useCallback((e) => {
+    scrollPosRef.current = {
+      top: e.target.scrollTop,
+      left: e.target.scrollLeft,
+    };
+    if (showScrollArrows) {
+      if (!isAutoScrolling.current) {
+        stopScrolling();
+      }
+      checkScroll(e.target);
+    }
+  }, [showScrollArrows, checkScroll]);
+
+  const scrollIntervalRef = useRef(null);
+  const isAutoScrolling = useRef(false);
+
+  const stopScrolling = () => {
+    isAutoScrolling.current = false;
+    if (scrollIntervalRef.current) {
+      clearInterval(scrollIntervalRef.current);
+      scrollIntervalRef.current = null;
+    }
+  };
+
+  const startScrolling = (direction) => {
+    if (isAutoScrolling.current) return;
+    isAutoScrolling.current = true;
+    stopScrolling(); // Double check
+    isAutoScrolling.current = true; // Set again after stopScrolling set it to false
+    scrollIntervalRef.current = setInterval(() => {
+      if (containerRef.current) {
+        containerRef.current.scrollBy({
+          left: direction === 'left' ? -10 : 10,
+          behavior: 'auto',
+        });
+      }
+    }, 20);
+  };
+
+  useEffect(() => {
+    if (showScrollArrows && containerRef.current) {
+      checkScroll(containerRef.current);
+      // Also check on resize
+      const observer = new ResizeObserver(() => checkScroll(containerRef.current));
+      observer.observe(containerRef.current);
+      return () => {
+        observer.disconnect();
+        stopScrolling();
+      };
+    }
+  }, [showScrollArrows, tableData, checkScroll]);
+
+  // 6. Handle header height measurements for correct positioning and stickiness
+  React.useLayoutEffect(() => {
+    const updateHeights = () => {
+      if (headerRow1Ref.current) {
+        setHeaderRow1Height(headerRow1Ref.current.offsetHeight);
+      } else {
+        setHeaderRow1Height(0);
+      }
+      if (headerRow2Ref.current) {
+        setHeaderRow2Height(headerRow2Ref.current.offsetHeight);
+      }
+    };
+
+    updateHeights();
+
+    // Use ResizeObserver for more robust height tracking
+    const observer1 = headerRow1Ref.current ? new ResizeObserver(updateHeights) : null;
+    const observer2 = headerRow2Ref.current ? new ResizeObserver(updateHeights) : null;
+
+    if (observer1) observer1.observe(headerRow1Ref.current);
+    if (observer2) observer2.observe(headerRow2Ref.current);
+
+    return () => {
+      observer1?.disconnect();
+      observer2?.disconnect();
+    };
+  }, [tableData, columns, colspanData, showAllBorders]);
+
+  // Dynamically correct sticky offset dimensions to fix overlap caused by colspans naturally expanding CSS widths
+  useEffect(() => {
+    if (!tableRef.current || !showAllBorders || pinnedCols.length === 0) return;
+
+    let rafId;
+    const updateOffsets = () => {
+      if (!tableRef.current) return;
+      const leftMap = {};
+      let currentLeft = 0;
+
+      // 1. Calculate boundaries sequentially
+      const ths = Array.from(tableRef.current.querySelectorAll('.row2-sticky-cell'));
+      ths.forEach((th) => {
+        const field = th.getAttribute('data-field');
+        if (field) {
+          const roundedLeft = Math.round(currentLeft);
+          th.style.setProperty('left', `${roundedLeft}px`, 'important');
+          tableRef.current.style.setProperty(`--actual-left-${field}`, `${roundedLeft}px`);
+          leftMap[field] = roundedLeft;
+          currentLeft += th.getBoundingClientRect().width;
+        }
+      });
+      // 2. Adjust Group Headers
+      const groups = Array.from(tableRef.current.querySelectorAll('.row1-sticky-cell'));
+      groups.forEach((th) => {
+        const first = th.getAttribute('data-first-child');
+        if (first && leftMap[first] !== undefined) {
+          th.style.setProperty('left', `${leftMap[first]}px`, 'important');
+        }
+      });
+      // 3. Adjust Data cells
+      const tds = Array.from(tableRef.current.querySelectorAll('.data-sticky-cell'));
+      tds.forEach((td) => {
+        const field = td.getAttribute('data-field');
+        if (field && leftMap[field] !== undefined) {
+          td.style.setProperty('left', `${leftMap[field]}px`, 'important');
+        }
+      });
+    };
+
+    // Initial paint calculation
+    updateOffsets();
+    const tId = setTimeout(updateOffsets, 100);
+
+    const ro =
+      typeof ResizeObserver !== 'undefined'
+        ? new ResizeObserver(() => {
+          cancelAnimationFrame(rafId);
+          rafId = requestAnimationFrame(updateOffsets);
+        })
+        : null;
+
+    if (ro) {
+      ro.observe(tableRef.current);
+      const stickyCells = Array.from(tableRef.current.querySelectorAll('.row2-sticky-cell'));
+      stickyCells.forEach((cell) => ro.observe(cell));
+    }
+
+    return () => {
+      clearTimeout(tId);
+      cancelAnimationFrame(rafId);
+      if (ro) ro.disconnect();
+    };
+  }, [columns, showAllBorders, pinnedCols, colspanData]);
+
+  /**
+   * Toggle pinning state for a specific column
+   * @param {string} field
+   */
+  const handleTogglePin = React.useCallback((e, field) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!showAllBorders || !field) return;
+    setPinnedCols((prev) => {
+      const isPinned = prev.includes(field);
+      if (isPinned) {
+        return prev.filter((col) => col !== field);
+      } else {
+        if (prev.length >= 5) {
+          return prev; // Max 5 columns limit
+        }
+        return [...prev, field];
+      }
+    });
+  }, []);
+
+  const { headerStyle, cellStyle, rowStyle, tableStyle } = styleConfig;
+  const maxLines = cellStyle?.maxLines || 1;
+
+  // Memoize styled components based on styleConfig
+  const StyledTableContainer = useMemo(() => createStyledTableContainer(tableStyle), [tableStyle]);
+
+  const StyledTableCell = useMemo(() => createStyledTableCell(headerStyle, cellStyle), []);
+
+  const StyledTableRow = useMemo(() => createStyledTableRow(rowStyle), []);
+  const infiniteScroll = paginationType === 'infinite-scroll';
+
+  useEffect(() => {
+    if (scrollToTop && containerRef.current) {
+      containerRef.current.scrollTop = 0;
+      scrollPosRef.current.top = 0; // Also reset saved position
+      setScrollToTop(false);
+    }
+  }, [scrollToTop, setScrollToTop]);
+
+  useEffect(() => {
+    if (containerRef.current) {
+      containerRef.current.scrollTop = scrollPosRef.current.top;
+      containerRef.current.scrollLeft = scrollPosRef.current.left;
+    }
+  }, [tableData, StyledTableContainer]);
+
+  // 1. Parse colspanData to associate EVERY visible DATA column with its intended group (skipping checkbox)
+  // 1. Map each physical visible DATA column to its group header
+  const columnToHeaderMap = useMemo(() => {
+    if (!colspanData) return {};
+    try {
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(`<table><tr>${dataColspan}</tr></table>`, 'text/html');
+      const ths = Array.from(doc.querySelectorAll('th'));
+
+      const map = {};
+
+      // Identify visible DATA columns only
+      const visibleDataOriginalIndices = []; // These are indices from the original `columns` array
+      columns.forEach((col, idx) => {
+        if (!col.hide) {
+          visibleDataOriginalIndices.push(idx);
+        }
+      });
+
+      let dataPtr = 0;
+      ths.forEach((th, index) => {
+        const span = parseInt(th.getAttribute('colspan') || '1', 10);
+        const groupLabel = th.innerHTML;
+        const groupId = `header-${index}`;
+
+        for (let i = 0; i < span; i++) {
+          if (dataPtr < visibleDataOriginalIndices.length) {
+            // Map the header info to the `originalIndex` that the data column will have in `baseCols`
+            // If row selection is enabled, data columns are shifted by 1 in `baseCols`
+            const baseColsIndex = visibleDataOriginalIndices[dataPtr] + (rowSelectionEnabled ? 1 : 0);
+            map[baseColsIndex] = { label: groupLabel, id: groupId, span: span };
+            dataPtr++;
+          }
+        }
+      });
+      return map;
+    } catch {
+      return {};
+    }
+  }, [colspanData, dataColspan, rowSelectionEnabled, columns]);
+
+  const visibleColumns = useMemo(() => {
+    if (!columns) return [];
+
+    // Create base list with stable originalIndex
+    const baseCols = rowSelectionEnabled
+      ? [
+        { field: 'rowSelect', label: '', minWidth: 60, isSticky: true, originalIndex: 0 },
+        ...columns.map((c, i) => ({ ...c, originalIndex: i + 1 })),
+      ]
+      : columns.map((c, i) => ({ ...c, originalIndex: i }));
+
+    const pinnedGroup = [];
+    const normalGroup = [];
+
+    baseCols.forEach((col) => {
+      const isPinned =
+        showAllBorders && (col.isSticky === true || col.isSticky === 'true' || deferredPinnedCols.includes(col.field));
+      const headerInfo = columnToHeaderMap[col.originalIndex] || { label: '', id: 'none' };
+
+      const processedCol = {
+        ...col,
+        isSticky: isPinned,
+        isUserPinned: deferredPinnedCols.includes(col.field),
+        groupLabel: headerInfo.label,
+        groupId: headerInfo.id,
+        groupSpan: headerInfo.span || 1,
+      };
+
+      if (isPinned) {
+        pinnedGroup.push(processedCol);
+      } else {
+        normalGroup.push(processedCol);
+      }
+    });
+
+    const finalColsOrder = [...pinnedGroup, ...normalGroup];
+    let cumulativeStickyWidth = 0;
+
+    return finalColsOrder.map((col, index, array) => {
+      const width = col.width || col.minWidth || (col.field === 'rowSelect' ? 60 : 150);
+      let stickyLeft = 0;
+      if (col.isSticky) {
+        stickyLeft = cumulativeStickyWidth;
+        cumulativeStickyWidth += width;
+      }
+
+      // Identify group start/end for borders (Task 1) - only for meaningful groups
+      const gid = col.groupId;
+      const meaningfulGroup =
+        gid && gid !== 'none' && gid !== 'rowSelect-internal-group' && gid !== 'Actions-internal-group';
+      const isGroupStart =
+        !meaningfulGroup ||
+        index === 0 ||
+        array[index - 1].groupId !== gid ||
+        array[index - 1].isSticky !== col.isSticky;
+      const isGroupEnd =
+        !meaningfulGroup ||
+        index === array.length - 1 ||
+        array[index + 1].groupId !== gid ||
+        array[index + 1].isSticky !== col.isSticky;
+
+      return {
+        ...col,
+        minWidth: width,
+        width,
+        maxWidth: 'none',
+        stickyLeft,
+        isGroupStart,
+        isGroupEnd,
+        isLastSticky: col.isSticky && (index === array.length - 1 || !array[index + 1].isSticky),
+        hasColspanGroup: !!meaningfulGroup && col.groupSpan > 1,
+      };
+    });
+  }, [rowSelectionEnabled, columns, deferredPinnedCols, columnToHeaderMap]);
+
+  const hasAnyPinned = useMemo(() => pinnedCols.length > 0, [pinnedCols]);
+  const colspanRowRef = useRef(null);
+
+  // Synthesis: Build Row 1 by grouping adjacent columns in our PRE-ORDERED visibleColumns
+  const reorderedGroups = useMemo(() => {
+    if (!colspanData) return [];
+
+    const results = [];
+    let current = null;
+
+    visibleColumns.forEach((col) => {
+      if (col.hide) return;
+
+      let gid = col.groupId || 'none';
+      let glabel = col.groupLabel || '';
+
+      if (col.field === 'rowSelect') {
+        gid = 'rowSelect-internal-group';
+        glabel = '';
+      }
+
+      if (current && current.groupId === gid && current.isSticky === col.isSticky) {
+        current.span += 1;
+        current.width += col.width;
+        if (col.isLastSticky) current.isLastSticky = true;
+      } else {
+        current = {
+          label: glabel,
+          groupId: gid,
+          isSticky: col.isSticky,
+          isLastSticky: col.isLastSticky,
+          stickyLeft: col.stickyLeft,
+          span: 1,
+          width: col.width,
+          firstChild: col.field || `col-${col.originalIndex}`,
+        };
+
+        results.push(current);
+      }
+    });
+    return results;
+  }, [visibleColumns, colspanData, hasAnyPinned]);
+
+  const { translate } = useTranslateProvider();
+  const [internalSortConfig, setInternalSortConfig] = useState({ field: null, order: null });
+
+  const [internalPage, setInternalPage] = useState(1);
+  const [rowsPerPage, setRowsPerPage] = useState(rowsPerPageInTable);
+  const [rowsPerPageOptionsArray, setRowsPerPageOptionsArray] = useState(null);
+
+  const rowDataFiltered = useMemo(() => tableData || [], [tableData]);
+
+  const rowData = useMemo(() => {
+    if (!internalSortConfig.field) return rowDataFiltered;
+
+    const { field, order } = internalSortConfig;
+    return [...rowDataFiltered].sort((a, b) => {
+      let valA = a[field];
+      let valB = b[field];
+
+      const isEmpty = (val) => val === null || val === undefined || val === '' || val === ' ' || val === 'NA';
+
+      if (isEmpty(valA) && !isEmpty(valB)) return 1;
+      if (!isEmpty(valA) && isEmpty(valB)) return -1;
+      if (isEmpty(valA) && isEmpty(valB)) return 0;
+
+      const getNumeric = (val) => {
+        if (typeof val === 'number') return val;
+        if (typeof val !== 'string') return NaN;
+        const cleaned = val.replace(/[^0-9.-]/g, '');
+        return cleaned !== '' ? parseFloat(cleaned) : NaN;
+      };
+
+      const numA = getNumeric(valA);
+      const numB = getNumeric(valB);
+
+      if (!isNaN(numA) && !isNaN(numB)) {
+        return order === 'asc' ? numA - numB : numB - numA;
+      }
+
+      const strA = valA.toString().toLowerCase();
+      const strB = valB.toString().toLowerCase();
+      return order === 'asc' ? strA.localeCompare(strB) : strB.localeCompare(strA);
+    });
+  }, [rowDataFiltered, internalSortConfig]);
+
+  const selectAllChecked = useMemo(() => {
+    return selectedRows?.length === rowData?.length && rowData?.length > 0;
+  }, [selectedRows, rowData]);
+
+  // Use provided page or internal state
+  const page = propCurrentPage !== undefined ? propCurrentPage : internalPage;
+
+  // Calculate rows per page options based on data size
+  useEffect(() => {
+    if (pagination && rowsPerPageInTable && rowData) {
+      setInternalPage(1);
+      calculateRowsPerPageOptions();
+    }
+    if (colspanRowRef.current) {
+      const height = colspanRowRef.current.getBoundingClientRect().height;
+      setHeaderRow1Height(height);
+    } else {
+      setHeaderRow1Height(0);
+    }
+  }, [rowsPerPageInTable, rowData, pagination]);
+
+  /**
+   * Calculate sensible rows per page options based on data size
+   */
+  const calculateRowsPerPageOptions = () => {
+    const numOptions = 5;
+
+    if (rowData.length <= rowsPerPageInTable) {
+      setRowsPerPageOptionsArray([rowsPerPageInTable]);
+    } else {
+      const increment = Math.ceil((rowData.length - rowsPerPageInTable) / (numOptions - 1));
+      const options = [rowsPerPageInTable];
+
+      for (let i = 1; i < numOptions - 1; i++) {
+        options.push(rowsPerPageInTable + i * increment);
+      }
+
+      options.push(rowData.length);
+      setRowsPerPageOptionsArray(options);
+    }
+  };
+
+  /**
+   * Handle page changes (delegating to parent if provided)
+   */
+  const handlePageChange = (newPage) => {
+    if (onPageChange) {
+      onPageChange(newPage); // Parent handles API call
+    } else {
+      setInternalPage(newPage); // Internal state for client-side
+    }
+  };
+
+  /**
+   * Handle changing rows per page
+   */
+  const handleChangeRowsPerPage = (event) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setInternalPage(1);
+  };
+
+  /**
+   * Handle select all rows
+   */
+  const handleSelectAll = () => {
+    if (selectedRows.length === rowData.length) {
+      setSelectedRows([]);
+    } else {
+      setSelectedRows([...rowData]);
+    }
+  };
+
+  /**
+   * Handle selecting a single row
+   */
+  const handleRowSelect = (row) => {
+    setSelectedRows((prev) => {
+      const isIncluded = prev.find((item) => item[selectedRowsUnique] === row[selectedRowsUnique]);
+
+      if (isIncluded) {
+        return prev.filter((item) => item[selectedRowsUnique] !== row[selectedRowsUnique]);
+      } else {
+        return [...prev, row];
+      }
+    });
+  };
+
+  /**
+   * Render cell content based on column type and configuration
+   */
+  const renderCellContent = (column, row, rowIndex) => {
+    // Select row checkbox
+    if (rowSelectionEnabled && column.field === 'rowSelect') {
+      return (
+        <Checkbox
+          color="primary"
+          checked={!!selectedRows.find((item) => item[selectedRowsUnique] === row[selectedRowsUnique])}
+          onChange={() => handleRowSelect(row)}
+        />
+      );
+    }
+
+    // Actions column
+    if (column.field === 'Actions' && actions) {
+      const actionItems = typeof actions === 'function' ? actions(row) : actions;
+      let defaultIconColor;
+      let defaultBackgroundColor;
+      let defaultHoverBackgroundColor;
+      let defaultBorderColor;
+      let defaultHoverIconColor;
+      let defaultRotateIcon;
+      return (
+        <div
+          style={{
+            ...defaultStyles.actionsContainer,
+            textAlign: column.align || 'left',
+            justifyContent: column.align === 'right' ? 'flex-end' : column.align === 'center' ? 'center' : 'flex-start',
+          }}
+          className="flex items-center h-full"
+        >
+          {actionItems.map((action, actionIndex) => {
+            if (!action) return null;
+            // Check if action should be displayed
+            const shouldDisplay = action?.condition ? action.condition(row, conditionCheckObj) : true;
+            if (!shouldDisplay) {
+              if (actionIndex === 0) {
+                return <>-</>;
+              }
+              return null;
+            }
+            if (action?.icon?.props?.icon?.iconName === 'pen') {
+              defaultIconColor = theme.palette.secondary.main;
+              defaultBackgroundColor = alpha(theme.palette.secondary.main, 0.1);
+              defaultHoverBackgroundColor = theme.palette.secondary.main;
+              defaultHoverIconColor = 'white';
+              defaultBorderColor = theme.palette.secondary.main;
+              defaultRotateIcon = true;
+            }
+            if (action?.icon?.props?.icon?.iconName === 'trash') {
+              defaultIconColor = theme.palette.error.main;
+              defaultBackgroundColor = alpha(theme.palette.error.main, 0.1);
+              defaultHoverBackgroundColor = theme.palette.error.main;
+              defaultHoverIconColor = 'white';
+              defaultBorderColor = theme.palette.error.main;
+              defaultRotateIcon = true;
+            }
+            if (action?.icon?.props?.icon?.iconName === 'bars') {
+              defaultIconColor = theme.palette.primary.main;
+              defaultBackgroundColor = alpha(theme.palette.primary.main, 0.1);
+              defaultHoverBackgroundColor = theme.palette.primary.main;
+              defaultHoverIconColor = 'white';
+              defaultBorderColor = theme.palette.primary.main;
+              defaultRotateIcon = true;
+            }
+            const isDisabled = action.disabled === true ? row.state !== 'ACTIVE' : 
+            false;
+
+            return (
+              <CustomActionIcons
+                key={actionIndex + 1}
+                disabled={isDisabled}
+                row={row}
+                icon={action.icon}
+                menuClick={action.menuClick}
+                menuItems={action.menuItems}
+                onClick={() => {
+                  if (!isDisabled) {
+                    action?.onClick(row, rowIndex);
+                  }
+                }}
+                iconColor={action.iconColor || defaultIconColor || 'primary'}
+                backgroundColor={action.backgroundColor || defaultBackgroundColor || 'transparent'}
+                hoverBackgroundColor={action.hoverBackgroundColor || defaultHoverBackgroundColor || '#E6EDEF'}
+                borderColor={action.borderColor || defaultBorderColor || 'gray'}
+                hoverIconColor={action.hoverIconColor || defaultHoverIconColor || 'primary'}
+                rotateIcon={action.rotateIcon || defaultRotateIcon || false}
+                dataTestId={action?.dataTestId}
+              />
+            );
+          })}
+        </div>
+      );
+    }
+
+    // Serial number column
+    if (column.field === 'Sr. No.') {
+      if (pagination && !infiniteScroll && rowsPerPage > 0) {
+        const startIndex = (page - 1) * rowsPerPage;
+        if (pagination && !infiniteScroll && rowsPerPage > 0) {
+          return (
+            <p className="text-[0.8rem] text-slate-400 font-black tracking-tighter flex items-center  h-full">
+              {`#${(rowIndex + 1 + startIndex).toString().padStart(3, '0')}`}
+            </p>
+          );
+        }
+      }
+      return (
+        <p className="text-[0.8rem] text-slate-400 font-black tracking-tighter flex items-center   h-full">
+          {`#${(rowIndex + 1).toString().padStart(3, '0')}`}
+        </p>
+      );
+    }
+
+    // Custom rendered column
+    if (column.render) {
+      return column.render(row, rowIndex);
+    }
+
+    // Standard column with value from data
+    const value = row?.[column?.field];
+    if (
+      (value || value === 0 || typeof value === 'boolean') &&
+      column.field !== 'Actions' &&
+      column.field !== 'rowSelect'
+    ) {
+      const cellFontSize = cellStyle?.fontSize || '0.875rem';
+      if (!disableHtml) {
+        return (
+          <div
+            style={{ fontSize: cellFontSize, fontWeight: column.isBold ? 'bold' : 'normal' }}
+            className="flex items-center h-full"
+          >
+            {maxLines ? (
+              <TooltipContent content={value} maxLines={maxLines} isHtml showFullContent={showFullContent} />
+            ) : (
+              <div dangerouslySetInnerHTML={{ __html: value }} />
+            )}
+          </div>
+        );
+      } else {
+        return (
+          <span style={{ fontSize: cellFontSize, fontWeight: column.isBold ? 'bold' : 'normal' }}>
+            {maxLines ? (
+              <TooltipContent content={value} maxLines={maxLines} isHtml={false} showFullContent={showFullContent} />
+            ) : (
+              <div className="flex items-center h-full ">{value}</div>
+            )}
+          </span>
+        );
+      }
+    }
+
+    // Empty cell for special columns
+    if (
+      column.field !== 'Actions' &&
+      column.field !== 'Sr. No.' &&
+      column.field !== 'rowSelect' &&
+      column.field !== 'statusCheckbox'
+    ) {
+      return <div className="flex items-center h-full ">NA</div>;
+    }
+
+    return '';
+  };
+
+  /**
+   * Render the table body with all rows
+   */
+  const renderTableBody = () => {
+    if (isLoading && useSkeleton) {
+      return <div className="bg-gray-300 animate-pulse rounded-sm w-full h-100"></div>;
+    }
+
+    return (
+      <Table
+        ref={tableRef}
+        aria-label="Customized Table"
+        data-testid={dataTestId}
+        sx={{ borderCollapse: 'separate', borderSpacing: 0 }}
+        {...props}
+      >
+        {/* Table Header */}
+        {!doNotShowTableHead && (
+          <TableHead>
+            {colspanData && (
+              <TableRow
+                ref={headerRow1Ref}
+                className="group"
+                sx={{
+                  position: 'sticky',
+                  top: 0,
+                  zIndex: 1010, // Higher than row 2
+                  backgroundColor: theme.palette.mode === 'dark' ? theme.palette.background.paper : '#FBFCFD',
+                  '& th': {
+                    padding: '8px',
+                    fontSize: '0.8rem',
+                    border: 'none',
+                    borderTop: '1px solid #d1d1d1',
+                    borderBottom: '1px solid #d1d1d1',
+                    backgroundColor: theme.palette.mode === 'dark' ? theme.palette.background.paper : '#FBFCFD',
+                    zIndex: 950, // Increased z-index (Task 3)
+                    position: 'sticky',
+                    top: 0,
+                  },
+                }}
+              >
+                {reorderedGroups.map((group, i) => (
+                  <th
+                    key={i}
+                    colSpan={group.span}
+                    className={group.isSticky ? 'row1-sticky-cell' : ''}
+                    data-first-child={group.firstChild}
+                    style={{
+                      textAlign: 'center',
+                      backgroundColor: theme.palette.mode === 'dark' ? theme.palette.background.paper : '#FBFCFD',
+                      borderLeft: group.label && group.label !== '' ? '1px solid #d1d1d1' : 'none',
+                      borderRight:
+                        (group.label && group.label !== '') || group.isLastSticky ? '1px solid #d1d1d1' : 'none',
+                      borderBottom: '1px solid #d1d1d1',
+                      borderTop: '1px solid #d1d1d1',
+                      ...(group.isSticky && {
+                        position: 'sticky',
+                        left: `${group.stickyLeft}px`,
+                        zIndex: 1011,
+                      }),
+                    }}
+                  >
+                    <Box
+                      sx={{
+                        position: 'relative',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        width: '100%',
+                        height: '100%',
+                      }}
+                      dangerouslySetInnerHTML={{ __html: group.label || '' }}
+                    />
+                  </th>
+                ))}
+              </TableRow>
+            )}
+
+            <TableRow
+              ref={headerRow2Ref}
+              className="group"
+              sx={{
+                position: 'sticky',
+                top: colspanData ? `${headerRow1Height}px` : 0,
+                zIndex: 1000,
+                backgroundColor: theme.palette.mode === 'dark' ? theme.palette.background.paper : '#FBFCFD',
+              }}
+            >
+              {visibleColumns?.map(
+                (column, index) =>
+                  !column.hide && (
+                    <StyledTableCell
+                      key={index + 1}
+                      align={column.align || 'center'}
+                      onClick={() => {
+                        if (!column.sortable) return;
+                        const field = column.field;
+                        const newOrder =
+                          internalSortConfig.field === field
+                            ? internalSortConfig.order === 'asc'
+                              ? 'desc'
+                              : 'asc'
+                            : 'asc';
+                        setInternalSortConfig({ field, order: newOrder });
+
+                        if (handleSort) {
+                          handleSort(column);
+                        }
+                      }}
+                      className={
+                        column.isSticky
+                          ? 'p-4 whitespace-normal break-words sticky-cell row2-sticky-cell'
+                          : 'p-4 whitespace-normal break-words'
+                      }
+                      data-field={column.field || `col-${column.originalIndex}`}
+                      sx={{
+                        backgroundColor: theme?.palette?.custom?.tableHeader + ' !important',
+                        position: 'sticky',
+                        top: colspanData ? `${headerRow1Height}px` : 0,
+                        left: column.isSticky
+                          ? `var(--actual-left-${column.field || `col-${column.originalIndex}`}, ${column.stickyLeft}px)`
+                          : 'auto',
+                        zIndex: column.isSticky ? '900 !important' : '800 !important',
+                        boxSizing: 'border-box',
+                        padding: showAllBorders ? '4px 6px' : '8px 16px',
+                        fontSize: showAllBorders ? '0.75rem' : '0.875rem',
+                        border: 'none', // Remove all generic borders
+                        borderLeft:
+                          showAllBorders && column.hasColspanGroup && column.isGroupStart
+                            ? '1px solid #d1d1d1 !important'
+                            : 'none',
+                        borderRight:
+                          showAllBorders && (column.isLastSticky || (column.hasColspanGroup && column.isGroupEnd))
+                            ? '1px solid #d1d1d1 !important'
+                            : 'none',
+                        boxShadow:
+                          showAllBorders && column.isSticky && column.isLastSticky
+                            ? 'inset -1px 0px 0px #d1d1d1'
+                            : 'none',
+                        borderBottom: '1px solid #d1d1d1 !important', // Ensure proper visual separation for all headers
+                        borderTop: showAllBorders && column.hasColspanGroup ? '1px solid #d1d1d1 !important' : 'none',
+                      }}
+                    >
+                      <Box
+                        sx={{
+                          display: 'flex',
+                          flexDirection: showAllBorders ? 'column' : 'row', // Task 2: Sub-row for pin icon in reports
+                          alignItems: 'center',
+                          justifyContent: showAllBorders ? 'center' : column.align || 'left',
+                          position: 'relative',
+                          zIndex: column.isSticky ? '9100 !important' : 'inherit',
+                          top: 0,
+                        }}
+                      >
+                        {/* Header Content (Label + Sort) */}
+                        <Box
+                          sx={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            width: 'auto',
+                            justifyContent: showAllBorders ? 'center' : column.align || 'left',
+                          }}
+                        >
+                          {rowSelectionEnabled && column.field === 'rowSelect' ? (
+                            <Checkbox color="primary" checked={selectAllChecked} onChange={handleSelectAll} />
+                          ) : (
+                            <>
+                              <Typography
+                                variant="caption"
+                                onClick={
+                                  showAllBorders && column.field !== 'rowSelect'
+                                    ? (e) => {
+                                      e.stopPropagation();
+                                      handleTogglePin(e, column.field);
+                                    }
+                                    : undefined
+                                }
+                                sx={{
+                                  ...defaultStyles.headerTypography,
+                                  position: 'relative',
+                                  zIndex: column.isSticky ? '9200 !important' : 'inherit',
+                                  lineHeight: '1 !important',
+                                  cursor: showAllBorders ? 'pointer' : 'inherit',
+                                  userSelect: 'none',
+                                }}
+                              >
+                                {translate(column?.label)}
+                              </Typography>
+                              {column.sortable && (
+                                <Box
+                                  sx={{
+                                    ml: 1,
+                                    zIndex: column.isSticky ? '9200 !important' : 'inherit',
+                                    cursor: 'pointer',
+                                  }}
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    const field = column.field;
+                                    const newOrder =
+                                      internalSortConfig.field === field
+                                        ? internalSortConfig.order === 'asc'
+                                          ? 'desc'
+                                          : 'asc'
+                                        : 'asc';
+                                    setInternalSortConfig({ field, order: newOrder });
+
+                                    if (handleSort) {
+                                      handleSort(column);
+                                    }
+                                  }}
+                                >
+                                  {(() => {
+                                    const currentOrder =
+                                      column.sortOrder ||
+                                      (internalSortConfig.field === column.field ? internalSortConfig.order : null);
+                                    return currentOrder === 'asc' ? (
+                                      <FontAwesomeIcon icon={faArrowUpWideShort} />
+                                    ) : (
+                                      <FontAwesomeIcon icon={faArrowDownShortWide} />
+                                    );
+                                  })()}
+                                </Box>
+                              )}
+                            </>
+                          )}
+                        </Box>
+                      </Box>
+                    </StyledTableCell>
+                  )
+              )}
+            </TableRow>
+          </TableHead>
+        )}
+
+        {/* Table Body */}
+        <TableBody>
+          {rowData && rowData.length ? (
+            // Determine which rows to display based on pagination settings
+            (() => {
+              let displayedRows = rowData;
+              if (pagination && !infiniteScroll && rowsPerPage > 0 && !onPageChange) {
+                const startIndex = (page - 1) * rowsPerPage;
+                displayedRows = rowData.slice(startIndex, startIndex + rowsPerPage);
+              }
+
+              return displayedRows.map((row, rowIndex) => {
+                const rowKey = props.rowUniqueKey ? row[props.rowUniqueKey] : row?.id || rowIndex + 1;
+                return (
+                  <StyledTableRow
+                    className="group"
+                    key={rowKey}
+                    sx={(theme) => ({
+                      backgroundColor:
+                        theme.palette.mode === 'dark'
+                          ? theme.palette.background.paper
+                          : strip && rowIndex % 2 !== 0
+                            ? theme?.palette?.custom?.gray4
+                            : 'inherit',
+                    })}
+                  >
+                    {visibleColumns.map((column, colIndex) => {
+                      let disabledRow = false;
+                      try {
+                        disabledRow = typeof column.disabled === 'function' ? column.disabled(row) : false;
+                      } catch (error) {
+                        console.error('Error evaluating disabled function for column:', column, error);
+                      }
+
+                      const rowBg =
+                        theme.palette.mode === 'dark'
+                          ? theme.palette.background.paper
+                          : strip && rowIndex % 2 !== 0
+                            ? theme?.palette?.custom?.gray4
+                            : theme.palette.background.paper;
+
+                      return (
+                        !column.hide && (
+                          <StyledTableCell
+                            key={`${column.field || 'field'}-${colIndex}`}
+                            className={column.isSticky ? 'sticky-cell data-sticky-cell' : ''}
+                            data-field={column.field || `col-${column.originalIndex}`}
+                            sx={() => ({
+                              textAlign: column.align || 'left',
+                              cursor: column.onClick && !disabledRow ? 'pointer' : 'default',
+                              color: column.onClick && !disabledRow ? 'blue' : 'inherit',
+                              textDecoration: column.onClick && !disabledRow ? 'underline' : 'none',
+                              width: column.field === 'Sr. No.' ? '0.2rem' : column.width,
+                              minWidth: column.field === 'Sr. No.' ? '0.2rem' : column.minWidth,
+                              maxWidth: 'none',
+                              padding: colspanData ? '4px 6px' : '5px 16px',
+                              fontSize: colspanData ? '0.75rem' : '0.8125rem',
+                              ...(column.isSticky && {
+                                position: 'sticky',
+                                left: `var(--actual-left-${column.field || `col-${column.originalIndex}`}, ${column.stickyLeft}px)`,
+                                zIndex: 500, // Below filter (1200)
+                                backgroundColor: `${rowBg} !important`,
+                                boxSizing: 'border-box',
+                                borderLeft: showAllBorders || column.isSticky ? '1px solid #d1d1d1' : 'none',
+                                borderRight:
+                                  showAllBorders || column.isSticky || column.isLastSticky
+                                    ? '1px solid #d1d1d1'
+                                    : 'none',
+                                boxShadow:
+                                  showAllBorders && column.isSticky && column.isLastSticky
+                                    ? 'inset -1px 0px 0px #d1d1d1'
+                                    : 'none',
+                              }),
+                              ...(!column.isSticky &&
+                                showAllBorders && {
+                                borderLeft: '1px solid #d1d1d1',
+                                borderRight: '1px solid #d1d1d1',
+                                boxSizing: 'border-box',
+                              }),
+                            })}
+                            data-testid={`tableData-row-${rowIndex}-column-${colIndex}`}
+                            onClick={column.onClick && !disabledRow ? () => column.onClick(row) : undefined}
+                          >
+                            <p className="h-full">{renderCellContent(column, row, rowIndex)}</p>
+                            {/* {renderCellContent(column, row, rowIndex)} */}
+                          </StyledTableCell>
+                        )
+                      );
+                    })}
+                  </StyledTableRow>
+                );
+              });
+            })()
+          ) : (
+            <StyledTableRow>
+              <StyledTableCell className={`border-b-0 border-r-0`} colSpan={visibleColumns.length}>
+                {isLoading && useSkeleton ? (
+                  <div className="animate-pulse bg-gray-300 w-full h-100"></div>
+                ) : (
+                  translate(props.emptyMessage || 'No Records Available')
+                )}
+              </StyledTableCell>
+            </StyledTableRow>
+          )}
+        </TableBody>
+      </Table>
+    );
+  };
+
+  /**
+   * Get total count for pagination
+   */
+  const getTotalCount = () => {
+    if (totalRows !== undefined) {
+      return totalRows;
+    }
+    renderTableBody;
+    return rowData ? rowData.length : 0;
+  };
+
+  /**
+   * Get total pages for pagination
+   */
+  const getTotalPages = () => {
+    const count = getTotalCount();
+    return Math.ceil(count / rowsPerPage);
+  };
+
+  return (
+    <>
+      <TableContainer
+        component={'div'}
+        className="rounded-[1rem] shadow-sm border overflow-hidden"
+        sx={{
+          backgroundColor: theme.palette.background.paper,
+          borderColor: theme.palette.mode === 'dark' ? "#1f2937" : "#E5E7EB",
+          '& ::-webkit-scrollbar': {
+            width: '8px !important',
+            height: '8px !important',
+          },
+          '& ::-webkit-scrollbar-track': {
+            backgroundColor: `${theme.palette.mode === 'dark' ? '#1e1e1e' : '#f1f1f1'} !important`,
+          },
+          '& ::-webkit-scrollbar-thumb': {
+            backgroundColor: `${theme.palette.mode === 'dark' ? '#555' : '#ccc'} !important`,
+            borderRadius: '4px !important',
+          },
+          '& ::-webkit-scrollbar-thumb:hover': {
+            backgroundColor: `${theme.palette.mode === 'dark' ? '#777' : '#999'} !important`,
+          },
+          scrollbarColor: theme.palette.mode === 'dark' ? '#555 #1e1e1e !important' : '#ccc #f1f1f1 !important',
+          scrollbarWidth: 'thin !important',
+        }}
+      >
+        {pagination && infiniteScroll ? (
+          <CustomInfiniteScroll
+            loadMore={loadMore}
+            hasMore={hasMore}
+            renderTableBody={renderTableBody}
+            customHeight={tableStyle?.maxHeight}
+            useWindow={false}
+            scrollToTop={scrollToTop}
+            setScrollToTop={setScrollToTop}
+          />
+        ) : (
+          <div style={{ position: 'relative' }}>
+            <StyledTableContainer
+              ref={containerRef}
+              component={Paper}
+              style={{ position: 'relative', overflow: 'auto' }}
+              sx={{
+                '&::-webkit-scrollbar': {
+                  width: '8px',
+                  height: '8px',
+                },
+                '&::-webkit-scrollbar-track': {
+                  backgroundColor: theme.palette.mode === 'dark' ? '#1e1e1e' : '#f1f1f1',
+                },
+                '&::-webkit-scrollbar-thumb': {
+                  backgroundColor: theme.palette.mode === 'dark' ? '#555' : '#ccc',
+                  borderRadius: '4px',
+                },
+                '&::-webkit-scrollbar-thumb:hover': {
+                  backgroundColor: theme.palette.mode === 'dark' ? '#777' : '#999',
+                },
+                scrollbarColor: theme.palette.mode === 'dark' ? '#555 #1e1e1e' : '#ccc #f1f1f1',
+                scrollbarWidth: 'thin',
+              }}
+              onScroll={handleScroll}
+            >
+              {paginationType === 'virtual-scroll' ? (
+                <VirtualizedTableBody
+                  rows={rowData}
+                  visibleColumns={visibleColumns}
+                  StyledTableCell={StyledTableCell}
+                  StyledTableRow={StyledTableRow}
+                  renderCellContent={renderCellContent}
+                  rowSelectionEnabled={rowSelectionEnabled}
+                  selectAllChecked={selectAllChecked}
+                  handleSelectAll={handleSelectAll}
+                  styleConfig={styleConfig}
+                  tableHeight={tableStyle?.maxHeight || 100}
+                  rowSelectionConfig={rowSelectionConfig}
+                  showAllBorders={showAllBorders}
+                  onTogglePin={handleTogglePin}
+                  handleSort={handleSort}
+                  reorderedGroups={reorderedGroups}
+                  colspanData={colspanData}
+                />
+              ) : (
+                renderTableBody()
+              )}
+            </StyledTableContainer>
+
+            {showScrollArrows && (
+              <>
+                {canScrollLeft && (
+                  <Box
+                    onMouseEnter={() => startScrolling('left')}
+                    onMouseLeave={stopScrolling}
+                    sx={{
+                      position: 'absolute',
+                      left: 0,
+                      top: headerRow1Height + (headerRow2Height / 2) || 25,
+                      transform: 'translateY(-50%)',
+                      zIndex: 1000,
+                      backgroundColor: 'rgba(151, 155, 156, 0.7)',
+                      color: 'white',
+                      width: 100,
+                      height: headerRow2Height || 115,
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      borderRadius: '0 8px 8px 0',
+                      cursor: 'pointer',
+                      boxShadow: '2px 0 5px rgba(0,0,0,0.2)',
+                    }}
+                  >
+                    <FontAwesomeIcon
+                      style={{ marginTop: '0px' }}
+                      size='3x'
+                      icon={faChevronLeft} />
+                  </Box>
+                )}
+                {canScrollRight && (
+                  <Box
+                    onMouseEnter={() => startScrolling('right')}
+                    onMouseLeave={stopScrolling}
+                    sx={{
+                      position: 'absolute',
+                      right: 0,
+                      top: headerRow1Height + (headerRow2Height / 2) || 25,
+                      transform: 'translateY(-50%)',
+                      zIndex: 1000,
+                      backgroundColor: 'rgba(151, 155, 156, 0.7)',
+                      color: 'white',
+                      width: 100,
+                      height: headerRow2Height || 115,
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      borderRadius: '8px 0 0 8px',
+                      cursor: 'pointer',
+                      boxShadow: '-2px 0 5px rgba(0,0,0,0.2)',
+                    }}
+                  >
+                    <FontAwesomeIcon
+                      style={{ marginTop: '0px' }}
+                      size="3x"
+                      icon={faChevronRight} />
+                  </Box>
+                )}
+              </>
+            )}
+          </div>
+        )}
+
+        {/* Pagination Controls */}
+        {pagination && !infiniteScroll && !isLoading && (
+          <Grid
+            container
+            sx={{
+              width: '100%',
+              position: 'relative', // Needed for absolute centering
+              alignItems: 'center',
+              minHeight: 64, // Ensures enough height for vertical centering
+              backgroundColor: theme.palette.background.paper,
+
+              // THEME-BASED TEXT COLOR:
+              color: theme.palette.text.primary,
+
+              // OPTIONAL: Add a subtle border that also respects the theme
+              borderTop: `1px solid ${theme.palette.divider}`,
+            }}
+          >
+            <Grid item>
+              {rowsPerPageOptionsArray && rowsPerPageOptionsArray.length > 0 && (
+                <TablePagination
+                  component="div"
+                  count={getTotalCount()}
+                  page={page}
+                  onPageChange={(_event, newPage) => handlePageChange(newPage)}
+                  sx={{
+                    '& .MuiTablePagination-actions': {
+                      visibility: 'hidden',
+                    },
+                    '& .MuiSelect-select': {
+                      padding: '6px 32px 6px 16px',
+                    },
+                    '& .MuiTablePagination-input, & .MuiTablePagination-selectLabel': {
+                      display: displayPageSelect ? undefined : 'none',
+                    },
+                  }}
+                  labelRowsPerPage="Items per page"
+                  // only show if screen size is md or lg
+                  labelDisplayedRows={({ count }) => {
+                    if (window.innerWidth < 768) {
+                      return '';
+                    }
+                    // Adjust from/to for 0-based indexing
+                    let adjustedFrom;
+                    let adjustedTo;
+                    if (count === 0) {
+                      adjustedFrom = 0;
+                      adjustedTo = 0;
+                    } else {
+                      adjustedFrom = (page - 1) * rowsPerPage + 1;
+                      adjustedTo = Math.min(count, page * rowsPerPage);
+                    }
+                    return `${adjustedFrom}-${adjustedTo} of ${count} items`;
+                  }}
+                  rowsPerPage={rowsPerPage}
+                  onRowsPerPageChange={handleChangeRowsPerPage}
+                  rowsPerPageOptions={rowsPerPageOptionsArray}
+                />
+              )}
+            </Grid>
+            <Grid
+              item
+              sx={{
+                position: 'absolute',
+                left: { sm: '35%', xs: '35%', md: '50%', lg: '50%' },
+                transform: 'translateX(-50%)',
+              }}
+            >
+              <Pagination
+                count={getTotalPages()}
+                page={page}
+                onChange={(event, newPage) => handlePageChange(newPage)}
+                /*  showFirstButton
+              showLastButton */
+                sx={{
+                  '& .MuiPaginationItem-root.Mui-selected': {
+                    backgroundColor: '#004C70',
+                    color: '#FFFFFF',
+                  },
+                  '& .MuiPaginationItem-root.Mui-selected:hover': {
+                    backgroundColor: '#678ea0',
+                  },
+                }}
+              />
+            </Grid>
+          </Grid>
+        )}
+
+        {/* Loading State for Pagination */}
+        {pagination && isLoading && useSkeleton && (
+          <div className="w-full justify-between flex-wrap flex flex-row mt-4">
+            <div className="flex-wrap flex flex-row">
+              <div className="bg-gray-300 animate-pulse rounded-sm h-[36px] w-[100px] mr-2 mb-2"></div>
+            </div>
+
+            <div className="flex">
+              <div className="bg-gray-300 animate-pulse rounded-sm h-[32px] w-[180px] m-0.5"></div>
+            </div>
+          </div>
+        )}
+      </TableContainer>
+    </>
+  );
+};
+
+CustomizedTable.propTypes = {
+  colspanData: PropTypes.any,
+  dataColspan: PropTypes.any,
+  columns: PropTypes.any,
+  tableData: PropTypes.any,
+  actions: PropTypes.any,
+  rowsPerPageInTable: PropTypes.any,
+  displayPageSelect: PropTypes.any,
+  noPagination: PropTypes.any,
+  doNotShowTableHead: PropTypes.any,
+  fontSize: PropTypes.any,
+  loadMore: PropTypes.any,
+  hasMore: PropTypes.any,
+  handleSort: PropTypes.any,
+  sortOrder: PropTypes.any,
+  conditionCheckObj: PropTypes.any,
+  disableHtml: PropTypes.any,
+  dataTestId: PropTypes.any,
+  customHeight: PropTypes.any,
+  totalRows: PropTypes.any,
+  currentPage: PropTypes.any,
+  onPageChange: PropTypes.any,
+  selectedRowsUnique: PropTypes.any,
+  isLoading: PropTypes.any,
+  strip: PropTypes.any,
+  styleConfig: PropTypes.any,
+  paginationConfig: PropTypes.any,
+  handleToggleStatus: PropTypes.any,
+  rowSelectionConfig: PropTypes.any,
+  scrollToTop: PropTypes.any,
+  setScrollToTop: PropTypes.any,
+  emptyMessage: PropTypes.string,
+  rowUniqueKey: PropTypes.string,
+  showFullContent: PropTypes.any,
+  showAllBorders: PropTypes.any,
+  showScrollArrows: PropTypes.any,
+};
+
+export default CustomizedTable;