@pagamio/frontend-commons-lib 0.8.327 → 0.8.329

package/lib/pagamio-table/data-table/index.d.ts

@@ -1,3 +1,3 @@
 import type { PagamioTableProps } from './types';
-declare const PagamioTable: <T extends Record<string, any>>({ columns, data, isLoading, rowCount, sorting, pagination, filtering, search, onRowClick, rowClassName, expandable, renderDetailPanel, toolbar, toolbarMode, 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, }: PagamioTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const PagamioTable: <T extends Record<string, any>>({ columns, data, isLoading, isFetching, rowCount, sorting, pagination, filtering, search, onRowClick, rowClassName, expandable, renderDetailPanel, toolbar, toolbarMode, 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, }: PagamioTableProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default PagamioTable;

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

@@ -101,7 +101,7 @@ function CustomToolbar({ filters, appliedFilters, onFilterChange, onApply, onCle
                     (typeof addButton === 'boolean' ? (_jsx(IconButton, { onClick: onAdd ?? (() => { }), icon: HiPlusSm, label: "add-new-entry", className: cn('items-center text-nowrap', isNarrow ? 'w-full' : undefined), children: addText ?? 'Add New Entry' })) : (addButton))] }) }));
 }
 // ─── 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 PagamioTable = ({ columns, data, isLoading = false, isFetching = 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 ─────────────────────────────────────────────
@@ -233,6 +233,11 @@ const PagamioTable = ({ columns, data, isLoading = false, rowCount, sorting, pag
         // State
         state: {
             isLoading,
+            // Translucent overlay + centered spinner over the rows during background
+            // refetch (pagination/sort/filter with `keepPreviousData`). Rows stay
+            // visible underneath so the table doesn't blank, but the overlay makes
+            // the loading state unambiguous on slower connections.
+            showLoadingOverlay: isFetching,
             pagination: paginationState,
             sorting: sortingState,
             expanded,

package/lib/pagamio-table/data-table/types.d.ts

@@ -103,6 +103,13 @@ export interface PagamioTableProps<T extends Record<string, any>> {
     columns: CoreTableColumnDef<T>[];
     data: T[];
     isLoading?: boolean;
+    /**
+     * Background-refetch indicator (e.g. paginating with `keepPreviousData`).
+     * When true, MRT shows a top progress bar without replacing rows with
+     * skeletons. `isLoading` should remain reserved for the first-load case
+     * where there are no rows yet.
+     */
+    isFetching?: boolean;
     rowCount?: number;
     sorting?: {
         sortConfig: SortConfig;
@@ -170,6 +177,12 @@ export interface UsePagamioTableConfig<T extends BaseEntity> {
     enabled?: boolean;
     staleTime?: number;
     gcTime?: number;
+    /**
+     * Keep the previous page's rows visible while the next page fetches
+     * (TanStack `placeholderData: keepPreviousData`). Defaults to true so
+     * pagination/sort/filter no longer flash an empty table.
+     */
+    keepPreviousData?: boolean;
     data?: T[];
     columns: CoreTableColumnDef<T>[];
     defaultFilters?: Record<string, string>;
@@ -202,6 +215,7 @@ export interface UsePagamioTableReturn<T extends BaseEntity> {
     data: T[];
     totalItems: number;
     isLoading: boolean;
+    isFetching: boolean;
     error: string | null;
     currentPage: number;
     pageSize: number;

package/lib/shared/hooks/usePagamioTable.d.ts

@@ -17,4 +17,4 @@ export declare const pagamioMapping: ResponseMapping;
  * The hook tracks `page` zero-indexed internally; we bump on the way out.
  */
 export declare const pagamioQueryConfig: QueryParamConfig;
-export declare const usePagamioTable: <T extends BaseEntity>({ queryKey, queryFn, enabled: queryEnabled, staleTime, gcTime, data: clientData, columns, defaultFilters, responseMapping, queryParamConfig, pagination: paginationConfig, filtering: filteringConfig, sorting: sortingConfig, toolbar, searchPlaceholder, onRowClick, rowClassName, expandable, renderDetailPanel, }: UsePagamioTableConfig<T>) => UsePagamioTableReturn<T>;
+export declare const usePagamioTable: <T extends BaseEntity>({ queryKey, queryFn, enabled: queryEnabled, staleTime, gcTime, keepPreviousData: keepPrev, data: clientData, columns, defaultFilters, responseMapping, queryParamConfig, pagination: paginationConfig, filtering: filteringConfig, sorting: sortingConfig, toolbar, searchPlaceholder, onRowClick, rowClassName, expandable, renderDetailPanel, }: UsePagamioTableConfig<T>) => UsePagamioTableReturn<T>;

package/lib/shared/hooks/usePagamioTable.js

@@ -10,7 +10,7 @@
  * Returns `tableProps` (spread-ready for <PagamioTable {...tableProps} />)
  * plus direct state/action access for custom logic.
  */
-import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { keepPreviousData, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useCallback, useMemo, useState } from 'react';
 import { getNestedValue } from '../utils';
 // ─── Default Mappings ────────────────────────────────────────────────
@@ -154,7 +154,7 @@ function clientSort(items, sortConfig) {
     return sorted;
 }
 // ─── Hook ────────────────────────────────────────────────────────────
-export const usePagamioTable = ({ queryKey, queryFn, enabled: queryEnabled = true, staleTime, gcTime, data: clientData, columns, defaultFilters = {}, responseMapping = springBootMapping, queryParamConfig = defaultQueryConfig, pagination: paginationConfig = { enabled: true, mode: 'client' }, filtering: filteringConfig = { enabled: true, mode: 'client', searchMode: 'server' }, sorting: sortingConfig = { enabled: true, mode: 'client' }, toolbar, searchPlaceholder, onRowClick, rowClassName, expandable, renderDetailPanel, }) => {
+export const usePagamioTable = ({ queryKey, queryFn, enabled: queryEnabled = true, staleTime, gcTime, keepPreviousData: keepPrev = true, data: clientData, columns, defaultFilters = {}, responseMapping = springBootMapping, queryParamConfig = defaultQueryConfig, pagination: paginationConfig = { enabled: true, mode: 'client' }, filtering: filteringConfig = { enabled: true, mode: 'client', searchMode: 'server' }, sorting: sortingConfig = { enabled: true, mode: 'client' }, toolbar, searchPlaceholder, onRowClick, rowClassName, expandable, renderDetailPanel, }) => {
     // ── Local state ──────────────────────────────────────────────────
     const [currentPage, setCurrentPage] = useState(paginationConfig.pageIndex ?? 0);
     const [pageSize, setPageSize] = useState(paginationConfig.pageSize ?? 10);
@@ -179,12 +179,13 @@ export const usePagamioTable = ({ queryKey, queryFn, enabled: queryEnabled = tru
     ]);
     // ── TanStack Query — replaces manual fetch + AbortController ─────
     const fullQueryKey = useMemo(() => (queryKey ? [...queryKey, queryParams] : ['pagamio-table-noop']), [queryKey, queryParams]);
-    const { data: rawResponse, isLoading: queryLoading, error: queryError, } = useQuery({
+    const { data: rawResponse, isLoading: queryLoading, isFetching: queryFetching, error: queryError, } = useQuery({
         queryKey: fullQueryKey,
         queryFn: () => queryFn(queryParams),
         enabled: isServerMode && queryEnabled,
         staleTime,
         gcTime,
+        placeholderData: keepPrev ? keepPreviousData : undefined,
     });
     // ── Process server response ──────────────────────────────────────
     const { serverData, serverTotal } = useMemo(() => {
@@ -217,6 +218,7 @@ export const usePagamioTable = ({ queryKey, queryFn, enabled: queryEnabled = tru
         return processedData;
     }, [processedData, currentPage, pageSize, paginationConfig.mode, paginationConfig.enabled]);
     const isLoading = isServerMode ? queryLoading : false;
+    const isFetching = isServerMode ? queryFetching : false;
     const error = queryError ? queryError.message : null;
     // ── Actions ──────────────────────────────────────────────────────
     const handleFilterChange = useCallback((key, value) => {
@@ -255,6 +257,7 @@ export const usePagamioTable = ({ queryKey, queryFn, enabled: queryEnabled = tru
         columns,
         data: paginatedData,
         isLoading,
+        isFetching,
         rowCount: totalItems,
         ...(paginationConfig.enabled && {
             pagination: {
@@ -298,6 +301,7 @@ export const usePagamioTable = ({ queryKey, queryFn, enabled: queryEnabled = tru
         columns,
         paginatedData,
         isLoading,
+        isFetching,
         totalItems,
         paginationConfig.enabled,
         currentPage,
@@ -326,6 +330,7 @@ export const usePagamioTable = ({ queryKey, queryFn, enabled: queryEnabled = tru
         data: paginatedData,
         totalItems,
         isLoading,
+        isFetching,
         error,
         currentPage,
         pageSize,
@@ -347,6 +352,7 @@ export const usePagamioTable = ({ queryKey, queryFn, enabled: queryEnabled = tru
         paginatedData,
         totalItems,
         isLoading,
+        isFetching,
         error,
         currentPage,
         pageSize,

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.327",
+  "version": "0.8.329",
   "publishConfig": {
     "access": "public",
     "provenance": false