@altruist03/ui 0.1.0 → 0.2.1

package/src/components/DataTable/DataTable.tsx

@@ -0,0 +1,968 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { getDataTableTokensFromResolved } from '../../tokens';
+import { useTokens } from '../../ThemeProvider/ThemeContext';
+import type { DataTableProps } from './DataTable.types';
+import NoDataIm from '../../../assets/images/noData.webp';
+
+const SKELETON_KEYFRAMES_ID = 'ds-datatable-skeleton-keyframes';
+const MOBILE_MAX_WIDTH = 767;
+
+function useIsMobileScreen() {
+  const [isMobile, setIsMobile] = useState(
+    () => typeof window !== 'undefined' && window.innerWidth <= MOBILE_MAX_WIDTH
+  );
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(`(max-width: ${MOBILE_MAX_WIDTH}px)`);
+    const update = () => setIsMobile(mediaQuery.matches);
+    update();
+    mediaQuery.addEventListener('change', update);
+    return () => mediaQuery.removeEventListener('change', update);
+  }, []);
+
+  return isMobile;
+}
+
+const COLUMN_DIVIDER_WIDTH = '1px';
+const EXPANDABLE_TEXT_PREVIEW_LENGTH = 80;
+/** Keeps Read More columns from growing to the full string width under table-layout:auto. */
+const EXPANDABLE_CELL_MAX_WIDTH = 280;
+/** Comfortable min width for month headers like "Jun 2026" when auto-fitting. */
+const DEFAULT_MIN_SCROLL_COLUMN_WIDTH = 104;
+/** Soft cap so ultra-wide screens don't show an excessive number of months at once. */
+const DEFAULT_MAX_SCROLL_COLUMNS = 6;
+
+/** Return-from-list row highlight (green, slightly darker for visibility). */
+const HIGHLIGHT_ROW_BACKGROUND = '#C8E6C9';
+const HIGHLIGHT_ROW_BACKGROUND_HOVER = '#A5D6A7';
+const HIGHLIGHT_ROW_TRANSITION = 'background-color 2s ease';
+/** Hover uses a short transition so row feedback stays snappy; highlight fade-out uses HIGHLIGHT_ROW_TRANSITION from React state. */
+const ROW_HOVER_TRANSITION = 'background-color 0.15s ease';
+
+/** Align headers/cells from explicit meta, falling back to API columnType. */
+function textAlignForColumnType(column: { meta?: { columnType?: string } } | null | undefined) {
+  const raw = String(column?.meta?.columnType ?? '')
+    .trim()
+    .toLowerCase();
+  const numericTypes = new Set([
+    'integer',
+    'long',
+    'int',
+    'double',
+    'float',
+    'number',
+    'bigint',
+    'decimal',
+  ]);
+  if (numericTypes.has(raw)) return 'right' as const;
+  if (raw === 'string') return 'left' as const;
+  return 'left' as const;
+}
+
+function resolveExplicitAlign(value: unknown): 'left' | 'right' | 'center' | undefined {
+  const raw = String(value ?? '')
+    .trim()
+    .toLowerCase();
+  if (raw === 'left' || raw === 'right' || raw === 'center') return raw;
+  return undefined;
+}
+
+function headerAlignForColumn(column: { meta?: { headerAlign?: string } } | null | undefined) {
+  return resolveExplicitAlign(column?.meta?.headerAlign) ?? ('center' as const);
+}
+
+function cellAlignForColumn(
+  column: { meta?: { cellAlign?: string; columnType?: string } } | null | undefined
+) {
+  return resolveExplicitAlign(column?.meta?.cellAlign) ?? textAlignForColumnType(column);
+}
+
+function stickyPositionForColumn(
+  column: { meta?: { sticky?: string } } | null | undefined
+): 'left' | 'right' | undefined {
+  const raw = String(column?.meta?.sticky ?? '')
+    .trim()
+    .toLowerCase();
+  if (raw === 'left' || raw === 'right') return raw;
+  return undefined;
+}
+
+function extraCellStyleFromColumn(cell: any): React.CSSProperties {
+  const getCellStyle = cell?.column?.meta?.getCellStyle;
+  if (typeof getCellStyle !== 'function') return {};
+  const style = getCellStyle(cell);
+  return style && typeof style === 'object' ? (style as React.CSSProperties) : {};
+}
+
+function columnMinWidthStyle(column: any): React.CSSProperties {
+  const minWidth = column?.meta?.minWidth;
+  if (minWidth == null || minWidth === '') return {};
+  return { minWidth };
+}
+
+function columnHeaderExtraStyle(column: any): React.CSSProperties {
+  if (!column?.meta?.nowrapHeader) return {};
+  return { whiteSpace: 'nowrap' };
+}
+
+/**
+ * Match highlighted row when API uses userId, clientId, clientMasterId, positionId, deviceId, or id
+ * on row.original. positionId is checked before deviceId because GPS position rows carry both
+ * (deviceId there is the device's IMEI, not a row identifier) and positionId is the one that's
+ * actually unique per row.
+ */
+function getRowClientIdForHighlight(original: unknown): string {
+  if (!original || typeof original !== 'object') return '';
+  const o = original as Record<string, unknown>;
+  const v =
+    o.selectionKey ??
+    o.otherDeductionTransactionId ??
+    o.loanId ??
+    o.userId ??
+    o.clientId ??
+    o.clientMasterId ??
+    o.positionId ??
+    o.deviceId ??
+    o.id;
+  return v != null ? String(v) : '';
+}
+
+function ensureSkeletonKeyframes() {
+  if (typeof document === 'undefined') return;
+  if (document.getElementById(SKELETON_KEYFRAMES_ID)) return;
+
+  const css = `
+@keyframes dsSkeletonShimmer {
+  0% { background-position: -200px 0; }
+  100% { background-position: calc(200px + 100%) 0; }
+}`;
+
+  const style = document.createElement('style');
+  style.id = SKELETON_KEYFRAMES_ID;
+  style.textContent = css;
+  document.head.appendChild(style);
+}
+
+/* Sort icon – uses the project's sorting_icon.svg asset */
+// import ArrowUpIcon from "@/assets/images/sorting_icon.svg";
+
+function isHtmlColumn(column: { meta?: { columnType?: string } } | null | undefined) {
+  return String(column?.meta?.columnType ?? '').toLowerCase() === 'html';
+}
+
+function isExpandableTextValue(
+  value: unknown,
+  column?: { meta?: { columnType?: string; disableExpandableCell?: boolean } } | null
+) {
+  if (isHtmlColumn(column) || column?.meta?.disableExpandableCell) return false;
+  if (typeof value !== 'string') return false;
+  if (/^\d{4}-\d{2}-\d{2}T/.test(value)) return false;
+  return value.length > EXPANDABLE_TEXT_PREVIEW_LENGTH;
+}
+
+/** Status / badge columns must stay on one line; squeeze → horizontal scroll instead of a broken badge. */
+function isStatusBadgeColumn(
+  column:
+    | {
+        id?: string;
+        Header?: unknown;
+        accessor?: unknown;
+        meta?: { columnType?: string; wrapText?: boolean };
+      }
+    | null
+    | undefined
+) {
+  if (isHtmlColumn(column)) return true;
+  const key = String(column?.id ?? column?.accessor ?? '')
+    .trim()
+    .toLowerCase();
+  const header = String(column?.Header ?? '')
+    .trim()
+    .toLowerCase();
+  return key === 'status' || key === 'statusname' || key === 'status_name' || header === 'status';
+}
+
+const ExpandableCell = ({
+  value,
+  renderedCell,
+  column,
+}: {
+  value: any;
+  renderedCell: React.ReactNode;
+  column?: { meta?: { columnType?: string; disableExpandableCell?: boolean } } | null;
+}) => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  if (!isExpandableTextValue(value, column)) {
+    return <>{renderedCell}</>;
+  }
+
+  return (
+    <div
+      style={{
+        display: 'block',
+        boxSizing: 'border-box',
+        width: '100%',
+        maxWidth: EXPANDABLE_CELL_MAX_WIDTH,
+        whiteSpace: 'normal',
+        overflowWrap: 'anywhere',
+        wordBreak: 'break-word',
+      }}
+    >
+      {isExpanded ?
+        renderedCell
+      : <span>{`${value.slice(0, EXPANDABLE_TEXT_PREVIEW_LENGTH).trimEnd()}...`}</span>}
+      <button
+        type="button"
+        onClick={(e) => {
+          e.stopPropagation();
+          setIsExpanded(!isExpanded);
+        }}
+        style={{
+          color: '#2563eb',
+          background: 'none',
+          border: 'none',
+          cursor: 'pointer',
+          padding: 0,
+          marginLeft: 2,
+          fontSize: '0.85em',
+          textDecoration: 'underline',
+          fontWeight: 500,
+        }}
+      >
+        {isExpanded ? 'Read Less' : 'Read More'}
+      </button>
+    </div>
+  );
+};
+
+function shouldWrapTableCell(
+  column:
+    | {
+        id?: string;
+        Header?: unknown;
+        accessor?: unknown;
+        meta?: { wrapText?: boolean; columnType?: string };
+      }
+    | null
+    | undefined,
+  cellValue: unknown,
+  preventHorizontalScroll: boolean
+) {
+  // Status badges / HTML pills must never wrap mid-word; prefer horizontal scroll.
+  if (isStatusBadgeColumn(column) && !column?.meta?.wrapText) return false;
+  if (preventHorizontalScroll) return true;
+  if (column?.meta?.wrapText) return true;
+  return (
+    typeof cellValue === 'string' &&
+    cellValue.length > EXPANDABLE_TEXT_PREVIEW_LENGTH &&
+    !/^\d{4}-\d{2}-\d{2}T/.test(cellValue)
+  );
+}
+
+export function DataTable({
+  getTableProps,
+  getTableBodyProps,
+  headerGroups,
+  page,
+  rows,
+  prepareRow,
+  loading = false,
+  Status,
+  length,
+  emptyStateHeight = 300,
+  stickyHeader = true,
+  className,
+  highlightRowClientId = null,
+  getHighlightRowId,
+  preventHorizontalScroll = false,
+  frozenPaneMaxWidth = '42%',
+  visibleScrollColumns,
+  minScrollColumnWidth = DEFAULT_MIN_SCROLL_COLUMN_WIDTH,
+  maxScrollColumns = DEFAULT_MAX_SCROLL_COLUMNS,
+}: DataTableProps) {
+  const resolvedTokens = useTokens();
+  const isMobileScreen = useIsMobileScreen();
+  const tokens = getDataTableTokensFromResolved(resolvedTokens);
+  const injectedRef = useRef(false);
+  const frozenTableRef = useRef<HTMLTableElement>(null);
+  const scrollTableRef = useRef<HTMLTableElement>(null);
+  const frozenPaneRef = useRef<HTMLDivElement>(null);
+  const scrollPaneRef = useRef<HTMLDivElement>(null);
+  const [hoveredRowIndex, setHoveredRowIndex] = useState<number | null>(null);
+  const tableBorderRadius = resolvedTokens.foundation?.radius?.lg ?? '8px';
+  const bodyColumnDividerColor =
+    resolvedTokens.semantic?.color?.secondary?.default ?? tokens.cellBorderBottom;
+
+  // function SortIcon({ direction }: { direction: 'asc' | 'desc' | null; color?: string }) {
+  //   return (
+  //     <img
+  //       // src={ArrowUpIcon}
+  //       src={''}
+  //       alt={
+  //         direction === 'asc' ? 'Sort ascending'
+  //         : direction === 'desc' ?
+  //           'Sort descending'
+  //         : 'Sortable'
+  //       }
+  //       style={{
+  //         marginLeft: 8,
+  //         width: tokens.sortIconWidth,
+  //         height: tokens.sortIconHeight,
+  //         verticalAlign: 'middle',
+  //         opacity: direction ? 1 : 0.4,
+  //         transform: direction === 'desc' ? 'rotate(180deg)' : 'none',
+  //         transition: 'transform 0.2s, opacity 0.2s',
+  //       }}
+  //     />
+  //   );
+  // }
+
+  useEffect(() => {
+    if (!injectedRef.current) {
+      ensureSkeletonKeyframes();
+      injectedRef.current = true;
+    }
+  }, []);
+
+  const skelCols = headerGroups?.length > 0 ? headerGroups[0].headers.length : 3;
+  const skeletonRows = Status?.pageSize || length || 4;
+  const renderRows = page || rows || [];
+  const hasRows = renderRows.length > 0;
+  const allHeaders = headerGroups?.[0]?.headers ?? [];
+  const frozenHeaders = allHeaders.filter(
+    (header: any) => stickyPositionForColumn(header) === 'left'
+  );
+  const scrollHeaders = allHeaders.filter(
+    (header: any) => stickyPositionForColumn(header) !== 'left'
+  );
+  const hasFrozenSplit =
+    !isMobileScreen &&
+    !preventHorizontalScroll &&
+    frozenHeaders.length > 0 &&
+    scrollHeaders.length > 0 &&
+    (loading || hasRows);
+  const useEqualWidthScroll =
+    visibleScrollColumns === 'auto' ||
+    (typeof visibleScrollColumns === 'number' && visibleScrollColumns > 0);
+  const resolvedMinScrollColumnWidth =
+    typeof minScrollColumnWidth === 'number' && minScrollColumnWidth > 0 ?
+      minScrollColumnWidth
+    : DEFAULT_MIN_SCROLL_COLUMN_WIDTH;
+  const resolvedMaxScrollColumns =
+    typeof maxScrollColumns === 'number' && maxScrollColumns > 0 ?
+      maxScrollColumns
+    : DEFAULT_MAX_SCROLL_COLUMNS;
+
+  const resolveColumnsInView = (paneWidth: number, columnCount: number) => {
+    if (!useEqualWidthScroll || columnCount === 0 || paneWidth <= 0) return null;
+    if (visibleScrollColumns === 'auto') {
+      const fitted = Math.max(1, Math.floor(paneWidth / resolvedMinScrollColumnWidth));
+      return Math.min(fitted, resolvedMaxScrollColumns, columnCount);
+    }
+    return Math.min(visibleScrollColumns as number, columnCount);
+  };
+
+  useLayoutEffect(() => {
+    if (!hasFrozenSplit) return;
+    const leftTable = frozenTableRef.current;
+    const rightTable = scrollTableRef.current;
+    const leftPane = frozenPaneRef.current;
+    const rightPane = scrollPaneRef.current;
+    if (!leftTable || !rightTable) return;
+
+    let rafId = 0;
+    let running = false;
+
+    const applyEqualScrollColumnWidths = () => {
+      if (!useEqualWidthScroll || !rightPane) return;
+      const columnCount = scrollHeaders.length;
+      if (columnCount === 0) return;
+
+      const paneWidth = rightPane.clientWidth;
+      if (paneWidth <= 0) return;
+
+      const columnsInView = resolveColumnsInView(paneWidth, columnCount);
+      if (!columnsInView) return;
+
+      const colWidth = paneWidth / columnsInView;
+      const totalWidth = colWidth * columnCount;
+
+      rightTable.style.tableLayout = 'fixed';
+      rightTable.style.width = `${totalWidth}px`;
+      rightTable.style.minWidth = `${totalWidth}px`;
+
+      rightTable.querySelectorAll('thead th').forEach((th) => {
+        const el = th as HTMLElement;
+        el.style.width = `${colWidth}px`;
+        el.style.minWidth = `${colWidth}px`;
+        el.style.maxWidth = `${colWidth}px`;
+        el.style.boxSizing = 'border-box';
+        el.style.overflow = 'hidden';
+      });
+      rightTable.querySelectorAll('tbody td').forEach((td) => {
+        const el = td as HTMLElement;
+        el.style.width = `${colWidth}px`;
+        el.style.minWidth = `${colWidth}px`;
+        el.style.maxWidth = `${colWidth}px`;
+        el.style.boxSizing = 'border-box';
+        el.style.overflow = 'hidden';
+      });
+    };
+
+    const sync = () => {
+      if (running) return;
+      running = true;
+      rafId = requestAnimationFrame(() => {
+        try {
+          applyEqualScrollColumnWidths();
+
+          const leftRows = leftTable.querySelectorAll('tr');
+          const rightRows = rightTable.querySelectorAll('tr');
+          const count = Math.min(leftRows.length, rightRows.length);
+          for (let i = 0; i < count; i += 1) {
+            const leftRow = leftRows[i] as HTMLElement;
+            const rightRow = rightRows[i] as HTMLElement;
+            leftRow.style.height = 'auto';
+            rightRow.style.height = 'auto';
+            const height = Math.max(
+              leftRow.getBoundingClientRect().height,
+              rightRow.getBoundingClientRect().height
+            );
+            leftRow.style.height = `${height}px`;
+            rightRow.style.height = `${height}px`;
+          }
+          if (leftPane && rightPane) {
+            const scrollbarHeight = Math.max(0, rightPane.offsetHeight - rightPane.clientHeight);
+            leftPane.style.paddingBottom = `${scrollbarHeight}px`;
+          }
+        } finally {
+          running = false;
+        }
+      });
+    };
+
+    sync();
+    window.addEventListener('resize', sync);
+
+    let resizeObserver: ResizeObserver | null = null;
+    if (typeof ResizeObserver !== 'undefined' && rightPane) {
+      resizeObserver = new ResizeObserver(sync);
+      resizeObserver.observe(rightPane);
+    }
+
+    return () => {
+      running = false;
+      cancelAnimationFrame(rafId);
+      window.removeEventListener('resize', sync);
+      resizeObserver?.disconnect();
+    };
+  }, [
+    hasFrozenSplit,
+    loading,
+    renderRows.length,
+    allHeaders.length,
+    scrollHeaders.length,
+    useEqualWidthScroll,
+    visibleScrollColumns,
+    resolvedMinScrollColumnWidth,
+    resolvedMaxScrollColumns,
+    highlightRowClientId,
+    getHighlightRowId,
+  ]);
+
+  /* -------- Styles -------- */
+  const tableStyle: React.CSSProperties = {
+    width: '100%',
+    minWidth: '100%',
+    borderCollapse: 'collapse',
+    tableLayout: preventHorizontalScroll ? 'fixed' : 'auto',
+  };
+
+  const containerStyle: React.CSSProperties = {
+    width: '100%',
+    overflowX: preventHorizontalScroll ? 'hidden' : 'auto',
+    overflowY: 'auto',
+    border: `1px solid ${tokens.tableBorder}`,
+    borderRadius: tableBorderRadius,
+  };
+
+  const thStyle = (
+    align: string = 'center',
+    isLastColumn: boolean = false
+  ): React.CSSProperties => ({
+    padding: tokens.headerPadding,
+    fontSize: tokens.headerFontSize,
+    fontWeight: Number(tokens.headerFontWeight) || 600,
+    color: tokens.headerColor,
+    backgroundColor: tokens.headerBackground,
+    borderBottom: `1px solid ${tokens.headerBorderBottom}`,
+    borderRight: isLastColumn ? 'none' : `1px solid ${tokens.headerBorderRight}`,
+    textAlign: align as any,
+    whiteSpace: 'pre-line',
+    overflowWrap: 'break-word',
+    verticalAlign: 'middle',
+    cursor: 'default',
+    position: stickyHeader ? 'sticky' : 'relative',
+    top: stickyHeader ? 0 : undefined,
+    zIndex: stickyHeader ? 1 : undefined,
+  });
+
+  const tdStyle = (
+    isLastRow: boolean = false,
+    textAlign: 'left' | 'right' | 'center' = 'center',
+    isLastColumn: boolean = false
+  ): React.CSSProperties => ({
+    padding: tokens.cellPadding,
+    fontSize: tokens.cellFontSize,
+    color: tokens.cellColor,
+    borderBottom: isLastRow ? 'none' : `1px solid ${tokens.cellBorderBottom}`,
+    borderRight: isLastColumn ? 'none' : `${COLUMN_DIVIDER_WIDTH} solid ${bodyColumnDividerColor}`,
+    textAlign,
+    textTransform: 'none',
+    verticalAlign: 'middle',
+    whiteSpace: 'nowrap',
+  });
+
+  const stickyStyle = (
+    stickyPosition: 'left' | 'right' | undefined,
+    isHeader: boolean
+  ): React.CSSProperties => {
+    if (!stickyPosition || isMobileScreen) return {};
+    return {
+      position: 'sticky',
+      [stickyPosition]: 0,
+      backgroundColor: isHeader ? tokens.headerBackground : 'inherit',
+      zIndex: isHeader ? 3 : 2,
+      boxShadow:
+        stickyPosition === 'right' ?
+          '-1px 0 0 rgba(229, 231, 235, 0.9)'
+        : '1px 0 0 rgba(229, 231, 235, 0.9)',
+    };
+  };
+
+  const skeletonBarStyle: React.CSSProperties = {
+    height: tokens.skeletonHeight,
+    borderRadius: tokens.skeletonRadius,
+    background: `linear-gradient(90deg, ${tokens.skeletonBaseColor} 25%, transparent 50%, ${tokens.skeletonBaseColor} 75%)`,
+    backgroundSize: '400px 100%',
+    animation: 'dsSkeletonShimmer 1.5s ease-in-out infinite',
+  };
+
+  const splitContainerStyle: React.CSSProperties = {
+    width: '100%',
+    display: 'flex',
+    alignItems: 'stretch',
+    overflow: 'hidden',
+    border: `1px solid ${tokens.tableBorder}`,
+    borderRadius: tableBorderRadius,
+  };
+
+  const frozenPaneStyle: React.CSSProperties = {
+    // Hug content so the right pane starts flush against the last frozen column.
+    // Do not shrink or scroll horizontally — frozen columns stay fully visible.
+    flex: '0 0 auto',
+    width: 'max-content',
+    maxWidth: frozenPaneMaxWidth,
+    overflowX: 'hidden',
+    overflowY: 'hidden',
+    boxShadow: '8px 0 14px -8px rgba(15, 23, 42, 0.28)',
+    zIndex: 2,
+    backgroundColor: tokens.rowBackground,
+  };
+
+  const scrollPaneStyle: React.CSSProperties = {
+    flex: '1 1 0%',
+    minWidth: 0,
+    overflowX: 'auto',
+    overflowY: 'hidden',
+  };
+
+  const frozenTableStyle: React.CSSProperties = {
+    borderCollapse: 'collapse',
+    tableLayout: 'auto',
+    width: 'max-content',
+  };
+
+  const scrollTableStyle: React.CSSProperties = {
+    borderCollapse: 'collapse',
+    tableLayout: useEqualWidthScroll ? 'fixed' : 'auto',
+    width: useEqualWidthScroll ? undefined : 'max-content',
+    minWidth: useEqualWidthScroll ? undefined : '100%',
+  };
+
+  const renderHeaderRow = (
+    headers: any[],
+    {
+      headerLoading = false,
+      disableSticky = false,
+      keepLastDivider = false,
+    }: { headerLoading?: boolean; disableSticky?: boolean; keepLastDivider?: boolean } = {}
+  ) => (
+    <tr>
+      {headerLoading ?
+        headers.map((col: any, i: number) => (
+          <th
+            key={`skel-h-${col?.id ?? i}`}
+            style={{
+              ...thStyle(
+                headerAlignForColumn(col),
+                keepLastDivider ? false : i === headers.length - 1
+              ),
+              ...columnMinWidthStyle(col),
+            }}
+          >
+            <div style={skeletonBarStyle} />
+          </th>
+        ))
+      : headers.map((col: any, colIdx: number) => {
+          const isLast = keepLastDivider ? false : colIdx === headers.length - 1;
+          const headerAlign = headerAlignForColumn(col);
+          const stickyPosition = disableSticky ? undefined : stickyPositionForColumn(col);
+          const headerProps = col.getHeaderProps(
+            col.getSortByToggleProps ? col.getSortByToggleProps() : undefined
+          );
+          return (
+            <th
+              {...headerProps}
+              style={{
+                ...thStyle(headerAlign, isLast),
+                ...stickyStyle(stickyPosition, true),
+                ...columnMinWidthStyle(col),
+                ...columnHeaderExtraStyle(col),
+                ...(col.canSort ? { cursor: 'pointer', userSelect: 'none' } : {}),
+              }}
+            >
+              {col.render('Header')}
+            </th>
+          );
+        })
+      }
+    </tr>
+  );
+
+  const renderBodyCell = (
+    cell: any,
+    rowIdx: number,
+    cellIdx: number,
+    cellCount: number,
+    {
+      disableSticky = false,
+      totalRows = renderRows.length,
+      keepLastDivider = false,
+    }: { disableSticky?: boolean; totalRows?: number; keepLastDivider?: boolean } = {}
+  ) => {
+    const align = cellAlignForColumn(cell.column);
+    const stickyPosition = disableSticky ? undefined : stickyPositionForColumn(cell.column);
+    const isStatusBadge = isStatusBadgeColumn(cell.column);
+    const shouldWrap = shouldWrapTableCell(cell.column, cell.value, preventHorizontalScroll);
+    const isExpandableText = isExpandableTextValue(cell.value, cell.column);
+    const cellProps = cell.getCellProps();
+    const cellClassName = [cellProps.className, isStatusBadge ? 'ds-datatable-cell--status' : '']
+      .filter(Boolean)
+      .join(' ');
+    return (
+      <td
+        {...cellProps}
+        className={cellClassName || undefined}
+        style={{
+          ...tdStyle(
+            rowIdx === totalRows - 1,
+            align,
+            keepLastDivider ? false : cellIdx === cellCount - 1
+          ),
+          ...stickyStyle(stickyPosition, false),
+          ...columnMinWidthStyle(cell.column),
+          ...(shouldWrap && {
+            whiteSpace: 'normal',
+            wordBreak: 'break-word',
+            overflowWrap: 'anywhere',
+          }),
+          ...(isExpandableText && {
+            width: EXPANDABLE_CELL_MAX_WIDTH,
+            maxWidth: EXPANDABLE_CELL_MAX_WIDTH,
+          }),
+          ...(isStatusBadge &&
+            !shouldWrap && {
+              whiteSpace: 'nowrap',
+              wordBreak: 'normal',
+              overflowWrap: 'normal',
+            }),
+          ...extraCellStyleFromColumn(cell),
+        }}
+      >
+        <ExpandableCell
+          value={cell.value}
+          renderedCell={cell.render('Cell')}
+          column={cell.column}
+        />
+      </td>
+    );
+  };
+
+  const renderSkeletonRows = (headers: any[], { keepLastDivider = false } = {}) =>
+    Array.from({ length: skeletonRows }).map((_, rowIdx) => {
+      const stripeBg = rowIdx % 2 === 0 ? tokens.rowBackground : tokens.rowStripeBackground;
+      return (
+        <tr key={`skel-r-${rowIdx}`} style={{ backgroundColor: stripeBg }}>
+          {headers.map((headerCol: any, colIdx: number) => (
+            <td
+              key={`skel-c-${rowIdx}-${headerCol?.id ?? colIdx}`}
+              style={{
+                ...tdStyle(
+                  rowIdx === skeletonRows - 1,
+                  cellAlignForColumn(headerCol),
+                  keepLastDivider ? false : colIdx === headers.length - 1
+                ),
+                ...columnMinWidthStyle(headerCol),
+              }}
+            >
+              <div
+                style={{
+                  ...skeletonBarStyle,
+                  width: '100%',
+                }}
+              />
+            </td>
+          ))}
+        </tr>
+      );
+    });
+
+  const renderDataRows = (
+    headers: any[],
+    {
+      disableSticky = false,
+      keyPrefix = 'row',
+      syncHover = false,
+      keepLastDivider = false,
+    }: {
+      disableSticky?: boolean;
+      keyPrefix?: string;
+      syncHover?: boolean;
+      keepLastDivider?: boolean;
+    } = {}
+  ) => {
+    const headerIds = new Set(headers.map((header: any) => header.id));
+    return renderRows.map((row: any, rowIdx: number) => {
+      if (prepareRow) prepareRow(row);
+      const stripeBg = rowIdx % 2 === 0 ? tokens.rowBackground : tokens.rowStripeBackground;
+      const isHighlightedRow =
+        highlightRowClientId != null &&
+        (getHighlightRowId ?
+          String(getHighlightRowId(row?.original) ?? '')
+        : getRowClientIdForHighlight(row?.original)) === String(highlightRowClientId);
+      const baseBg = isHighlightedRow ? HIGHLIGHT_ROW_BACKGROUND : stripeBg;
+      const hoverBg = isHighlightedRow ? HIGHLIGHT_ROW_BACKGROUND_HOVER : tokens.rowHoverBackground;
+      const isHovered = syncHover && hoveredRowIndex === rowIdx;
+      const rowProps = typeof row.getRowProps === 'function' ? row.getRowProps() : {};
+      const restRowProps = { ...(rowProps ?? {}) };
+      delete (restRowProps as { key?: unknown }).key;
+      const cells = row.cells.filter((cell: any) => headerIds.has(cell.column.id));
+      return (
+        <tr
+          {...restRowProps}
+          key={`${keyPrefix}-${row.id ?? rowIdx}`}
+          style={{
+            ...(restRowProps.style as React.CSSProperties | undefined),
+            backgroundColor: isHovered ? hoverBg : baseBg,
+            transition: HIGHLIGHT_ROW_TRANSITION,
+          }}
+          onMouseEnter={(e) => {
+            if (syncHover) {
+              setHoveredRowIndex(rowIdx);
+              return;
+            }
+            e.currentTarget.style.transition = ROW_HOVER_TRANSITION;
+            e.currentTarget.style.backgroundColor = hoverBg;
+          }}
+          onMouseLeave={(e) => {
+            if (syncHover) {
+              setHoveredRowIndex(null);
+              return;
+            }
+            e.currentTarget.style.transition = ROW_HOVER_TRANSITION;
+            e.currentTarget.style.backgroundColor = baseBg;
+          }}
+        >
+          {cells.map((cell: any, cellIdx: number) =>
+            renderBodyCell(cell, rowIdx, cellIdx, cells.length, { disableSticky, keepLastDivider })
+          )}
+        </tr>
+      );
+    });
+  };
+
+  const renderEmptyRow = (colSpan: number) => (
+    <tr>
+      <td
+        colSpan={colSpan || 1}
+        style={{
+          textAlign: 'center',
+          color: tokens.emptyStateColor,
+          fontSize: tokens.emptyStateFontSize,
+        }}
+      >
+        <div style={{ width: '100%', height: emptyStateHeight }}>
+          <img
+            src={NoDataIm}
+            alt="No data"
+            style={{
+              width: emptyStateHeight,
+              height: emptyStateHeight,
+              objectFit: 'cover',
+              placeSelf: 'center',
+            }}
+          />
+        </div>
+      </td>
+    </tr>
+  );
+
+  /* -------- Render -------- */
+  if (hasFrozenSplit) {
+    return (
+      <div className={className} style={splitContainerStyle}>
+        <div ref={frozenPaneRef} style={frozenPaneStyle}>
+          <table ref={frozenTableRef} style={frozenTableStyle}>
+            {headerGroups && headerGroups.length > 0 && (
+              <thead>
+                {renderHeaderRow(frozenHeaders, {
+                  headerLoading: loading,
+                  disableSticky: true,
+                  keepLastDivider: true,
+                })}
+              </thead>
+            )}
+            <tbody>
+              {loading ?
+                renderSkeletonRows(frozenHeaders, { keepLastDivider: true })
+              : renderDataRows(frozenHeaders, {
+                  disableSticky: true,
+                  keyPrefix: 'frozen',
+                  syncHover: true,
+                  keepLastDivider: true,
+                })
+              }
+            </tbody>
+          </table>
+        </div>
+        <div ref={scrollPaneRef} style={scrollPaneStyle}>
+          <table ref={scrollTableRef} style={scrollTableStyle}>
+            {headerGroups && headerGroups.length > 0 && (
+              <thead>
+                {renderHeaderRow(scrollHeaders, {
+                  headerLoading: loading,
+                  disableSticky: false,
+                })}
+              </thead>
+            )}
+            <tbody>
+              {loading ?
+                renderSkeletonRows(scrollHeaders)
+              : renderDataRows(scrollHeaders, {
+                  disableSticky: false,
+                  keyPrefix: 'scroll',
+                  syncHover: true,
+                })
+              }
+            </tbody>
+          </table>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={className} style={containerStyle}>
+      <table style={tableStyle} {...(getTableProps ? getTableProps() : {})}>
+        {headerGroups && headerGroups.length > 0 && (loading || hasRows) && (
+          <thead>
+            {headerGroups.map((headerGroup: any) => (
+              <tr {...headerGroup.getHeaderGroupProps()}>
+                {loading ?
+                  Array.from({ length: skelCols }).map((_, i) => (
+                    <th
+                      key={`skel-h-${i}`}
+                      style={{
+                        ...thStyle(
+                          headerAlignForColumn(
+                            headerGroups?.[0]?.headers?.[i]?.column ??
+                              headerGroups?.[0]?.headers?.[i]
+                          ),
+                          i === skelCols - 1
+                        ),
+                        ...columnMinWidthStyle(
+                          headerGroups?.[0]?.headers?.[i]?.column ?? headerGroups?.[0]?.headers?.[i]
+                        ),
+                      }}
+                    >
+                      <div style={skeletonBarStyle} />
+                    </th>
+                  ))
+                : headerGroup.headers.map((col: any, colIdx: number) => {
+                    const isLast = colIdx === headerGroup.headers.length - 1;
+                    const headerAlign = headerAlignForColumn(col);
+                    const stickyPosition = stickyPositionForColumn(col);
+                    return (
+                      <th
+                        {...col.getHeaderProps(
+                          col.getSortByToggleProps ? col.getSortByToggleProps() : undefined
+                        )}
+                        style={{
+                          ...thStyle(headerAlign, isLast),
+                          ...stickyStyle(stickyPosition, true),
+                          ...columnMinWidthStyle(col),
+                          ...columnHeaderExtraStyle(col),
+                          ...(col.canSort ? { cursor: 'pointer', userSelect: 'none' } : {}),
+                        }}
+                      >
+                        {col.render('Header')}
+                      </th>
+                    );
+                  })
+                }
+              </tr>
+            ))}
+          </thead>
+        )}
+
+        <tbody {...(getTableBodyProps ? getTableBodyProps() : {})}>
+          {loading ?
+            Array.from({ length: skeletonRows }).map((_, rowIdx) => {
+              const stripeBg = rowIdx % 2 === 0 ? tokens.rowBackground : tokens.rowStripeBackground;
+              return (
+                <tr key={`skel-r-${rowIdx}`} style={{ backgroundColor: stripeBg }}>
+                  {Array.from({ length: skelCols }).map((_, colIdx) => {
+                    const headerCol =
+                      headerGroups?.[0]?.headers?.[colIdx]?.column ??
+                      headerGroups?.[0]?.headers?.[colIdx];
+                    const align = cellAlignForColumn(headerCol);
+                    return (
+                      <td
+                        key={`skel-c-${rowIdx}-${colIdx}`}
+                        style={{
+                          ...tdStyle(rowIdx === skeletonRows - 1, align, colIdx === skelCols - 1),
+                          ...columnMinWidthStyle(headerCol),
+                        }}
+                      >
+                        <div
+                          style={{
+                            ...skeletonBarStyle,
+                            width: '100%',
+                          }}
+                        />
+                      </td>
+                    );
+                  })}
+                </tr>
+              );
+            })
+          : renderRows.length > 0 ?
+            renderDataRows(allHeaders.length ? allHeaders : (headerGroups?.[0]?.headers ?? []))
+          : renderEmptyRow(skelCols || 1)}
+        </tbody>
+      </table>
+    </div>
+  );
+}