@pagamio/frontend-commons-lib 0.8.317 → 0.8.319

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

@@ -34,7 +34,10 @@ export function getDefaultTableOptions() {
             style: {
                 border: 'transparent',
                 borderRadius: '4px',
-                overflowX: 'hidden',
+                // Allow horizontal scrolling when the table genuinely doesn't fit
+                // (e.g. side drawer open, narrow viewport). The width: 100% on the
+                // table itself keeps it from scrolling unnecessarily.
+                overflowX: 'auto',
             },
         },
         mantineTableProps: {

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MantineReactTable, useMantineReactTable } from 'mantine-react-table';
 import { HiPlusSm } from 'react-icons/hi';
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import { FilterComponent, IconButton } from '../../components';
 import { cn } from '../../helpers';
 import { useMediaQueries } from '../../shared';
@@ -104,31 +104,18 @@ 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);
-    const applyTableHeight = (el) => {
-        const mrtContainer = el.querySelector('.mrt-table-container');
-        if (!mrtContainer)
-            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');
-    };
-    // Runs after every render (no deps), always after MRT's own layout effect.
-    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));
-        return () => {
-            resizeObserver.disconnect();
-            window.removeEventListener('resize', () => applyTableHeight(el));
-        };
-    }, []);
+    // Note: previously this component force-applied
+    //   max-height: calc(100vh - {tableTop + 68}px)
+    // to the inner mantine table container. That produced a "squeezed" table
+    // whenever the table sat below other content (e.g. nested in tabs on the
+    // event details page) — the table's own top was already far down the
+    // viewport, so the leftover max-height was tiny and only ~3 rows showed
+    // before an internal scroll kicked in.
+    //
+    // We now let the table render its natural height. Pagination caps the row
+    // count, and the parent route layout already scrolls when the page is
+    // taller than the viewport, so the user gets one continuous scroll instead
+    // of a nested mini-scroll.
     // Process columns (handle showHeader: false)
     const processedColumns = useMemo(() => processColumns(columns), [columns]);
     // Convert our SortConfig to MRT's SortingState
@@ -239,7 +226,10 @@ const PagamioTable = ({ columns, data, isLoading = false, rowCount, sorting, pag
             style: {
                 border: 'transparent',
                 borderRadius: '4px',
-                overflowX: 'hidden',
+                // Scroll horizontally when content can't fit (e.g. a side drawer
+                // is open). With table width: 100% this is a no-op for normal
+                // page widths.
+                overflowX: 'auto',
             },
         },
         mantineTableProps: defaults.mantineTableProps,
@@ -271,6 +261,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/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.317",
+  "version": "0.8.319",
   "publishConfig": {
     "access": "public",
     "provenance": false