@sustaina/shared-ui 1.68.0 → 1.70.0

package/dist/index.mjs

@@ -6550,7 +6550,7 @@ var MeasureText = React.forwardRef(({ style, children }, ref) => {
   React.useImperativeHandle(ref, () => ({
     isExceed: () => {
       const span = spanRef.current;
-      return span.scrollHeight > span.clientHeight;
+      return span.scrollHeight > span.clientHeight || span.scrollWidth > span.clientWidth;
     },
     getHeight: () => spanRef.current.clientHeight
   }));
@@ -8977,7 +8977,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()
         },
@@ -9005,13 +9005,17 @@ var HeaderCell = ({
         showSorter && /* @__PURE__ */ 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__ */ jsx(
                 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
                   }),
@@ -9022,7 +9026,7 @@ var HeaderCell = ({
               /* @__PURE__ */ jsx(
                 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
                   }),
@@ -9098,7 +9102,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
@@ -9457,8 +9461,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,
@@ -9466,23 +9475,50 @@ var useTableVirtualizer = ({
   virtual
 }) => {
   const rowModel = table.getRowModel().rows;
+  const columnsEnabled = virtual?.columns?.enabled ?? false;
+  const centerColumns = table.getCenterVisibleLeafColumns();
+  const getRowVirtualItemKey = useCallback((index) => rowModel[index]?.id ?? index, [rowModel]);
+  const getColumnVirtualItemKey = useCallback(
+    (index) => centerColumns[index]?.id ?? index,
+    [centerColumns]
+  );
   const virtualizer = 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 = 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({
@@ -9585,6 +9621,7 @@ var ColumnSeparator = ({ show, className, ...props }) => {
 var ColumnSeparator_default = React__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");
@@ -9595,8 +9632,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
   };
@@ -9615,102 +9652,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__ */ 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 ? flexRender(header.column.columnDef.header, header.getContext()) : null,
+        /* @__PURE__ */ jsx(
+          ColumnSeparator_default,
+          {
+            ...components?.columnSeparatorProps?.headerCell,
+            ...header.column.columnDef?.meta?.columnSeparatorProps,
+            show: header.column.columnDef?.meta?.columnSeparatorProps?.show ?? components?.columnSeparatorProps?.headerCell?.show ?? showSeparator
+          }
+        ),
+        /* @__PURE__ */ jsx(ColumnResizer_default, { header, ...components?.columnResizerProps })
+      ]
+    },
+    header.id
+  );
+}
 var TableHeaderRows = ({
   table,
   columnResizing,
   virtual,
+  columnVirtual,
   components
 }) => {
-  return /* @__PURE__ */ jsx(Fragment, { children: table.getHeaderGroups().map((headerGroup) => {
-    return /* @__PURE__ */ 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__ */ 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 ? `calc(var(--header-${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 ? null : flexRender(header.column.columnDef.header, header.getContext()),
-            /* @__PURE__ */ 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__ */ jsx(Fragment, { children: table.getHeaderGroups().map((headerGroup, groupIndex) => {
+    if (!columnVirtual.enabled) {
+      return /* @__PURE__ */ 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__ */ jsxs(TableRow, { children: [
+        leftHeaders.map((header) => resolveHeaderCell(header, headerGroup, groupIndex)),
+        columnVirtual.virtualPaddingLeft > 0 && /* @__PURE__ */ 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__ */ 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__ */ jsxs(TableRow, { children: [
+      leftHeaders.map((header) => resolveHeaderCell(header, headerGroup, groupIndex)),
+      columnVirtual.virtualPaddingLeft > 0 && /* @__PURE__ */ 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__ */ jsxs(
+          TableHead,
+          {
+            colSpan: 1,
+            ...tableHeadCellProps,
+            ...groupHeader.column.columnDef?.meta?.headerProps,
+            className: cn(
+              classes,
+              tableHeadCellProps?.className,
+              groupHeader.column.columnDef?.meta?.headerProps?.className
             ),
-            /* @__PURE__ */ 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 ? flexRender(groupHeader.column.columnDef.header, groupHeader.getContext()) : null,
+              /* @__PURE__ */ jsx(ColumnSeparator_default, { ...components?.columnSeparatorProps?.headerCell, show: isLast })
+            ]
+          },
+          `${groupHeader.id}-${leafCol.id}`
+        );
+      }),
+      columnVirtual.virtualPaddingRight > 0 && /* @__PURE__ */ jsx("th", { "aria-hidden": "true", style: { width: columnVirtual.virtualPaddingRight } }),
+      rightHeaders.map((header) => resolveHeaderCell(header, headerGroup, groupIndex))
+    ] }, headerGroup.id);
   }) });
 };
+var MemoizedTableHeaderRows = React__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__ */ 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__ */ 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__ */ 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-${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
-    );
-  }) });
+  const cellProps = { columnResizing, virtual, components, table };
+  if (!columnVirtual.enabled) {
+    return /* @__PURE__ */ 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__ */ jsxs(TableRow, { "data-testid": "table-filter-row", children: [
+    leftColumns.map((column) => renderFilterCell(column, cellProps)),
+    columnVirtual.virtualPaddingLeft > 0 && /* @__PURE__ */ 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__ */ jsx("td", { "aria-hidden": "true", style: { width: columnVirtual.virtualPaddingRight } }),
+    rightColumns.map((column) => renderFilterCell(column, cellProps))
+  ] });
 };
+var MemoizedTableFilterRow = React__default.memo(
+  TableFilterRow,
+  (_, next) => next.isResizing === true
+);
 var TableDataRows = ({
   table,
   rowModel,
@@ -9722,6 +9880,7 @@ var TableDataRows = ({
   visibleColumnCount,
   columnResizing,
   virtual,
+  columnVirtual,
   onRowClick,
   components
 }) => {
@@ -9740,6 +9899,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__ */ 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: 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__ */ jsxs(Fragment, { children: [
+          leftCells.map(renderCell),
+          columnVirtual.virtualPaddingLeft > 0 && /* @__PURE__ */ 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__ */ jsx("td", { "aria-hidden": "true", style: { width: columnVirtual.virtualPaddingRight } }),
+          rightCells.map(renderCell)
+        ] });
+      })() : row.getVisibleCells().map(renderCell);
       return /* @__PURE__ */ createElement(
         TableRow,
         {
@@ -9757,40 +9966,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__ */ 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 ? `calc(var(--col-${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: flexRender(cell.column.columnDef.cell, cell.getContext())
-            },
-            cell.id
-          );
-        })
+        rowContent
       );
     }),
     virtualEnabled && paddingBottom > 0 && /* @__PURE__ */ jsx(TableRow, { "aria-hidden": "true", "data-testid": "table-virtual-padding-bottom", children: /* @__PURE__ */ jsx(
@@ -9805,68 +9981,161 @@ var TableDataRows = ({
 };
 var MemoizedTableDataRows = React__default.memo(
   TableDataRows,
-  (prev, next) => prev.table.options.data === next.table.options.data
+  (_, 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__ */ 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 : flexRender(footer.column.columnDef.footer, footer.getContext()),
+        /* @__PURE__ */ 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__ */ 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__ */ jsx(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__ */ jsx(Fragment, { children: table.getFooterGroups().map((footerGroup, groupIndex) => {
     const tableFooterRowProps = typeof components?.tableFooterRowProps === "function" ? components.tableFooterRowProps({ footerGroup, table }) : components?.tableFooterRowProps;
-    return /* @__PURE__ */ 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__ */ 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 : flexRender(footer.column.columnDef.footer, footer.getContext()),
-            /* @__PURE__ */ 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__ */ 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__ */ jsxs(TableRow, { ...tableFooterRowProps, children: [
+        leftFooters.map((footer) => resolveFooterCell(footer, footerGroup, groupIndex)),
+        columnVirtual.virtualPaddingLeft > 0 && /* @__PURE__ */ 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__ */ 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__ */ jsxs(TableRow, { ...tableFooterRowProps, children: [
+      leftFooters.map((footer) => resolveFooterCell(footer, footerGroup, groupIndex)),
+      columnVirtual.virtualPaddingLeft > 0 && /* @__PURE__ */ 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__ */ jsxs(
+          TableHead,
+          {
+            colSpan: 1,
+            ...tableFooterCellProps,
+            ...groupFooter.column.columnDef?.meta?.footerProps,
+            className: cn(
+              classes,
+              tableFooterCellProps?.className,
+              groupFooter.column.columnDef?.meta?.footerProps?.className
             ),
-            !footer.isPlaceholder && /* @__PURE__ */ 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 ? flexRender(groupFooter.column.columnDef.footer, groupFooter.getContext()) : null,
+              /* @__PURE__ */ jsx(ColumnSeparator_default, { ...components?.columnSeparatorProps?.headerCell, show: isLast })
+            ]
+          },
+          `${groupFooter.id}-${leafCol.id}`
+        );
+      }),
+      columnVirtual.virtualPaddingRight > 0 && /* @__PURE__ */ jsx("th", { "aria-hidden": "true", style: { width: columnVirtual.virtualPaddingRight } }),
+      rightFooters.map((footer) => resolveFooterCell(footer, footerGroup, groupIndex))
+    ] }, footerGroup.id);
   }) });
 };
+var MemoizedTableFooterRows = React__default.memo(
+  TableFooterRows,
+  (_, next) => next.isResizing === true
+);
 var DataTable = ({
   tableRef,
   virtualizerRef,
+  columnVirtualizerRef,
   isInitialLoading,
   columns,
   data,
@@ -9906,7 +10175,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,
@@ -9927,14 +10204,21 @@ var DataTable = ({
     const headers = table.getFlatHeaders();
     const colSizes = {};
     for (const header of headers) {
-      colSizes[`--header-${header.id}-size`] = header.getSize();
-      colSizes[`--col-${header.column.id}-size`] = header.column.getSize();
+      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 = columnResizingEnabled && !!columnSizingInfo.isResizingColumn;
+  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__ */ jsxs(
     TableContainer,
     {
@@ -9970,47 +10254,52 @@ var DataTable = ({
             },
             defaultIcon: /* @__PURE__ */ jsx(SuiEmptyDataIcon, { size: 128 })
           }
-        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs(
-            Table,
-            {
-              ...components?.tableProps,
-              style: {
-                tableLayout: virtualEnabled ? "fixed" : "auto",
-                ...components?.tableProps?.style,
-                ...columnSizeVars
-              },
-              children: [
-                /* @__PURE__ */ jsxs(
-                  TableHeader,
-                  {
-                    className: cn("sticky top-0 z-10 bg-white", components?.tableHeaderProps?.className),
-                    ...components?.tableHeaderProps,
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        TableHeaderRows,
-                        {
-                          table,
-                          columnResizing,
-                          virtual,
-                          components
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        TableFilterRow,
-                        {
-                          table,
-                          filterableColumns,
-                          isSomeColumnsFilterable,
-                          columnResizing,
-                          virtual,
-                          components
-                        }
-                      )
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx(TableBody, { ...components?.tableBodyProps, children: isResizing ? /* @__PURE__ */ jsx(
+        ) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+          Table,
+          {
+            ...components?.tableProps,
+            style: {
+              tableLayout: virtualEnabled ? "fixed" : "auto",
+              minWidth: columnVirtual.enabled ? `${table.getTotalSize()}px` : void 0,
+              ...components?.tableProps?.style,
+              ...columnSizeVars
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                TableHeader,
+                {
+                  className: cn("sticky top-0 z-10 bg-white", components?.tableHeaderProps?.className),
+                  ...components?.tableHeaderProps,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      MemoizedTableHeaderRows,
+                      {
+                        table,
+                        columnResizing,
+                        virtual,
+                        columnVirtual,
+                        components,
+                        isResizing
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      MemoizedTableFilterRow,
+                      {
+                        table,
+                        filterableColumns,
+                        isSomeColumnsFilterable,
+                        columnResizing,
+                        virtual,
+                        columnVirtual,
+                        components,
+                        isResizing
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(TableBody, { ...components?.tableBodyProps, children: [
+                /* @__PURE__ */ jsx(
                   MemoizedTableDataRows,
                   {
                     table,
@@ -10023,82 +10312,70 @@ var DataTable = ({
                     visibleColumnCount,
                     columnResizing,
                     virtual,
+                    columnVirtual,
                     onRowClick,
-                    components
+                    components,
+                    isResizing
                   }
-                ) : /* @__PURE__ */ jsx(
-                  TableDataRows,
+                ),
+                activeStatusContentComputed === "emptyFilteredData" && /* @__PURE__ */ jsx(TableRow, { "data-testid": "status-row-empty-filtered-data", children: /* @__PURE__ */ jsx(TableCell, { colSpan: visibleColumnCount, className: "border-b-0 p-0", children: /* @__PURE__ */ jsx(
+                  StatusContentSlot_default,
                   {
-                    table,
-                    rowModel,
-                    virtualEnabled,
-                    virtualItems,
-                    virtualizer,
-                    paddingTop,
-                    paddingBottom,
-                    visibleColumnCount,
-                    columnResizing,
-                    virtual,
-                    onRowClick,
-                    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__ */ jsx(SuiEmptyDataIcon, { size: 128 })
                   }
-                ) }),
-                /* @__PURE__ */ jsx(
-                  TableFooter,
+                ) }) }),
+                activeStatusContentComputed === "fetchingMore" && /* @__PURE__ */ jsx(TableRow, { "data-testid": "status-row-fetching-more", children: /* @__PURE__ */ jsx(TableCell, { colSpan: visibleColumnCount, className: "border-b-0 p-0", children: /* @__PURE__ */ jsx(
+                  StatusContentSlot_default,
                   {
-                    ...components?.tableFooterProps,
-                    className: cn("sticky bottom-0 z-10 bg-white", components?.tableFooterProps?.className),
-                    children: /* @__PURE__ */ jsx(
-                      TableFooterRows,
-                      {
-                        table,
-                        columnResizing,
-                        virtual,
-                        components
-                      }
-                    )
+                    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 === "emptyFilteredData" && /* @__PURE__ */ 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__ */ jsx(SuiEmptyDataIcon, { size: 128 })
-            }
-          ),
-          activeStatusContentComputed === "fetchingMore" && /* @__PURE__ */ 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__ */ 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 === "noMoreData" && /* @__PURE__ */ jsx(TableRow, { "data-testid": "status-row-no-more-data", children: /* @__PURE__ */ jsx(TableCell, { colSpan: visibleColumnCount, className: "border-b-0 p-0", children: /* @__PURE__ */ 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__ */ jsx(
+                TableFooter,
+                {
+                  ...components?.tableFooterProps,
+                  className: cn("sticky bottom-0 z-10 bg-white", components?.tableFooterProps?.className),
+                  children: /* @__PURE__ */ jsx(
+                    MemoizedTableFooterRows,
+                    {
+                      table,
+                      columnResizing,
+                      virtual,
+                      columnVirtual,
+                      components,
+                      isResizing
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ) }),
         debug && /* @__PURE__ */ jsx(DataTableDevTool_default, { table })
       ]
     }
@@ -10221,7 +10498,7 @@ var DateTimePicker = ({
     },
     [currentHour, handleTimeApply]
   );
-  const hours = React__default.useMemo(() => Array.from({ length: 24 }, (_, index) => 23 - index), []);
+  const hours = React__default.useMemo(() => Array.from({ length: 24 }, (_, index) => index), []);
   const minuteInterval = React__default.useMemo(() => {
     const safeStep = Math.min(60, Math.max(1, minuteStep));
     return Array.from({ length: Math.ceil(60 / safeStep) }, (_, index) => index * safeStep).filter(
@@ -13352,23 +13629,12 @@ function TooltipProvider2({
   delayDuration = 0,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
-    TooltipPrimitive.Provider,
-    {
-      "data-slot": "tooltip-provider",
-      delayDuration,
-      ...props
-    }
-  );
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delayDuration, ...props });
 }
-function Tooltip2({
-  ...props
-}) {
+function Tooltip2({ ...props }) {
   return /* @__PURE__ */ jsx(TooltipProvider2, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
 }
-function TooltipTrigger2({
-  ...props
-}) {
+function TooltipTrigger2({ ...props }) {
   return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
 function TooltipArrow(props) {
@@ -13974,6 +14240,144 @@ var Image2 = React.forwardRef(function Image3({
   );
 });
 Image2.displayName = "Image";
+function LanguageSelector({
+  tenant,
+  selectedLocale,
+  onSelectLocale,
+  errorLocales = [],
+  enableErrorHighlight = false,
+  sortLocales = true,
+  priorityLocale = "en",
+  className,
+  visibleLocalesCount = 3,
+  localeButtonWidth = 35,
+  localeGap = 4
+}) {
+  const orderedTenant = React__default.useMemo(() => {
+    const normalizedPriority = priorityLocale.trim().toLowerCase();
+    const localeAwareSorted = sortLocales ? [...tenant].sort(
+      (a, b) => a.locale.localeCompare(b.locale, void 0, { sensitivity: "base", numeric: true })
+    ) : [...tenant];
+    if (!normalizedPriority) {
+      return localeAwareSorted;
+    }
+    return localeAwareSorted.sort((a, b) => {
+      const aIsPriority = a.locale.toLowerCase() === normalizedPriority;
+      const bIsPriority = b.locale.toLowerCase() === normalizedPriority;
+      if (aIsPriority && !bIsPriority) return -1;
+      if (!aIsPriority && bIsPriority) return 1;
+      return 0;
+    });
+  }, [priorityLocale, sortLocales, tenant]);
+  const selectedIndex = orderedTenant.findIndex((t) => t.locale === selectedLocale);
+  const currentIndex = selectedIndex >= 0 ? selectedIndex : 0;
+  const isFirst = currentIndex <= 0;
+  const isLast = currentIndex >= orderedTenant.length - 1;
+  const safeVisibleCount = Math.min(orderedTenant.length, Math.max(1, visibleLocalesCount));
+  const halfWindow = Math.floor((safeVisibleCount - 1) / 2);
+  const maxStart = Math.max(0, orderedTenant.length - safeVisibleCount);
+  const windowStart = Math.min(maxStart, Math.max(0, currentIndex - halfWindow));
+  const visibleLocales = orderedTenant.slice(windowStart, windowStart + safeVisibleCount);
+  const safeLocaleButtonWidth = Math.max(28, localeButtonWidth);
+  const safeLocaleGap = Math.max(0, localeGap);
+  const localeAreaWidth = safeVisibleCount * safeLocaleButtonWidth + (safeVisibleCount - 1) * safeLocaleGap;
+  const localeWindowRef = React__default.useRef(null);
+  const previousWindowStartRef = React__default.useRef(windowStart);
+  React__default.useEffect(() => {
+    const previousWindowStart = previousWindowStartRef.current;
+    if (previousWindowStart === windowStart) {
+      return;
+    }
+    previousWindowStartRef.current = windowStart;
+    const localeWindow = localeWindowRef.current;
+    if (!localeWindow) {
+      return;
+    }
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      return;
+    }
+    const movingRight = windowStart > previousWindowStart;
+    const offsetX = movingRight ? 10 : -10;
+    localeWindow.animate(
+      [
+        { opacity: 0.86, transform: `translate3d(${offsetX}px, 0, 0) scale(0.992)` },
+        { opacity: 1, transform: "translate3d(0, 0, 0) scale(1)" }
+      ],
+      {
+        duration: 460,
+        easing: "cubic-bezier(0.22, 1, 0.36, 1)"
+      }
+    );
+  }, [windowStart]);
+  if (orderedTenant.length <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1 min-w-0", className), children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        disabled: isFirst,
+        "aria-label": "Select previous locale",
+        onClick: () => !isFirst && onSelectLocale(orderedTenant[currentIndex - 1]),
+        className: cn(
+          "inline-flex h-8 w-8 items-center justify-center rounded-md transform-gpu motion-safe:transition-[transform,background-color,color,box-shadow] motion-safe:duration-400 motion-safe:ease-[cubic-bezier(0.22,1,0.36,1)] active:scale-[0.985]",
+          isFirst ? "text-muted-foreground/30 cursor-not-allowed" : "text-muted-foreground hover:text-foreground hover:bg-muted hover:shadow-sm"
+        ),
+        children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "min-w-0 overflow-hidden", style: { width: localeAreaWidth, maxWidth: "100%" }, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: localeWindowRef,
+        className: "grid gap-1",
+        style: {
+          gridTemplateColumns: `repeat(${safeVisibleCount}, minmax(0, 1fr))`,
+          columnGap: safeLocaleGap
+        },
+        children: visibleLocales.map((lang) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-locale": lang.locale,
+            "aria-label": lang.locale.toUpperCase(),
+            onClick: () => onSelectLocale(lang),
+            className: cn(
+              "h-8 min-w-0 px-2 text-xs font-medium rounded-md transform-gpu motion-safe:transition-[transform,background-color,color,box-shadow] motion-safe:duration-400 motion-safe:ease-[cubic-bezier(0.22,1,0.36,1)] active:scale-[0.985] select-none",
+              selectedLocale === lang.locale ? "bg-primary text-primary-foreground shadow-sm" : "bg-muted text-muted-foreground hover:bg-muted/80 hover:shadow-sm",
+              enableErrorHighlight && errorLocales.includes(lang.locale) && "ring-1 ring-inset ring-red-500"
+            ),
+            children: /* @__PURE__ */ jsx(
+              truncated_default,
+              {
+                as: "span",
+                className: "block w-full text-center",
+                tooltipContentProps: { side: "bottom", sideOffset: 6 },
+                children: lang.locale.toUpperCase()
+              }
+            )
+          },
+          lang.locale
+        ))
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        disabled: isLast,
+        "aria-label": "Select next locale",
+        onClick: () => !isLast && onSelectLocale(orderedTenant[currentIndex + 1]),
+        className: cn(
+          "inline-flex h-8 w-8 items-center justify-center rounded-md transform-gpu motion-safe:transition-[transform,background-color,color,box-shadow] motion-safe:duration-400 motion-safe:ease-[cubic-bezier(0.22,1,0.36,1)] active:scale-[0.985]",
+          isLast ? "text-muted-foreground/30 cursor-not-allowed" : "text-muted-foreground hover:text-foreground hover:bg-muted hover:shadow-sm"
+        ),
+        children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+      }
+    )
+  ] });
+}
 var AnimatedDots = () => {
   const dotAnimation = `
     @keyframes dot1 {
@@ -18719,6 +19123,6 @@ function InputMentionInner({
 }
 var InputMention = forwardRef(InputMentionInner);
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, dropdownMenu_default as ActionDropdown, ActionMenu, AdministrationIcon, AdvanceSearch_default as AdvanceSearch, AnalyticsIcon, ApplicationLogIcon, ArrowIcon, AuditFooter, BookmarkIcon, BriefcaseBusinessIcon, BuildingIcon, Button, SuiCalendarIcon2 as Calendar2Icon, CalendarDaysIcon, CardIcon, Carousel, CarouselContent, CarouselDots, CarouselItem, CarouselNext, CarouselPrevious, CarouselThumbnails, Checkbox, CircleUserIcon, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Combobox_default as Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CopyUserRightsIcon, CropperModal, CropperModalError, CustomActionStatusIcon, CustomFieldIcon, DIALOG_ALERT_I18N_SUBNAMESPACE, DIALOG_ALERT_TEMPLATES, DashboardIcon, DataEntryIcon, DataTable_default as DataTable, DatePicker2 as DatePicker, DateTimePicker, DecreaseIcon, Dialog2 as Dialog, DialogAlert, DialogAlertProvider, DialogClose, DialogCloseButton, DialogContent2 as DialogContent, DialogDescription2 as DialogDescription, DialogFooter, DialogHeader2 as DialogHeader, DialogTitle2 as DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EllipsisBoxIcon, ErrorCompression, ErrorCreateCanvas, ErrorGeneratingBlob, ErrorInvalidSVG, ErrorSVGExceedSize, FactoryIcon, FileCogIcon, FileSpreadsheet, FileTextIcon, FiltersIcon, FolderIcon, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FormulaEditor, GridSettingsModal_default as GridSettingsModal, HamburgerMenuIcon, HandymanIcon, header_default as Header, HeaderCell_default as HeaderCell, HelpIcon, HomeIcon, HomePlusIcon, Image2 as Image, ImagePlaceholderIcon, InformationIcon, Input, InputMention, InputNumber_default as InputNumber, Label2 as Label, LoadingPage, LookupSelect, MailIcon, MainListContainer_default as MainListContainer, ManIcon, ManagementIcon, MenuIcon, MessageIcon, MessageIconInverse, MessageSquareIcon, MonthPicker2 as MonthPicker, navbar_default as Navbar, NotFoundIcon, OutlineArrowIcon, PlusIcon, PlusSearchIcon, Popover, PopoverAnchor, PopoverArrow, PopoverContent, PopoverTrigger, PowerIcon, PreventPageLeave_default as PreventPageLeave, ProgressBar_default as ProgressBar, QuestionIcon, RadioGroupItem, RadioGroupRoot, RadioLabel, RichText, RightPanelContainer_default as RightPanelContainer, RoleIcon, SearchIcon, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, SetupIcon, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLayout, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Spinner, SuiCalendarIcon, SuiCalendarIcon2, SuiCheckIcon, SuiDotsVerticalIcon, SuiEmptyDataIcon, SuiExpandIcon, SuiFilterIcon, SuiSettingIcon, SuiTriangleDownIcon, SuiWarningIcon, Switch, TabSelect, Table, TableBody, TableCaption, TableCell, TableContainer, TableFooter, TableHead, TableHeader, TableOfContents, TableRow, TagListViewIcon, TextArea, ToolBoxIcon, Tooltip2 as Tooltip, TooltipArrow, TooltipContent2 as TooltipContent, TooltipProvider2 as TooltipProvider, TooltipTrigger2 as TooltipTrigger, TransferUserRightsIcon, TrashIcon, truncated_default as Truncated, truncatedMouseEnterDiv_default as TruncatedMouseEnterDiv, ui_exports as UI, UserActiveIcon, UserAloneIcon, UserFriendIcon, UserGroupIcon, UserIcon, UserInactiveIcon, UserNameIcon, UserProtectIcon, UsersIcon, VirtualizedCommand_default as VirtualizedCommand, WorkFlowIcon, booleanToSelectValue, buildPrefixMap, buttonVariants, cn, compareAlphanumeric, debounce, defaultOperatorShortcuts, defaultOperators, formatISODate, getDialogAlertControls, inputVariants, isDefined, isEmptyObject, isValidParentheses, mapTokensToOutput, parseFormula, parseFormulaToToken, resetVisibleTableState, selectValueToBoolean, spinnerVariants, splitOperators, stripNullishObject, throttle, tokenizeFormulaString, useBindRef_default as useBindRef, useCarousel, useControllableState_default as useControllableState, useDraftGuardStore, useFormField, useGridSettingsStore_default as useGridSettingsStore, useHover_default as useHover, useIntersectionObserver_default as useIntersectionObserver, useIsomorphicLayoutEffect, useMediaQuery_default as useMediaQuery, usePreventPageLeave_default as usePreventPageLeave, usePreventPageLeaveStore_default as usePreventPageLeaveStore, useSafeBlocker, useScreenSize_default as useScreenSize, useSidebar, useTruncated_default as useTruncated, validateTokenPrefixes };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, dropdownMenu_default as ActionDropdown, ActionMenu, AdministrationIcon, AdvanceSearch_default as AdvanceSearch, AnalyticsIcon, ApplicationLogIcon, ArrowIcon, AuditFooter, BookmarkIcon, BriefcaseBusinessIcon, BuildingIcon, Button, SuiCalendarIcon2 as Calendar2Icon, CalendarDaysIcon, CardIcon, Carousel, CarouselContent, CarouselDots, CarouselItem, CarouselNext, CarouselPrevious, CarouselThumbnails, Checkbox, CircleUserIcon, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Combobox_default as Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CopyUserRightsIcon, CropperModal, CropperModalError, CustomActionStatusIcon, CustomFieldIcon, DIALOG_ALERT_I18N_SUBNAMESPACE, DIALOG_ALERT_TEMPLATES, DashboardIcon, DataEntryIcon, DataTable_default as DataTable, DatePicker2 as DatePicker, DateTimePicker, DecreaseIcon, Dialog2 as Dialog, DialogAlert, DialogAlertProvider, DialogClose, DialogCloseButton, DialogContent2 as DialogContent, DialogDescription2 as DialogDescription, DialogFooter, DialogHeader2 as DialogHeader, DialogTitle2 as DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EllipsisBoxIcon, ErrorCompression, ErrorCreateCanvas, ErrorGeneratingBlob, ErrorInvalidSVG, ErrorSVGExceedSize, FactoryIcon, FileCogIcon, FileSpreadsheet, FileTextIcon, FiltersIcon, FolderIcon, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FormulaEditor, GridSettingsModal_default as GridSettingsModal, HamburgerMenuIcon, HandymanIcon, header_default as Header, HeaderCell_default as HeaderCell, HelpIcon, HomeIcon, HomePlusIcon, Image2 as Image, ImagePlaceholderIcon, InformationIcon, Input, InputMention, InputNumber_default as InputNumber, Label2 as Label, LanguageSelector, LoadingPage, LookupSelect, MailIcon, MainListContainer_default as MainListContainer, ManIcon, ManagementIcon, MenuIcon, MessageIcon, MessageIconInverse, MessageSquareIcon, MonthPicker2 as MonthPicker, navbar_default as Navbar, NotFoundIcon, OutlineArrowIcon, PlusIcon, PlusSearchIcon, Popover, PopoverAnchor, PopoverArrow, PopoverContent, PopoverTrigger, PowerIcon, PreventPageLeave_default as PreventPageLeave, ProgressBar_default as ProgressBar, QuestionIcon, RadioGroupItem, RadioGroupRoot, RadioLabel, RichText, RightPanelContainer_default as RightPanelContainer, RoleIcon, SearchIcon, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, SetupIcon, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLayout, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Spinner, SuiCalendarIcon, SuiCalendarIcon2, SuiCheckIcon, SuiDotsVerticalIcon, SuiEmptyDataIcon, SuiExpandIcon, SuiFilterIcon, SuiSettingIcon, SuiTriangleDownIcon, SuiWarningIcon, Switch, TabSelect, Table, TableBody, TableCaption, TableCell, TableContainer, TableFooter, TableHead, TableHeader, TableOfContents, TableRow, TagListViewIcon, TextArea, ToolBoxIcon, Tooltip2 as Tooltip, TooltipArrow, TooltipContent2 as TooltipContent, TooltipProvider2 as TooltipProvider, TooltipTrigger2 as TooltipTrigger, TransferUserRightsIcon, TrashIcon, truncated_default as Truncated, truncatedMouseEnterDiv_default as TruncatedMouseEnterDiv, ui_exports as UI, UserActiveIcon, UserAloneIcon, UserFriendIcon, UserGroupIcon, UserIcon, UserInactiveIcon, UserNameIcon, UserProtectIcon, UsersIcon, VirtualizedCommand_default as VirtualizedCommand, WorkFlowIcon, booleanToSelectValue, buildPrefixMap, buttonVariants, cn, compareAlphanumeric, debounce, defaultOperatorShortcuts, defaultOperators, formatISODate, getDialogAlertControls, inputVariants, isDefined, isEmptyObject, isValidParentheses, mapTokensToOutput, parseFormula, parseFormulaToToken, resetVisibleTableState, selectValueToBoolean, spinnerVariants, splitOperators, stripNullishObject, throttle, tokenizeFormulaString, useBindRef_default as useBindRef, useCarousel, useControllableState_default as useControllableState, useDraftGuardStore, useFormField, useGridSettingsStore_default as useGridSettingsStore, useHover_default as useHover, useIntersectionObserver_default as useIntersectionObserver, useIsomorphicLayoutEffect, useMediaQuery_default as useMediaQuery, usePreventPageLeave_default as usePreventPageLeave, usePreventPageLeaveStore_default as usePreventPageLeaveStore, useSafeBlocker, useScreenSize_default as useScreenSize, useSidebar, useTruncated_default as useTruncated, validateTokenPrefixes };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map