@pagamio/frontend-commons-lib 0.8.311 → 0.8.312

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 { useMemo, useState } from 'react';
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { FilterComponent, IconButton } from '../../components';
 import { useMediaQueries } from '../../shared';
 import { getDefaultTableOptions } from './Defaults';
@@ -62,6 +62,32 @@ function CustomToolbar({ filters, appliedFilters, onFilterChange, onApply, onCle
 // ─── PagamioTable Component ──────────────────────────────────────────
 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));
+        };
+    }, []);
     // Process columns (handle showHeader: false)
     const processedColumns = useMemo(() => processColumns(columns), [columns]);
     // Convert our SortConfig to MRT's SortingState
@@ -168,6 +194,12 @@ const PagamioTable = ({ columns, data, isLoading = false, rowCount, sorting, pag
         // Layout
         ...(layoutMode && { layoutMode }),
         ...(defaultColumn && { defaultColumn }),
+        mantineTableContainerProps: {
+            style: {
+                border: 'transparent',
+                borderRadius: '4px',
+            },
+        },
         // Row interaction styling
         mantineTableBodyRowProps: ({ row }) => ({
             onClick: onRowClick ? (event) => handleRowClick(row, event) : undefined,
@@ -179,6 +211,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", { 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-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.311",
+  "version": "0.8.312",
   "publishConfig": {
     "access": "public",
     "provenance": false