@pagamio/frontend-commons-lib 0.8.318 → 0.8.320

package/lib/pagamio-table/data-table/index.js

@@ -104,29 +104,79 @@ function CustomToolbar({ filters, appliedFilters, onFilterChange, onApply, onCle
 const PagamioTable = ({ columns, data, isLoading = false, rowCount, sorting, pagination, filtering, search, onRowClick, rowClassName, expandable = false, renderDetailPanel, toolbar, toolbarMode = 'custom', enableColumnResizing, enableColumnPinning, enableColumnOrdering, enableColumnFilters, enableHiding, enableRowSelection, enableRowActions, enableRowVirtualization, enableGrouping, enableEditing, enableDensityToggle, enableFullScreenToggle, enableClickToCopy, enableRowNumbers, enableMultiSort, enableStickyHeader, enableStickyFooter, editDisplayMode, onEditingRowSave, onEditingRowCancel, renderRowActions, renderRowActionMenuItems, positionActionsColumn, renderTopToolbarCustomActions, renderBottomToolbarCustomActions, layoutMode, defaultColumn, mantineTableOptions, }) => {
     const [expanded, setExpanded] = useState({});
     const tableRef = useRef(null);
+    // ── Internal max-height ─────────────────────────────────────────────
+    // The mantine table container is height-capped to `viewportHeight - tableTop`
+    // so that the table is the only scrolling element when its parent layout
+    // is fixed (page header + sidebar stay put). Without this, large datasets
+    // would push the page itself into a scroll, breaking the toolbar/header
+    // sticky behaviour that the rest of the app relies on.
+    //
+    // Bottom margin reserves space for the bottom toolbar (pagination, ~52px)
+    // plus a small gap so the table doesn't sit flush against page edges.
+    const TABLE_BOTTOM_MARGIN = 68;
+    /**
+     * Walk up the DOM looking for the closest scrollable ancestor (i.e. an
+     * element with overflow-y: auto/scroll AND scrollHeight > clientHeight).
+     * If we find one, the *page* is what's scrolling — we should NOT cap the
+     * table's height because that would create a confusing nested scroll
+     * (page scroll + table scroll). Returns true when the table itself
+     * should manage its own scroll.
+     */
+    const tableShouldOwnScroll = (el) => {
+        let node = el.parentElement;
+        while (node && node !== document.body) {
+            const style = window.getComputedStyle(node);
+            const overflowY = style.overflowY;
+            const isScrollable = (overflowY === 'auto' || overflowY === 'scroll') && node.scrollHeight > node.clientHeight + 1;
+            if (isScrollable)
+                return false;
+            node = node.parentElement;
+        }
+        return true;
+    };
     const applyTableHeight = (el) => {
         const mrtContainer = el.querySelector('.mrt-table-container');
         if (!mrtContainer)
             return;
+        // If a parent is already handling the scroll, let the table render at
+        // its natural height — the user gets one continuous page scroll.
+        if (!tableShouldOwnScroll(el)) {
+            mrtContainer.style.removeProperty('max-height');
+            return;
+        }
         const containerTop = mrtContainer.getBoundingClientRect().top;
-        const offset = Math.round(containerTop + 68); // 52 MRT pagination + 16 gap
-        mrtContainer.style.setProperty('max-height', `calc(100vh - ${offset}px)`, 'important');
+        const newMax = Math.round(Math.max(240, window.innerHeight - containerTop - TABLE_BOTTOM_MARGIN));
+        const newMaxStr = `${newMax}px`;
+        // Skip the write if the value hasn't changed — avoids re-layout loops
+        // with ResizeObserver where mutating the cell's max-height would refire
+        // the observer on the next frame.
+        if (mrtContainer.style.maxHeight === newMaxStr)
+            return;
+        mrtContainer.style.setProperty('max-height', newMaxStr, 'important');
     };
-    // Runs after every render (no deps), always after MRT's own layout effect.
+    // Runs once on mount + whenever the *window* resizes. We deliberately do
+    // NOT run on every render or use a ResizeObserver on the document — both
+    // produce loop conditions: applyTableHeight mutates layout, which fires
+    // the observer, which calls applyTableHeight again. The window-resize
+    // signal is sufficient because tableTop changes during a render get
+    // re-applied by useLayoutEffect-on-mount when the table remounts.
     useLayoutEffect(() => {
         if (tableRef.current)
             applyTableHeight(tableRef.current);
-    });
+    }, []);
     useEffect(() => {
         const el = tableRef.current;
         if (!el)
             return;
-        const resizeObserver = new ResizeObserver(() => applyTableHeight(el));
-        resizeObserver.observe(document.documentElement);
-        window.addEventListener('resize', () => applyTableHeight(el));
+        let frame = 0;
+        const handler = () => {
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(() => applyTableHeight(el));
+        };
+        window.addEventListener('resize', handler);
         return () => {
-            resizeObserver.disconnect();
-            window.removeEventListener('resize', () => applyTableHeight(el));
+            cancelAnimationFrame(frame);
+            window.removeEventListener('resize', handler);
         };
     }, []);
     // Process columns (handle showHeader: false)
@@ -274,6 +324,6 @@ const PagamioTable = ({ columns, data, isLoading = false, rowCount, sorting, pag
     });
     // ── Toolbar rendering ──────────────────────────────────────────────
     const showCustomToolbar = toolbarMode === 'custom' && (!!toolbar || !!search || !!filtering);
-    return (_jsxs("div", { children: [showCustomToolbar && (_jsx(CustomToolbar, { filters: toolbar?.filters ?? [], appliedFilters: filtering?.appliedFilters ?? {}, onFilterChange: filtering?.onFilterChange ?? (() => { }), onApply: filtering?.onApply ?? (() => { }), onClearFilters: toolbar?.onClearFilters, showClearFilters: toolbar?.showClearFilters ?? false, showApplyFilterButton: toolbar?.showApplyFilterButton ?? true, searchEnabled: !!search, searchQuery: search?.query ?? '', onSearch: search?.onChange ?? (() => { }), searchPlaceholder: search?.placeholder, exportConfig: toolbar?.export, columns: columns, data: data, addButton: toolbar?.addButton, addText: toolbar?.addText, onAdd: toolbar?.onAdd })), _jsx("div", { ref: tableRef, className: "border border-border rounded-md overflow-hidden", children: _jsx(MantineReactTable, { table: table }) })] }));
+    return (_jsxs("div", { children: [showCustomToolbar && (_jsx(CustomToolbar, { filters: toolbar?.filters ?? [], appliedFilters: filtering?.appliedFilters ?? {}, onFilterChange: filtering?.onFilterChange ?? (() => { }), onApply: filtering?.onApply ?? (() => { }), onClearFilters: toolbar?.onClearFilters, showClearFilters: toolbar?.showClearFilters ?? false, showApplyFilterButton: toolbar?.showApplyFilterButton ?? true, searchEnabled: !!search, searchQuery: search?.query ?? '', onSearch: search?.onChange ?? (() => { }), searchPlaceholder: search?.placeholder, exportConfig: toolbar?.export, columns: columns, data: data, addButton: toolbar?.addButton, addText: toolbar?.addText, onAdd: toolbar?.onAdd })), _jsx("div", { ref: tableRef, className: "border border-border rounded-md overflow-y-hidden", children: _jsx(MantineReactTable, { table: table }) })] }));
 };
 export default PagamioTable;

package/lib/styles.css

@@ -3889,14 +3889,25 @@ video {
   text-overflow: clip !important;
 }
 
-/* MRT semantic mode: the explicit `width: <n>px` on each cell prevents the
-   table from filling its container — leftover space becomes dead gap on the
-   right. Treat the inline width as a minimum hint instead by overriding it
-   to `auto`; the browser's table-layout: auto then distributes width based
-   on content + min-width while filling 100% of the table width. */
+/* MRT semantic mode column sizing.
+ *
+ * MRT inlines `width: calc(--col-X-size * 1px)` and
+ * `min-width: max(calc(--col-X-size * 1px), 50px)` on every cell. With
+ * `table-layout: auto`, those fixed values cause two problems:
+ *   1. Cells can't shrink below their min-width, leaving dead gaps when
+ *      content is short.
+ *   2. The combined widths can exceed the container, leaving a horizontal
+ *      gap on the right.
+ *
+ * We override both: cells get `width: auto` and `min-width: 0` so the
+ * browser sizes columns by content, then distributes remaining row space
+ * proportionally. `whiteSpace: normal` (set above) lets long content wrap
+ * instead of being crushed.
+ */
 .mantine-Table-table > thead > tr > .mantine-Table-th,
 .mantine-Table-table > tbody > tr > .mantine-Table-td {
   width: auto !important;
+  min-width: 0 !important;
 }
 .file\:-ms-4::file-selector-button {
   margin-inline-start: -1rem;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pagamio/frontend-commons-lib",
   "description": "Pagamio library for Frontend reusable components like the form engine and table container",
-  "version": "0.8.318",
+  "version": "0.8.320",
   "publishConfig": {
     "access": "public",
     "provenance": false