@sustaina/shared-ui 1.69.0 → 1.70.0

package/dist/index.js

@@ -9020,7 +9020,7 @@ var HeaderCell = ({
     {
       ref,
       className: cn(
-        "flex items-center justify-between gap-2",
+        "flex items-center justify-between gap-2 h-full",
         {
           "cursor-pointer": context?.column?.getCanSort()
         },
@@ -9048,13 +9048,17 @@ var HeaderCell = ({
         showSorter && /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: "flex flex-col -space-y-2",
+            className: cn(
+              "flex flex-col -space-y-2 transition-opacity duration-150",
+              sorterProps?.rootClassName
+            ),
+            style: { opacity: hovering || !!context.column.getIsSorted() ? 1 : 0.35 },
             title: context.column.getCanSort() ? context.column.getNextSortingOrder() === "asc" ? "Sort ascending" : context.column.getNextSortingOrder() === "desc" ? "Sort descending" : "Clear sort" : void 0,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 lucideReact.ChevronUp,
                 {
-                  className: cn("stroke-[#BBBBBB]", {
+                  className: cn("stroke-[#BBBBBB] transition-colors duration-200", {
                     "stroke-sus-gray-5": context?.column?.getIsSorted() === "asc",
                     "stroke-sus-gray-5/45": context?.column?.getNextSortingOrder() === "asc" && hovering
                   }),
@@ -9065,7 +9069,7 @@ var HeaderCell = ({
               /* @__PURE__ */ jsxRuntime.jsx(
                 lucideReact.ChevronDown,
                 {
-                  className: cn("stroke-[#BBBBBB]", {
+                  className: cn("stroke-[#BBBBBB] transition-colors duration-200", {
                     "stroke-sus-gray-5": context?.column?.getIsSorted() === "desc",
                     "stroke-sus-gray-5/45": context?.column?.getNextSortingOrder() === "desc" && hovering
                   }),
@@ -9141,7 +9145,7 @@ function TableHead({ className, ...props }) {
     {
       "data-slot": "table-head",
       className: cn(
-        "text-foreground h-9 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5 hover:bg-gray-200 bg-[#F0F0F0] truncate",
+        "text-foreground h-9 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5 hover:bg-gray-200 bg-[#F0F0F0] truncate transition-colors duration-150",
         className
       ),
       ...props
@@ -9500,8 +9504,13 @@ var useScrollFetch = ({ scrollFetch, containerRef }) => {
   }, [fetchMoreOnScrollReached, containerRef]);
   return fetchMoreOnScrollReached;
 };
+
+// src/components/data-table/constants.ts
 var DEFAULT_ROW_HEIGHT = 40;
 var DEFAULT_OVER_SCAN = 10;
+var DEFAULT_COLUMN_OVERSCAN = 1;
+
+// src/components/data-table/hooks/useTableVirtualizer.ts
 var useTableVirtualizer = ({
   enabled,
   table,
@@ -9509,23 +9518,50 @@ var useTableVirtualizer = ({
   virtual
 }) => {
   const rowModel = table.getRowModel().rows;
+  const columnsEnabled = virtual?.columns?.enabled ?? false;
+  const centerColumns = table.getCenterVisibleLeafColumns();
+  const getRowVirtualItemKey = React.useCallback((index) => rowModel[index]?.id ?? index, [rowModel]);
+  const getColumnVirtualItemKey = React.useCallback(
+    (index) => centerColumns[index]?.id ?? index,
+    [centerColumns]
+  );
   const virtualizer = reactVirtual.useVirtualizer({
     count: enabled ? rowModel.length : 0,
     useFlushSync: false,
     getScrollElement: () => containerRef.current,
     estimateSize: () => DEFAULT_ROW_HEIGHT,
+    getItemKey: getRowVirtualItemKey,
     measureElement: typeof window !== "undefined" && navigator.userAgent.indexOf("Firefox") === -1 ? (element) => element?.getBoundingClientRect().height : void 0,
     overscan: virtual?.overscan ?? DEFAULT_OVER_SCAN
   });
+  const columnVirtualizer = reactVirtual.useVirtualizer({
+    count: columnsEnabled ? centerColumns.length : 0,
+    estimateSize: (index) => centerColumns[index]?.getSize() ?? 0,
+    getScrollElement: () => containerRef.current,
+    horizontal: true,
+    getItemKey: getColumnVirtualItemKey,
+    overscan: virtual?.columns?.overscan ?? DEFAULT_COLUMN_OVERSCAN
+  });
   const virtualItems = enabled ? virtualizer.getVirtualItems() : [];
   const paddingTop = enabled && virtualItems.length > 0 ? virtualItems[0].start : 0;
   const paddingBottom = enabled && virtualItems.length > 0 ? virtualizer.getTotalSize() - virtualItems[virtualItems.length - 1].end : 0;
+  let columnVirtual;
+  if (!columnsEnabled) {
+    columnVirtual = { enabled: false };
+  } else {
+    const virtualColumns = columnVirtualizer.getVirtualItems();
+    const virtualPaddingLeft = virtualColumns[0]?.start ?? 0;
+    const virtualPaddingRight = columnVirtualizer.getTotalSize() - (virtualColumns[virtualColumns.length - 1]?.end ?? 0);
+    columnVirtual = { enabled: true, virtualColumns, virtualPaddingLeft, virtualPaddingRight };
+  }
   return {
     virtualizer,
+    columnVirtualizer,
     virtualItems,
     paddingTop,
     paddingBottom,
-    rowModel
+    rowModel,
+    columnVirtual
   };
 };
 function useComputedTableState({
@@ -9628,6 +9664,7 @@ var ColumnSeparator = ({ show, className, ...props }) => {
 var ColumnSeparator_default = React__namespace.default.memo(ColumnSeparator);
 
 // src/components/data-table/helpers.ts
+var toCSSId = (id) => id.replace(/[^a-zA-Z0-9_-]/g, "-");
 function getColumnPinningInfo(column) {
   const isPinned = column.getIsPinned();
   const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
@@ -9638,8 +9675,8 @@ function getColumnPinningStyles(column) {
   const { isPinned, isFirstRightPinnedColumn, isLastLeftPinnedColumn } = getColumnPinningInfo(column);
   const classes = cn(isPinned ? "sticky" : "relative");
   const style = {
-    left: isPinned === "left" ? column.getStart("left") : void 0,
-    right: isPinned === "right" ? column.getAfter("right") : void 0,
+    left: isPinned === "left" ? `calc(var(--col-${toCSSId(column.id)}-pin-start, ${column.getStart("left")}) * 1px)` : void 0,
+    right: isPinned === "right" ? `calc(var(--col-${toCSSId(column.id)}-pin-after, ${column.getAfter("right")}) * 1px)` : void 0,
     zIndex: isPinned ? 1 : 0,
     boxShadow: isLastLeftPinnedColumn ? "inset -1px 0 0 0 black" : isFirstRightPinnedColumn ? "inset 1px 0 0 0 black" : void 0
   };
@@ -9658,102 +9695,223 @@ function getRowClickHandlers(handler, { rowData, row, table }) {
     onClick: handleClick
   };
 }
+function renderHeaderCell(header, headerGroup, {
+  columnResizing,
+  virtual,
+  components,
+  table
+}, rowSpan) {
+  const { classes, style } = getColumnPinningStyles(header.column);
+  const useColumnSizing = header.column.columnDef?.meta?.useColumnSizing ?? columnResizing?.enabled ?? virtual?.enabled ?? false;
+  const tableHeadCellProps = typeof components?.tableHeadCellProps === "function" ? components?.tableHeadCellProps({ header, table }) : components?.tableHeadCellProps;
+  const nextHeader = headerGroup.headers?.[header.index + 1] || header;
+  const { isLastLeftPinnedColumn } = getColumnPinningInfo(header.column);
+  const { isFirstRightPinnedColumn } = getColumnPinningInfo(nextHeader.column);
+  const headerGroupLength = headerGroup.headers.length;
+  const showSeparator = header.index !== headerGroupLength - 1 && !isLastLeftPinnedColumn && !isFirstRightPinnedColumn && (!header.isPlaceholder || !nextHeader.isPlaceholder);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    TableHead,
+    {
+      "data-testid": `table-head-${header.id}`,
+      colSpan: header.colSpan,
+      rowSpan,
+      ...tableHeadCellProps,
+      ...header.column.columnDef?.meta?.headerProps,
+      className: cn(
+        classes,
+        tableHeadCellProps?.className,
+        header.column.columnDef?.meta?.headerProps?.className
+      ),
+      style: {
+        ...style,
+        width: useColumnSizing ? `calc(var(--header-${toCSSId(header.id)}-size, ${header.getSize()}) * 1px)` : void 0,
+        minWidth: useColumnSizing ? header.column.columnDef.minSize : void 0,
+        maxWidth: useColumnSizing ? header.column.columnDef.maxSize : void 0,
+        ...tableHeadCellProps?.style,
+        ...header.column.columnDef?.meta?.headerProps?.style
+      },
+      children: [
+        !header.isPlaceholder || rowSpan ? reactTable.flexRender(header.column.columnDef.header, header.getContext()) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ColumnSeparator_default,
+          {
+            ...components?.columnSeparatorProps?.headerCell,
+            ...header.column.columnDef?.meta?.columnSeparatorProps,
+            show: header.column.columnDef?.meta?.columnSeparatorProps?.show ?? components?.columnSeparatorProps?.headerCell?.show ?? showSeparator
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(ColumnResizer_default, { header, ...components?.columnResizerProps })
+      ]
+    },
+    header.id
+  );
+}
 var TableHeaderRows = ({
   table,
   columnResizing,
   virtual,
+  columnVirtual,
   components
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: table.getHeaderGroups().map((headerGroup) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: headerGroup.headers.map((header) => {
-      const { classes, style } = getColumnPinningStyles(header.column);
-      const useColumnSizing = header.column.columnDef?.meta?.useColumnSizing ?? columnResizing?.enabled ?? virtual?.enabled ?? false;
-      const tableHeadCellProps = typeof components?.tableHeadCellProps === "function" ? components?.tableHeadCellProps({ header, table }) : components?.tableHeadCellProps;
-      const nextHeader = headerGroup.headers?.[header.index + 1] || header;
-      const { isLastLeftPinnedColumn } = getColumnPinningInfo(header.column);
-      const { isFirstRightPinnedColumn } = getColumnPinningInfo(nextHeader.column);
-      const headerGroupLength = header.headerGroup.headers.length;
-      const showSeparator = header.index !== headerGroupLength - 1 && !isLastLeftPinnedColumn && !isFirstRightPinnedColumn && (!header.isPlaceholder || !nextHeader.isPlaceholder);
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        TableHead,
-        {
-          "data-testid": `table-head-${header.id}`,
-          colSpan: header.colSpan,
-          ...tableHeadCellProps,
-          ...header.column.columnDef?.meta?.headerProps,
-          className: cn(
-            classes,
-            tableHeadCellProps?.className,
-            header.column.columnDef?.meta?.headerProps?.className
-          ),
-          style: {
-            ...style,
-            width: useColumnSizing ? header.getSize() : void 0,
-            minWidth: useColumnSizing ? header.column.columnDef.minSize : void 0,
-            maxWidth: useColumnSizing ? header.column.columnDef.maxSize : void 0,
-            ...tableHeadCellProps?.style,
-            ...header.column.columnDef?.meta?.headerProps?.style
-          },
-          children: [
-            header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext()),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ColumnSeparator_default,
-              {
-                ...components?.columnSeparatorProps?.headerCell,
-                ...header.column.columnDef?.meta?.columnSeparatorProps,
-                show: header.column.columnDef?.meta?.columnSeparatorProps?.show ?? components?.columnSeparatorProps?.headerCell?.show ?? showSeparator
-              }
+  const cellProps = { columnResizing, virtual, components, table };
+  const centerLeafCols = columnVirtual.enabled ? table.getCenterVisibleLeafColumns() : [];
+  const totalGroups = table.getHeaderGroups().length;
+  const spannedIds = /* @__PURE__ */ new Set();
+  const resolveHeaderCell = (header, headerGroup, groupIndex) => {
+    if (spannedIds.has(header.column.id)) return null;
+    const remainingRows = totalGroups - groupIndex;
+    if (header.isPlaceholder && header.column.columnDef.meta?.spanRows && remainingRows > 1) {
+      spannedIds.add(header.column.id);
+      return renderHeaderCell(header, headerGroup, cellProps, remainingRows);
+    }
+    return renderHeaderCell(header, headerGroup, cellProps);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: table.getHeaderGroups().map((headerGroup, groupIndex) => {
+    if (!columnVirtual.enabled) {
+      return /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: headerGroup.headers.map((header) => resolveHeaderCell(header, headerGroup, groupIndex)) }, headerGroup.id);
+    }
+    const leftHeaders = table.getLeftHeaderGroups()[groupIndex]?.headers ?? [];
+    const centerHeaders = table.getCenterHeaderGroups()[groupIndex]?.headers ?? [];
+    const rightHeaders = table.getRightHeaderGroups()[groupIndex]?.headers ?? [];
+    const isLeafLevel = !centerHeaders[0] || centerHeaders[0].subHeaders.length === 0;
+    if (isLeafLevel) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { children: [
+        leftHeaders.map((header) => resolveHeaderCell(header, headerGroup, groupIndex)),
+        columnVirtual.virtualPaddingLeft > 0 && /* @__PURE__ */ jsxRuntime.jsx("th", { "aria-hidden": "true", style: { width: columnVirtual.virtualPaddingLeft } }),
+        columnVirtual.virtualColumns.map((vc) => {
+          const header = centerHeaders[vc.index];
+          if (!header) return null;
+          return renderHeaderCell(header, headerGroup, cellProps);
+        }),
+        columnVirtual.virtualPaddingRight > 0 && /* @__PURE__ */ jsxRuntime.jsx("th", { "aria-hidden": "true", style: { width: columnVirtual.virtualPaddingRight } }),
+        rightHeaders.map((header) => resolveHeaderCell(header, headerGroup, groupIndex))
+      ] }, headerGroup.id);
+    }
+    const leafToGroupIdx = [];
+    let leafRunning = 0;
+    for (let gi = 0; gi < centerHeaders.length; gi++) {
+      for (let i = 0; i < centerHeaders[gi].colSpan; i++) {
+        leafToGroupIdx[leafRunning + i] = gi;
+      }
+      leafRunning += centerHeaders[gi].colSpan;
+    }
+    const virtualCols = columnVirtual.virtualColumns;
+    const useColumnSizing = columnResizing?.enabled ?? virtual?.enabled ?? false;
+    return /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { children: [
+      leftHeaders.map((header) => resolveHeaderCell(header, headerGroup, groupIndex)),
+      columnVirtual.virtualPaddingLeft > 0 && /* @__PURE__ */ jsxRuntime.jsx("th", { "aria-hidden": "true", style: { width: columnVirtual.virtualPaddingLeft } }),
+      virtualCols.map((vc, vcIdx) => {
+        const gi = leafToGroupIdx[vc.index];
+        if (gi === void 0) return null;
+        const groupHeader = centerHeaders[gi];
+        const leafCol = centerLeafCols[vc.index];
+        const isFirst = vcIdx === 0 || leafToGroupIdx[virtualCols[vcIdx - 1].index] !== gi;
+        const isLast = vcIdx === virtualCols.length - 1 || leafToGroupIdx[virtualCols[vcIdx + 1].index] !== gi;
+        const { classes, style } = getColumnPinningStyles(groupHeader.column);
+        const tableHeadCellProps = typeof components?.tableHeadCellProps === "function" ? components.tableHeadCellProps({ header: groupHeader, table }) : components?.tableHeadCellProps;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          TableHead,
+          {
+            colSpan: 1,
+            ...tableHeadCellProps,
+            ...groupHeader.column.columnDef?.meta?.headerProps,
+            className: cn(
+              classes,
+              tableHeadCellProps?.className,
+              groupHeader.column.columnDef?.meta?.headerProps?.className
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(ColumnResizer_default, { header, ...components?.columnResizerProps })
-          ]
-        },
-        header.id
-      );
-    }) }, headerGroup.id);
+            style: {
+              ...style,
+              width: useColumnSizing ? `calc(var(--col-${toCSSId(leafCol.id)}-size, ${leafCol.getSize()}) * 1px)` : void 0,
+              ...tableHeadCellProps?.style,
+              ...groupHeader.column.columnDef?.meta?.headerProps?.style
+            },
+            children: [
+              isFirst && !groupHeader.isPlaceholder ? reactTable.flexRender(groupHeader.column.columnDef.header, groupHeader.getContext()) : null,
+              /* @__PURE__ */ jsxRuntime.jsx(ColumnSeparator_default, { ...components?.columnSeparatorProps?.headerCell, show: isLast })
+            ]
+          },
+          `${groupHeader.id}-${leafCol.id}`
+        );
+      }),
+      columnVirtual.virtualPaddingRight > 0 && /* @__PURE__ */ jsxRuntime.jsx("th", { "aria-hidden": "true", style: { width: columnVirtual.virtualPaddingRight } }),
+      rightHeaders.map((header) => resolveHeaderCell(header, headerGroup, groupIndex))
+    ] }, headerGroup.id);
   }) });
 };
+var MemoizedTableHeaderRows = React__namespace.default.memo(
+  TableHeaderRows,
+  (_, next) => next.isResizing === true
+);
+function renderFilterCell(column, {
+  columnResizing,
+  virtual,
+  components,
+  table
+}) {
+  const { classes, style } = getColumnPinningStyles(column);
+  const useColumnSizing = column.columnDef.meta?.useColumnSizing ?? columnResizing?.enabled ?? virtual?.enabled ?? false;
+  const tableFilterCellProps = typeof components?.tableFilterCellProps === "function" ? components?.tableFilterCellProps({ column, table }) : components?.tableFilterCellProps;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TableCell,
+    {
+      "data-testid": `table-filter-cell-${column.id}`,
+      ...tableFilterCellProps,
+      ...column.columnDef?.meta?.filterCellProps,
+      className: cn(
+        "bg-white border-b",
+        classes,
+        tableFilterCellProps?.className,
+        column.columnDef?.meta?.filterCellProps?.className
+      ),
+      style: {
+        ...style,
+        width: useColumnSizing ? `calc(var(--col-${toCSSId(column.id)}-size, ${column.getSize()}) * 1px)` : void 0,
+        minWidth: useColumnSizing ? column.columnDef.minSize : void 0,
+        maxWidth: useColumnSizing ? column.columnDef.maxSize : void 0,
+        ...tableFilterCellProps?.style,
+        ...column.columnDef?.meta?.filterCellProps?.style
+      },
+      children: column.getCanFilter() && column.columnDef.meta?.renderColumnFilter?.({
+        column,
+        table
+      })
+    },
+    column.id
+  );
+}
 var TableFilterRow = ({
   table,
   filterableColumns,
   isSomeColumnsFilterable,
   columnResizing,
   virtual,
+  columnVirtual,
   components
 }) => {
   if (!isSomeColumnsFilterable) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(TableRow, { "data-testid": "table-filter-row", children: filterableColumns.map((column) => {
-    const { classes, style } = getColumnPinningStyles(column);
-    const useColumnSizing = column.columnDef.meta?.useColumnSizing ?? columnResizing?.enabled ?? virtual?.enabled ?? false;
-    const tableFilterCellProps = typeof components?.tableFilterCellProps === "function" ? components?.tableFilterCellProps({ column, table }) : components?.tableFilterCellProps;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      TableCell,
-      {
-        "data-testid": `table-filter-cell-${column.id}`,
-        ...tableFilterCellProps,
-        ...column.columnDef?.meta?.filterCellProps,
-        className: cn(
-          "bg-white border-b",
-          classes,
-          tableFilterCellProps?.className,
-          column.columnDef?.meta?.filterCellProps?.className
-        ),
-        style: {
-          ...style,
-          width: useColumnSizing ? column.getSize() : void 0,
-          minWidth: useColumnSizing ? column.columnDef.minSize : void 0,
-          maxWidth: useColumnSizing ? column.columnDef.maxSize : void 0,
-          ...tableFilterCellProps?.style,
-          ...column.columnDef?.meta?.filterCellProps?.style
-        },
-        children: column.getCanFilter() && column.columnDef.meta?.renderColumnFilter?.({
-          column,
-          table
-        })
-      },
-      column.id
-    );
-  }) });
+  const cellProps = { columnResizing, virtual, components, table };
+  if (!columnVirtual.enabled) {
+    return /* @__PURE__ */ jsxRuntime.jsx(TableRow, { "data-testid": "table-filter-row", children: filterableColumns.map((column) => renderFilterCell(column, cellProps)) });
+  }
+  const centerColumns = table.getCenterVisibleLeafColumns();
+  const leftColumns = filterableColumns.filter((col) => col.getIsPinned() === "left");
+  const centerFilterColumns = filterableColumns.filter((col) => !col.getIsPinned());
+  const rightColumns = filterableColumns.filter((col) => col.getIsPinned() === "right");
+  const centerColumnIndexMap = new Map(centerColumns.map((col, i) => [col.id, i]));
+  const virtualIndexSet = new Set(columnVirtual.virtualColumns.map((vc) => vc.index));
+  return /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { "data-testid": "table-filter-row", children: [
+    leftColumns.map((column) => renderFilterCell(column, cellProps)),
+    columnVirtual.virtualPaddingLeft > 0 && /* @__PURE__ */ jsxRuntime.jsx("td", { "aria-hidden": "true", style: { width: columnVirtual.virtualPaddingLeft } }),
+    centerFilterColumns.filter((col) => virtualIndexSet.has(centerColumnIndexMap.get(col.id) ?? -1)).map((column) => renderFilterCell(column, cellProps)),
+    columnVirtual.virtualPaddingRight > 0 && /* @__PURE__ */ jsxRuntime.jsx("td", { "aria-hidden": "true", style: { width: columnVirtual.virtualPaddingRight } }),
+    rightColumns.map((column) => renderFilterCell(column, cellProps))
+  ] });
 };
+var MemoizedTableFilterRow = React__namespace.default.memo(
+  TableFilterRow,
+  (_, next) => next.isResizing === true
+);
 var TableDataRows = ({
   table,
   rowModel,
@@ -9765,6 +9923,7 @@ var TableDataRows = ({
   visibleColumnCount,
   columnResizing,
   virtual,
+  columnVirtual,
   onRowClick,
   components
 }) => {
@@ -9783,6 +9942,56 @@ var TableDataRows = ({
       if (!row) return null;
       const virtualIndex = config.isVirtualize ? item.index : void 0;
       const tableDataRowProps = typeof components?.tableDataRowProps === "function" ? components.tableDataRowProps({ row, table }) || {} : components?.tableDataRowProps || {};
+      const renderCell = (cell) => {
+        const { classes, style } = getColumnPinningStyles(cell.column);
+        const useColumnSizing = cell.column.columnDef.meta?.useColumnSizing ?? columnResizing?.enabled ?? virtual?.enabled ?? false;
+        const tableDataCellProps = typeof components?.tableDataCellProps === "function" ? components?.tableDataCellProps({ row, cell, table }) : components?.tableDataCellProps;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          TableCell,
+          {
+            "data-testid": `table-data-cell-${cell.id}`,
+            "data-row-id": row.id,
+            "data-column-id": cell.column.id,
+            ...tableDataCellProps,
+            ...cell.column.columnDef?.meta?.cellProps,
+            className: cn(
+              {
+                "bg-[#dfeae3]": row.getIsSelected(),
+                "bg-white group-hover:bg-sus-primary-3-hover transition-colors duration-150": !row.getIsSelected()
+              },
+              classes,
+              tableDataCellProps?.className,
+              cell.column.columnDef?.meta?.cellProps?.className
+            ),
+            style: {
+              ...style,
+              width: useColumnSizing ? `calc(var(--col-${toCSSId(cell.column.id)}-size, ${cell.column.getSize()}) * 1px)` : void 0,
+              minWidth: useColumnSizing ? cell.column.columnDef.minSize : void 0,
+              maxWidth: useColumnSizing ? cell.column.columnDef.maxSize : void 0,
+              ...tableDataCellProps?.style,
+              ...cell.column.columnDef?.meta?.cellProps?.style
+            },
+            children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
+          },
+          cell.id
+        );
+      };
+      const rowContent = columnVirtual.enabled ? (() => {
+        const leftCells = row.getLeftVisibleCells();
+        const centerCells = row.getCenterVisibleCells();
+        const rightCells = row.getRightVisibleCells();
+        return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          leftCells.map(renderCell),
+          columnVirtual.virtualPaddingLeft > 0 && /* @__PURE__ */ jsxRuntime.jsx("td", { "aria-hidden": "true", style: { width: columnVirtual.virtualPaddingLeft } }),
+          columnVirtual.virtualColumns.map((vc) => {
+            const cell = centerCells[vc.index];
+            if (!cell) return null;
+            return renderCell(cell);
+          }),
+          columnVirtual.virtualPaddingRight > 0 && /* @__PURE__ */ jsxRuntime.jsx("td", { "aria-hidden": "true", style: { width: columnVirtual.virtualPaddingRight } }),
+          rightCells.map(renderCell)
+        ] });
+      })() : row.getVisibleCells().map(renderCell);
       return /* @__PURE__ */ React.createElement(
         TableRow,
         {
@@ -9800,40 +10009,7 @@ var TableDataRows = ({
             table
           })
         },
-        row.getVisibleCells().map((cell) => {
-          const { classes, style } = getColumnPinningStyles(cell.column);
-          const useColumnSizing = cell.column.columnDef.meta?.useColumnSizing ?? columnResizing?.enabled ?? virtual?.enabled ?? false;
-          const tableDataCellProps = typeof components?.tableDataCellProps === "function" ? components?.tableDataCellProps({ row, cell, table }) : components?.tableDataCellProps;
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            TableCell,
-            {
-              "data-testid": `table-data-cell-${cell.id}`,
-              "data-row-id": row.id,
-              "data-column-id": cell.column.id,
-              ...tableDataCellProps,
-              ...cell.column.columnDef?.meta?.cellProps,
-              className: cn(
-                {
-                  "bg-[#dfeae3]": row.getIsSelected(),
-                  "bg-white group-hover:bg-sus-primary-3-hover": !row.getIsSelected()
-                },
-                classes,
-                tableDataCellProps?.className,
-                cell.column.columnDef?.meta?.cellProps?.className
-              ),
-              style: {
-                ...style,
-                width: useColumnSizing ? cell.column.getSize() : void 0,
-                minWidth: useColumnSizing ? cell.column.columnDef.minSize : void 0,
-                maxWidth: useColumnSizing ? cell.column.columnDef.maxSize : void 0,
-                ...tableDataCellProps?.style,
-                ...cell.column.columnDef?.meta?.cellProps?.style
-              },
-              children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
-            },
-            cell.id
-          );
-        })
+        rowContent
       );
     }),
     virtualEnabled && paddingBottom > 0 && /* @__PURE__ */ jsxRuntime.jsx(TableRow, { "aria-hidden": "true", "data-testid": "table-virtual-padding-bottom", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -9846,66 +10022,163 @@ var TableDataRows = ({
     ) })
   ] });
 };
+var MemoizedTableDataRows = React__namespace.default.memo(
+  TableDataRows,
+  (_, next) => next.isResizing === true
+);
+function renderFooterCell(footer, footerGroup, {
+  columnResizing,
+  virtual,
+  components,
+  table
+}, rowSpan) {
+  const { classes, style } = getColumnPinningStyles(footer.column);
+  const useColumnSizing = footer.column.columnDef?.meta?.useColumnSizing ?? columnResizing?.enabled ?? virtual?.enabled ?? false;
+  const tableFooterCellProps = typeof components?.tableFooterCellProps === "function" ? components.tableFooterCellProps({ footer, table }) : components?.tableFooterCellProps;
+  const nextFooter = footerGroup.headers[footer.index + 1] ?? footer;
+  const { isLastLeftPinnedColumn } = getColumnPinningInfo(footer.column);
+  const { isFirstRightPinnedColumn } = getColumnPinningInfo(nextFooter.column);
+  const footerGroupLength = footerGroup.headers.length;
+  const showSeparator = footer.index !== footerGroupLength - 1 && !isLastLeftPinnedColumn && !isFirstRightPinnedColumn && (!footer.isPlaceholder || !nextFooter.isPlaceholder);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    TableHead,
+    {
+      "data-testid": `footer-cell-${footer.id}`,
+      colSpan: footer.colSpan,
+      rowSpan,
+      ...tableFooterCellProps,
+      ...footer.column.columnDef?.meta?.footerProps,
+      className: cn(
+        classes,
+        tableFooterCellProps?.className,
+        footer.column.columnDef?.meta?.footerProps?.className
+      ),
+      style: {
+        ...style,
+        width: useColumnSizing ? `calc(var(--col-${toCSSId(footer.column.id)}-size, ${footer.column.getSize()}) * 1px)` : void 0,
+        minWidth: useColumnSizing ? footer.column.columnDef.minSize : void 0,
+        maxWidth: useColumnSizing ? footer.column.columnDef.maxSize : void 0,
+        ...tableFooterCellProps?.style,
+        ...footer.column.columnDef?.meta?.footerProps?.style
+      },
+      children: [
+        footer.isPlaceholder ? null : reactTable.flexRender(footer.column.columnDef.footer, footer.getContext()),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ColumnSeparator_default,
+          {
+            ...components?.columnSeparatorProps?.headerCell,
+            ...footer.column.columnDef?.meta?.columnSeparatorProps,
+            show: footer.column.columnDef?.meta?.columnSeparatorProps?.show ?? components?.columnSeparatorProps?.headerCell?.show ?? showSeparator
+          }
+        ),
+        !footer.isPlaceholder && /* @__PURE__ */ jsxRuntime.jsx(ColumnResizer_default, { header: footer, ...components?.columnResizerProps })
+      ]
+    },
+    footer.id
+  );
+}
 var TableFooterRows = ({
   table,
   columnResizing,
-  components,
-  virtual
+  virtual,
+  columnVirtual,
+  components
 }) => {
-  const hasAnyFooter = table.getAllColumns().some((col) => col.columnDef.footer != null);
-  if (!hasAnyFooter) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: table.getFooterGroups().map((footerGroup) => {
+  const cellProps = { columnResizing, virtual, components, table };
+  const centerLeafCols = columnVirtual.enabled ? table.getCenterVisibleLeafColumns() : [];
+  const totalFooterGroups = table.getFooterGroups().length;
+  const spannedIds = /* @__PURE__ */ new Set();
+  const resolveFooterCell = (footer, footerGroup, groupIndex) => {
+    if (spannedIds.has(footer.column.id)) return null;
+    const remainingRows = totalFooterGroups - groupIndex;
+    if (!footer.isPlaceholder && footer.column.columnDef.meta?.spanRows && remainingRows > 1) {
+      spannedIds.add(footer.column.id);
+      return renderFooterCell(footer, footerGroup, cellProps, remainingRows);
+    }
+    return renderFooterCell(footer, footerGroup, cellProps);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: table.getFooterGroups().map((footerGroup, groupIndex) => {
     const tableFooterRowProps = typeof components?.tableFooterRowProps === "function" ? components.tableFooterRowProps({ footerGroup, table }) : components?.tableFooterRowProps;
-    return /* @__PURE__ */ jsxRuntime.jsx(TableRow, { ...tableFooterRowProps, children: footerGroup.headers.map((footer) => {
-      const { classes, style } = getColumnPinningStyles(footer.column);
-      const useColumnSizing = footer.column.columnDef?.meta?.useColumnSizing ?? columnResizing?.enabled ?? virtual?.enabled ?? false;
-      const tableFooterCellProps = typeof components?.tableFooterCellProps === "function" ? components.tableFooterCellProps({ footer, table }) : components?.tableFooterCellProps;
-      const nextFooter = footerGroup.headers[footer.index + 1] ?? footer;
-      const { isLastLeftPinnedColumn } = getColumnPinningInfo(footer.column);
-      const { isFirstRightPinnedColumn } = getColumnPinningInfo(nextFooter.column);
-      const footerGroupLength = footer.headerGroup.headers.length;
-      const showSeparator = footer.index !== footerGroupLength - 1 && !isLastLeftPinnedColumn && !isFirstRightPinnedColumn && (!footer.isPlaceholder || !nextFooter.isPlaceholder);
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        TableHead,
-        {
-          "data-testid": `footer-cell-${footer.id}`,
-          colSpan: footer.colSpan,
-          ...tableFooterCellProps,
-          ...footer.column.columnDef?.meta?.footerProps,
-          className: cn(
-            classes,
-            tableFooterCellProps?.className,
-            footer.column.columnDef?.meta?.footerProps?.className
-          ),
-          style: {
-            ...style,
-            width: useColumnSizing ? `calc(var(--col-${footer.column.id}-size, ${footer.column.getSize()}) * 1px)` : void 0,
-            minWidth: useColumnSizing ? footer.column.columnDef.minSize : void 0,
-            maxWidth: useColumnSizing ? footer.column.columnDef.maxSize : void 0,
-            ...tableFooterCellProps?.style,
-            ...footer.column.columnDef?.meta?.footerProps?.style
-          },
-          children: [
-            footer.isPlaceholder ? null : reactTable.flexRender(footer.column.columnDef.footer, footer.getContext()),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ColumnSeparator_default,
-              {
-                ...components?.columnSeparatorProps?.headerCell,
-                ...footer.column.columnDef?.meta?.columnSeparatorProps,
-                show: footer.column.columnDef?.meta?.columnSeparatorProps?.show ?? components?.columnSeparatorProps?.headerCell?.show ?? showSeparator
-              }
+    if (!columnVirtual.enabled) {
+      return /* @__PURE__ */ jsxRuntime.jsx(TableRow, { ...tableFooterRowProps, children: footerGroup.headers.map((footer) => resolveFooterCell(footer, footerGroup, groupIndex)) }, footerGroup.id);
+    }
+    const leftFooters = table.getLeftFooterGroups()[groupIndex]?.headers ?? [];
+    const centerFooters = table.getCenterFooterGroups()[groupIndex]?.headers ?? [];
+    const rightFooters = table.getRightFooterGroups()[groupIndex]?.headers ?? [];
+    const isLeafLevel = !centerFooters[0] || centerFooters[0].subHeaders.length === 0;
+    if (isLeafLevel) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { ...tableFooterRowProps, children: [
+        leftFooters.map((footer) => resolveFooterCell(footer, footerGroup, groupIndex)),
+        columnVirtual.virtualPaddingLeft > 0 && /* @__PURE__ */ jsxRuntime.jsx("th", { "aria-hidden": "true", style: { width: columnVirtual.virtualPaddingLeft } }),
+        columnVirtual.virtualColumns.map((vc) => {
+          const footer = centerFooters[vc.index];
+          if (!footer) return null;
+          return renderFooterCell(footer, footerGroup, cellProps);
+        }),
+        columnVirtual.virtualPaddingRight > 0 && /* @__PURE__ */ jsxRuntime.jsx("th", { "aria-hidden": "true", style: { width: columnVirtual.virtualPaddingRight } }),
+        rightFooters.map((footer) => resolveFooterCell(footer, footerGroup, groupIndex))
+      ] }, footerGroup.id);
+    }
+    const leafToGroupIdx = [];
+    let leafRunning = 0;
+    for (let gi = 0; gi < centerFooters.length; gi++) {
+      for (let i = 0; i < centerFooters[gi].colSpan; i++) {
+        leafToGroupIdx[leafRunning + i] = gi;
+      }
+      leafRunning += centerFooters[gi].colSpan;
+    }
+    const virtualCols = columnVirtual.virtualColumns;
+    const useColumnSizing = columnResizing?.enabled ?? virtual?.enabled ?? false;
+    return /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { ...tableFooterRowProps, children: [
+      leftFooters.map((footer) => resolveFooterCell(footer, footerGroup, groupIndex)),
+      columnVirtual.virtualPaddingLeft > 0 && /* @__PURE__ */ jsxRuntime.jsx("th", { "aria-hidden": "true", style: { width: columnVirtual.virtualPaddingLeft } }),
+      virtualCols.map((vc, vcIdx) => {
+        const gi = leafToGroupIdx[vc.index];
+        if (gi === void 0) return null;
+        const groupFooter = centerFooters[gi];
+        const leafCol = centerLeafCols[vc.index];
+        const isFirst = vcIdx === 0 || leafToGroupIdx[virtualCols[vcIdx - 1].index] !== gi;
+        const isLast = vcIdx === virtualCols.length - 1 || leafToGroupIdx[virtualCols[vcIdx + 1].index] !== gi;
+        const { classes, style } = getColumnPinningStyles(groupFooter.column);
+        const tableFooterCellProps = typeof components?.tableFooterCellProps === "function" ? components.tableFooterCellProps({ footer: groupFooter, table }) : components?.tableFooterCellProps;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          TableHead,
+          {
+            colSpan: 1,
+            ...tableFooterCellProps,
+            ...groupFooter.column.columnDef?.meta?.footerProps,
+            className: cn(
+              classes,
+              tableFooterCellProps?.className,
+              groupFooter.column.columnDef?.meta?.footerProps?.className
             ),
-            !footer.isPlaceholder && /* @__PURE__ */ jsxRuntime.jsx(ColumnResizer_default, { header: footer, ...components?.columnResizerProps })
-          ]
-        },
-        footer.id
-      );
-    }) }, footerGroup.id);
+            style: {
+              ...style,
+              width: useColumnSizing ? `calc(var(--col-${toCSSId(leafCol.id)}-size, ${leafCol.getSize()}) * 1px)` : void 0,
+              ...tableFooterCellProps?.style,
+              ...groupFooter.column.columnDef?.meta?.footerProps?.style
+            },
+            children: [
+              isFirst && !groupFooter.isPlaceholder ? reactTable.flexRender(groupFooter.column.columnDef.footer, groupFooter.getContext()) : null,
+              /* @__PURE__ */ jsxRuntime.jsx(ColumnSeparator_default, { ...components?.columnSeparatorProps?.headerCell, show: isLast })
+            ]
+          },
+          `${groupFooter.id}-${leafCol.id}`
+        );
+      }),
+      columnVirtual.virtualPaddingRight > 0 && /* @__PURE__ */ jsxRuntime.jsx("th", { "aria-hidden": "true", style: { width: columnVirtual.virtualPaddingRight } }),
+      rightFooters.map((footer) => resolveFooterCell(footer, footerGroup, groupIndex))
+    ] }, footerGroup.id);
   }) });
 };
+var MemoizedTableFooterRows = React__namespace.default.memo(
+  TableFooterRows,
+  (_, next) => next.isResizing === true
+);
 var DataTable = ({
   tableRef,
   virtualizerRef,
+  columnVirtualizerRef,
   isInitialLoading,
   columns,
   data,
@@ -9945,7 +10218,15 @@ var DataTable = ({
     rowIdKey,
     childrenKey
   });
-  const { virtualizer, virtualItems, paddingTop, paddingBottom, rowModel } = useTableVirtualizer({
+  const {
+    virtualizer,
+    columnVirtualizer,
+    virtualItems,
+    paddingTop,
+    paddingBottom,
+    rowModel,
+    columnVirtual
+  } = useTableVirtualizer({
     enabled: virtualEnabled,
     table,
     containerRef: tableContainerRef,
@@ -9959,8 +10240,28 @@ var DataTable = ({
     activeStatusContent
   });
   const fetchMoreOnScrollReached = useScrollFetch({ scrollFetch, containerRef: tableContainerRef });
+  const columnResizingEnabled = columnResizing?.enabled;
+  const { columnSizing, columnSizingInfo } = table.getState();
+  const columnSizeVars = React.useMemo(() => {
+    if (!columnResizingEnabled && !virtualEnabled) return {};
+    const headers = table.getFlatHeaders();
+    const colSizes = {};
+    for (const header of headers) {
+      colSizes[`--header-${toCSSId(header.id)}-size`] = header.getSize();
+      colSizes[`--col-${toCSSId(header.column.id)}-size`] = header.column.getSize();
+      if (header.column.getIsPinned() === "left") {
+        colSizes[`--col-${toCSSId(header.column.id)}-pin-start`] = header.column.getStart("left");
+      } else if (header.column.getIsPinned() === "right") {
+        colSizes[`--col-${toCSSId(header.column.id)}-pin-after`] = header.column.getAfter("right");
+      }
+    }
+    return colSizes;
+  }, [columnSizing, columnSizingInfo, columnResizingEnabled, virtualEnabled]);
+  const isResizing = !columnVirtual.enabled && (columnResizingEnabled ?? false) && !!columnSizingInfo.isResizingColumn;
+  const hasAnyFooter = table.getAllColumns().some((col) => col.columnDef.footer != null);
   useBindRef_default({ ref: tableRef, value: table });
   useBindRef_default({ ref: virtualizerRef, value: virtualizer });
+  useBindRef_default({ ref: columnVirtualizerRef, value: columnVirtualizer });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     TableContainer,
     {
@@ -9996,44 +10297,53 @@ var DataTable = ({
             },
             defaultIcon: /* @__PURE__ */ jsxRuntime.jsx(SuiEmptyDataIcon, { size: 128 })
           }
-        ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            Table,
-            {
-              ...components?.tableProps,
-              style: { tableLayout: virtualEnabled ? "fixed" : "auto", ...components?.tableProps?.style },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  TableHeader,
-                  {
-                    className: cn("sticky top-0 z-10 bg-white", components?.tableHeaderProps?.className),
-                    ...components?.tableHeaderProps,
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        TableHeaderRows,
-                        {
-                          table,
-                          columnResizing,
-                          virtual,
-                          components
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        TableFilterRow,
-                        {
-                          table,
-                          filterableColumns,
-                          isSomeColumnsFilterable,
-                          columnResizing,
-                          virtual,
-                          components
-                        }
-                      )
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(TableBody, { ...components?.tableBodyProps, children: /* @__PURE__ */ jsxRuntime.jsx(
-                  TableDataRows,
+        ) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+          Table,
+          {
+            ...components?.tableProps,
+            style: {
+              tableLayout: virtualEnabled ? "fixed" : "auto",
+              minWidth: columnVirtual.enabled ? `${table.getTotalSize()}px` : void 0,
+              ...components?.tableProps?.style,
+              ...columnSizeVars
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                TableHeader,
+                {
+                  className: cn("sticky top-0 z-10 bg-white", components?.tableHeaderProps?.className),
+                  ...components?.tableHeaderProps,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      MemoizedTableHeaderRows,
+                      {
+                        table,
+                        columnResizing,
+                        virtual,
+                        columnVirtual,
+                        components,
+                        isResizing
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      MemoizedTableFilterRow,
+                      {
+                        table,
+                        filterableColumns,
+                        isSomeColumnsFilterable,
+                        columnResizing,
+                        virtual,
+                        columnVirtual,
+                        components,
+                        isResizing
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(TableBody, { ...components?.tableBodyProps, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  MemoizedTableDataRows,
                   {
                     table,
                     rowModel,
@@ -10045,66 +10355,70 @@ var DataTable = ({
                     visibleColumnCount,
                     columnResizing,
                     virtual,
+                    columnVirtual,
                     onRowClick,
-                    components
+                    components,
+                    isResizing
                   }
-                ) }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  TableFooter,
+                ),
+                activeStatusContentComputed === "emptyFilteredData" && /* @__PURE__ */ jsxRuntime.jsx(TableRow, { "data-testid": "status-row-empty-filtered-data", children: /* @__PURE__ */ jsxRuntime.jsx(TableCell, { colSpan: visibleColumnCount, className: "border-b-0 p-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  StatusContentSlot_default,
                   {
-                    ...components?.tableFooterProps,
-                    className: cn("sticky bottom-0 z-10 bg-white", components?.tableFooterProps?.className),
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      TableFooterRows,
-                      {
-                        table,
-                        columnResizing,
-                        virtual,
-                        components
-                      }
-                    )
+                    content: statusContent?.emptyFilteredData?.content ?? "No records found. Please try a different search.",
+                    icon: statusContent?.emptyFilteredData?.icon,
+                    wrapperProps: statusContent?.emptyFilteredData?.wrapperProps,
+                    defaultWrapperProps: {
+                      className: "flex flex-col items-center justify-center text-sm py-4 gap-2",
+                      ["data-testid"]: "status-content-empty-filtered-data"
+                    },
+                    defaultIcon: /* @__PURE__ */ jsxRuntime.jsx(SuiEmptyDataIcon, { size: 128 })
                   }
-                )
-              ]
-            }
-          ),
-          activeStatusContentComputed === "emptyFilteredData" && /* @__PURE__ */ jsxRuntime.jsx(
-            StatusContentSlot_default,
-            {
-              content: statusContent?.emptyFilteredData?.content ?? "No records found. Please try a different search.",
-              icon: statusContent?.emptyFilteredData?.icon,
-              wrapperProps: statusContent?.emptyFilteredData?.wrapperProps,
-              defaultWrapperProps: {
-                className: "flex flex-col h-[calc(100%-76px)] items-center justify-center text-sm py-4 gap-2",
-                ["data-testid"]: "status-content-empty-filtered-data"
-              },
-              defaultIcon: /* @__PURE__ */ jsxRuntime.jsx(SuiEmptyDataIcon, { size: 128 })
-            }
-          ),
-          activeStatusContentComputed === "fetchingMore" && /* @__PURE__ */ jsxRuntime.jsx(
-            StatusContentSlot_default,
-            {
-              content: statusContent?.fetchingMore?.content ?? "Loading more...",
-              wrapperProps: statusContent?.fetchingMore?.wrapperProps,
-              defaultWrapperProps: {
-                className: "flex flex-col items-center justify-center text-sm py-4 gap-2",
-                ["data-testid"]: "status-content-fetching-more"
-              }
-            }
-          ),
-          activeStatusContentComputed === "noMoreData" && /* @__PURE__ */ jsxRuntime.jsx(
-            StatusContentSlot_default,
-            {
-              content: statusContent?.noMoreData?.content,
-              icon: statusContent?.noMoreData?.icon,
-              wrapperProps: statusContent?.noMoreData?.wrapperProps,
-              defaultWrapperProps: {
-                className: "flex flex-col items-center justify-center text-sm py-4 gap-2",
-                ["data-testid"]: "status-content-no-more-data"
-              }
-            }
-          )
-        ] }),
+                ) }) }),
+                activeStatusContentComputed === "fetchingMore" && /* @__PURE__ */ jsxRuntime.jsx(TableRow, { "data-testid": "status-row-fetching-more", children: /* @__PURE__ */ jsxRuntime.jsx(TableCell, { colSpan: visibleColumnCount, className: "border-b-0 p-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  StatusContentSlot_default,
+                  {
+                    content: statusContent?.fetchingMore?.content ?? "Loading more...",
+                    wrapperProps: statusContent?.fetchingMore?.wrapperProps,
+                    defaultWrapperProps: {
+                      className: "flex flex-col items-center justify-center text-sm py-4 gap-2",
+                      ["data-testid"]: "status-content-fetching-more"
+                    }
+                  }
+                ) }) }),
+                activeStatusContentComputed === "noMoreData" && /* @__PURE__ */ jsxRuntime.jsx(TableRow, { "data-testid": "status-row-no-more-data", children: /* @__PURE__ */ jsxRuntime.jsx(TableCell, { colSpan: visibleColumnCount, className: "border-b-0 p-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  StatusContentSlot_default,
+                  {
+                    content: statusContent?.noMoreData?.content,
+                    icon: statusContent?.noMoreData?.icon,
+                    wrapperProps: statusContent?.noMoreData?.wrapperProps,
+                    defaultWrapperProps: {
+                      className: "flex flex-col items-center justify-center text-sm py-4 gap-2",
+                      ["data-testid"]: "status-content-no-more-data"
+                    }
+                  }
+                ) }) })
+              ] }),
+              hasAnyFooter && /* @__PURE__ */ jsxRuntime.jsx(
+                TableFooter,
+                {
+                  ...components?.tableFooterProps,
+                  className: cn("sticky bottom-0 z-10 bg-white", components?.tableFooterProps?.className),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    MemoizedTableFooterRows,
+                    {
+                      table,
+                      columnResizing,
+                      virtual,
+                      columnVirtual,
+                      components,
+                      isResizing
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ) }),
         debug && /* @__PURE__ */ jsxRuntime.jsx(DataTableDevTool_default, { table })
       ]
     }