@exxatdesignux/ui 0.5.4 → 0.5.6

package/dist/components/data-table/pagination.js

@@ -1443,15 +1443,6 @@ function useTableState(data, columns, defaultSort, paginationOverride, syncedSea
     });
     return [...groups.entries()].sort(([a], [b]) => a.localeCompare(b)).map(([key, groupRows]) => ({ groupKey: key, groupLabel: key, rows: groupRows }));
   }, [rows, groupBy]);
-  const LOCKED_KEYS = React9.useMemo(() => new Set(Object.keys(lockedPins)), [lockedPins]);
-  const effectivePins = React9.useMemo(() => {
-    if (isReflowViewport || !isOverflowing) return {};
-    const result = {};
-    for (const [key, pin] of Object.entries(colPins)) {
-      result[key] = pin;
-    }
-    return result;
-  }, [colPins, isOverflowing, isReflowViewport]);
   const displayCols = React9.useMemo(() => {
     const leftPinned = [];
     const free = [];
@@ -1471,6 +1462,19 @@ function useTableState(data, columns, defaultSort, paginationOverride, syncedSea
     }
     return out;
   }, [colOrder, colPins, hiddenCols, columnsByKey]);
+  const totalWidth = React9.useMemo(
+    () => displayCols.reduce((s, c) => s + (colWidths[c.key] ?? c.width ?? 100), 0),
+    [displayCols, colWidths]
+  );
+  const LOCKED_KEYS = React9.useMemo(() => new Set(Object.keys(lockedPins)), [lockedPins]);
+  const effectivePins = React9.useMemo(() => {
+    if (isReflowViewport || !isOverflowing) return {};
+    const result = {};
+    for (const [key, pin] of Object.entries(colPins)) {
+      result[key] = pin;
+    }
+    return result;
+  }, [colPins, isOverflowing, isReflowViewport]);
   function startResize(key, e) {
     e.preventDefault();
     e.stopPropagation();
@@ -1531,18 +1535,21 @@ function useTableState(data, columns, defaultSort, paginationOverride, syncedSea
   function toggleWrap(key) {
     setColWrap((p) => ({ ...p, [key]: !p[key] }));
   }
-  function checkOverflow() {
+  const checkOverflow = React9.useCallback(() => {
     const el = scrollRef.current;
     if (!el) return;
-    setIsOverflowing(el.scrollWidth > el.clientWidth + 1);
-  }
+    setIsOverflowing(totalWidth > el.clientWidth + 1);
+  }, [totalWidth]);
   function handleScroll() {
     const el = scrollRef.current;
     if (!el) return;
     setScrolled(el.scrollLeft > 1);
     setScrollEnd(el.scrollLeft >= el.scrollWidth - el.clientWidth - 1);
-    setIsOverflowing(el.scrollWidth > el.clientWidth + 1);
+    setIsOverflowing(totalWidth > el.clientWidth + 1);
   }
+  React9.useLayoutEffect(() => {
+    checkOverflow();
+  }, [checkOverflow]);
   function getRowId(row, index, getIdFn) {
     return getIdFn ? getIdFn(row, index) : row.id ?? index;
   }
@@ -1595,10 +1602,6 @@ function useTableState(data, columns, defaultSort, paginationOverride, syncedSea
     },
     [effectivePins, isReflowViewport, stickyOffsets]
   );
-  const totalWidth = React9.useMemo(
-    () => displayCols.reduce((s, c) => s + (colWidths[c.key] ?? c.width ?? 100), 0),
-    [displayCols, colWidths]
-  );
   return {
     // Sort
     sortRules,
@@ -2338,7 +2341,7 @@ function DataTableInner({
     setSheetOpen,
     setSheetInitialPanel
   } = state;
-  React9.useEffect(() => {
+  React9.useLayoutEffect(() => {
     const syncScrollport = () => {
       const el2 = scrollRef.current;
       if (el2) {
@@ -2351,8 +2354,10 @@ function DataTableInner({
     if (!el) return;
     const ro = new ResizeObserver(syncScrollport);
     ro.observe(el);
+    const table = el.querySelector("table");
+    if (table) ro.observe(table);
     return () => ro.disconnect();
-  }, []);
+  }, [totalWidth, displayCols.length, checkOverflow]);
   const columnMenuPendingActionRef = React9.useRef(null);
   const pinnedScrollHintDoneRef = React9.useRef(false);
   React9.useEffect(() => {
@@ -2589,11 +2594,12 @@ function DataTableInner({
         children: /* @__PURE__ */ jsxs(
           "table",
           {
-            className: "w-full text-sm border-separate border-spacing-0",
+            className: "text-sm border-separate border-spacing-0",
             style: {
               tableLayout: "fixed",
-              minWidth: totalWidth,
-              width: headerIsStuck ? floatingHeaderTableWidth : void 0
+              // Explicit column-sum width — `w-full` made the grid stretch to the scrollport
+              // so scrollWidth === clientWidth and the overflow-gated pin rule never fired.
+              width: totalWidth
             },
             children: [
               /* @__PURE__ */ jsx("colgroup", { children: displayCols.map((col) => /* @__PURE__ */ jsx("col", { style: { width: colWidths[col.key] ?? col.width ?? 100 } }, col.key)) }),