@controleonline/ui-default 1.0.280 → 1.0.282

package/src/react/components/table/DefaultColumnMenu.js

@@ -19,7 +19,7 @@ import DefaultCompactDialog from './DefaultCompactDialog';
 
 const DefaultColumnMenu = ({ storeName, visible = false, onClose }) => {
   const store = useStore(storeName);
-  const columns = Array.isArray(store?.getters?.columns) ? store.getters.columns : [];
+  const columns = Array.isArray(store?.getters?.configs?.presentationColumns) ? store.getters.configs.presentationColumns : Array.isArray(store?.getters?.columns) ? store.getters.columns : [];
   const visibleColumns = store?.getters?.visibleColumns || {};
   const configs = store?.getters?.configs || {};
   const tablePreferenceScope =

package/src/react/components/table/DefaultSearchModal.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Modal, Text, TouchableOpacity, View } from 'react-native';
+import { KeyboardAvoidingView, Modal, Platform, Text, TouchableOpacity, View } from 'react-native';
 import Icon from 'react-native-vector-icons/Feather';
 import DefaultSearch from '../filters/DefaultSearch';
 import styles from './DefaultTable.styles';
@@ -11,6 +11,11 @@ const DefaultSearchModal = ({
   storeName,
   visible = false,
   onClose,
+  onSearch,
+  filters,
+  onChangeFilters,
+  value,
+  title,
 }) => {
   const { modalColors } = useDefaultTableTheme();
   if (!visible) return null;
@@ -25,11 +30,12 @@ const DefaultSearchModal = ({
 
   return (
     <Modal visible transparent animationType="fade" onRequestClose={onClose}>
-      <View style={[styles.modalOverlay, { backgroundColor: overlayColor }]}>
+      <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : Platform.OS === 'android' ? 'height' : undefined}
+        style={[styles.modalOverlay, { backgroundColor: overlayColor }]}>
         <View style={[styles.modalCard, styles.searchModalCard, { borderColor, backgroundColor }]}>
           <View style={[styles.modalHeader, { borderBottomColor: borderColor }]}>
             <Text style={[styles.modalTitle, { color: headerTextColor }]} numberOfLines={1}>
-              {global.t?.t(storeName, 'label', 'search')}
+              {title || global.t?.t(storeName, 'label', 'search')}
             </Text>
             <TouchableOpacity
               style={[styles.modalCloseButton, { borderColor, backgroundColor }]}
@@ -45,11 +51,14 @@ const DefaultSearchModal = ({
               placeholder={searchPlaceholder}
               searchKey={searchKey}
               storeName={storeName}
-              onSearch={onClose}
+              filters={filters}
+              onChangeFilters={onChangeFilters}
+              value={value}
+              onSearch={query => {onSearch?.(query); onClose?.();}}
             />
           </View>
         </View>
-      </View>
+      </KeyboardAvoidingView>
     </Modal>
   );
 };

package/src/react/components/table/DefaultTable.js

@@ -17,18 +17,15 @@ import {
 import useDefaultTableTheme from './useDefaultTableTheme';
 import DefaultTableView from './DefaultTableView';
 import useDefaultTableCreateForm from './useDefaultTableCreateForm';
-
 import {
-  assignGetterValue,
+  assignGetterValue, publishStoreValue,
   useDefaultTableStoreSync,
 } from './useDefaultTableStoreSync';
-
 export {
   mergeSortedDataWithLiveItems,
   resolveColumnListLoadParams,
   shouldTriggerEndReachedFromScroll,
 } from './DefaultTable.utils';
-
 const DefaultTable = ({
   accentColor = null,
   actions = {},
@@ -38,6 +35,7 @@ const DefaultTable = ({
   compactBreakpoint = DEFAULT_COMPACT_BREAKPOINT,
   cardListProps = {},
   columns = [],
+  presentationColumns = null,
   data = undefined,
   defaultColor = '',
   filters = {},
@@ -78,15 +76,18 @@ const DefaultTable = ({
   showSearch = null,
   showRowActions = true,
   showToolbar = true,
+  showCompactCaption = true,
+  showAdministrativeTools = true,
   showToolbarActions = null,
   showToolbarControls = null,
   showTotalItemsInCompactToolbar = false,
   showTotalItemsInFooter = true,
   sort = null,
   storeName = '',
-  summary = undefined,
+  summary = undefined, totalItems = undefined,
   summaryLabels = {},
   toolbarActions = [],
+  viewMode = null,
   visibleColumnsPreferenceKey = '',
 }) => {
   const { width } = useWindowDimensions();
@@ -128,13 +129,13 @@ const DefaultTable = ({
   const columnsForTable = storeColumns.length > 0 ? storeColumns : columns;
   const storeFilters = isObject(store?.getters?.filters) ? store.getters.filters : {};
   const requestParamsSeed = isObject(requestParams) ? requestParams : {};
-  const resolvedTotalItems = store?.getters?.totalItems;
+  const resolvedTotalItems = totalItems ?? (!autoMode && paginationMode === 'pages' ? data.length : store?.getters?.totalItems);
+  useEffect(() => {if ((!autoMode && paginationMode === 'pages') || totalItems !== undefined) publishStoreValue(store, 'setTotalItems', resolvedTotalItems, 'totalItems');}, [autoMode, paginationMode, totalItems, resolvedTotalItems, storeName, store?.actions?.setTotalItems]);
   if (storeDeclaredConfigsRef.current === null) {
     storeDeclaredConfigsRef.current = isObject(store?.getters?.configs)
       ? store.getters.configs
       : {};
   }
-
   const storeDeclaredConfigs = storeDeclaredConfigsRef.current || {};
   const currentConfigs = {
     ...storeDeclaredConfigs,
@@ -148,11 +149,9 @@ const DefaultTable = ({
     normalizeText(addLabel) ||
     normalizeText(global.t?.t(storeName, 'button', 'add')) ||
     'Adicionar';
-
   if (storeColumns.length === 0 && Array.isArray(columns) && columns.length > 0) {
     assignGetterValue(store, 'columns', columns);
   }
-
   if (data !== undefined && Array.isArray(data)) {
     assignGetterValue(store, 'items', data);
   }
@@ -167,7 +166,7 @@ const DefaultTable = ({
   const {
     buildRequestQuery,
     currentPage,
-    pageSizeNumber,
+    pageSizeNumber, paginateData,
     goToPage,
     resolvedIsLoading,
     handleEndReached,
@@ -194,12 +193,13 @@ const DefaultTable = ({
     store,
     storeName,
   });
-  const sortedData = useDefaultTableSortedData({
+  const sortedItems = useDefaultTableSortedData({
     resolvedData,
     resolvedSort,
     storeName,
     tableColumns: columnsForTable,
   });
+  const sortedData = useMemo(() => paginateData(sortedItems), [paginateData, sortedItems]);
   const {isCreateFormOpen, closeCreateForm, resolvedOnAdd, handleDefaultCreateSaved} =
     useDefaultTableCreateForm({onAdd, onSaved, resolvedActions, handleRefresh});
   const hasAddAction =
@@ -225,11 +225,11 @@ const DefaultTable = ({
   const previousCompactRef = useRef(isCompactView);
   const enteringCompact = isCompactView && !previousCompactRef.current;
   useEffect(() => {previousCompactRef.current = isCompactView;}, [isCompactView]);
-  const effectiveViewMode =
+  const effectiveViewMode = viewMode || (
     enteringCompact && forceCardsOnCompact !== false ? 'cards' :
     currentConfigs.viewMode ||
     storedViewMode ||
-    (isCompactView && forceCardsOnCompact !== false ? 'cards' : initialViewMode);
+    (isCompactView && forceCardsOnCompact !== false ? 'cards' : initialViewMode));
   const tableFiltersVisible = Boolean(currentConfigs.tableFiltersVisible);
   const defaultTableConfigs = useMemo(
     () => ({
@@ -247,7 +247,7 @@ const DefaultTable = ({
       compactBreakpoint,
       debugFallbackParameters,
       defaultColor,
-      effectiveViewMode,
+      effectiveViewMode, viewMode,
       filters,
       footerComponent,
       forceCardsOnCompact,
@@ -274,6 +274,7 @@ const DefaultTable = ({
       requestParams: requestParamsSeed,
       requestSort,
       resolvedSort,
+      presentationColumns,
       rowActionsComponent,
       rowActionsWidth,
       rowStyle,
@@ -282,8 +283,10 @@ const DefaultTable = ({
       selectable: storeSelectable,
       showColumnFiltersButton,
       showSearch,
-      showRowActions: storeDeclaredConfigs.showRowActions === false ? false : showRowActions,
+      showRowActions: presentationColumns !== null ? showRowActions : storeDeclaredConfigs.showRowActions === false ? false : showRowActions,
+      showAdministrativeTools,
       showToolbar,
+      showCompactCaption,
       showToolbarActions:
         showToolbarActions === null
           ? storeDeclaredConfigs.showToolbarActions !== false
@@ -303,7 +306,8 @@ const DefaultTable = ({
       refreshing: resolvedIsRefreshing,
       tablePreferenceScope,
       toolbarActions,
-      viewMode: effectiveViewMode,
+      // A controlled presentation must not replace the saved list mode.
+      viewMode: viewMode ? storeDeclaredConfigs.viewMode : effectiveViewMode,
     }),
     [
       appearance, paginationMode, currentPage, pageSizeNumber, goToPage, resolvedIsLoading,
@@ -314,7 +318,7 @@ const DefaultTable = ({
       compactBreakpoint,
       debugFallbackParameters,
       defaultColor,
-      effectiveViewMode,
+      effectiveViewMode, viewMode,
       filters,
       footerComponent,
       forceCardsOnCompact,
@@ -344,6 +348,7 @@ const DefaultTable = ({
       requestSort,
       resolvedIsRefreshing,
       resolvedSort,
+      presentationColumns,
       rowActionsComponent,
       rowActionsWidth,
       rowStyle,
@@ -352,7 +357,9 @@ const DefaultTable = ({
       showColumnFiltersButton,
       showSearch,
       showRowActions,
+      showAdministrativeTools,
       showToolbar,
+      showCompactCaption,
       showToolbarActions,
       showToolbarControls,
       showTotalItemsInCompactToolbar,
@@ -384,6 +391,7 @@ const DefaultTable = ({
         hasImportAction: Boolean(storeDeclaredConfigs.import || importAction || onImport),
         initialViewMode,
         pinRowActions,
+        presentationColumns,
         rowActionsComponentType: rowActionsComponent ? typeof rowActionsComponent : '',
         rowActionsWidth,
         resolvedIsRefreshing,
@@ -394,12 +402,14 @@ const DefaultTable = ({
         showColumnFiltersButton,
         showSearch,
         showRowActions,
+        showAdministrativeTools,
         showToolbar,
+      showCompactCaption,
         showToolbarActions,
         showToolbarControls,
         showTotalItemsInCompactToolbar,
         showTotalItemsInFooter,
-        storedViewMode,
+        storedViewMode, controlledViewMode: viewMode,
         tableFiltersVisible,
         sortedData: stableSerialize(sortedData),
         toolbarActionsLength: Array.isArray(toolbarActions) ? toolbarActions.length : 0,
@@ -413,7 +423,7 @@ const DefaultTable = ({
       compactBreakpoint,
       defaultColor,
       debugFallbackParameters,
-      effectiveViewMode,
+      effectiveViewMode, viewMode,
       filters,
       forceCardsOnCompact,
       storeDeclaredConfigs,
@@ -424,6 +434,7 @@ const DefaultTable = ({
       onExport,
       onImport,
       pinRowActions,
+      presentationColumns,
       rowActionsComponent,
       rowActionsWidth,
       resolvedIsRefreshing,
@@ -433,7 +444,9 @@ const DefaultTable = ({
       showColumnFiltersButton,
       showSearch,
       showRowActions,
+      showAdministrativeTools,
       showToolbar,
+      showCompactCaption,
       showToolbarActions,
       showToolbarControls,
       showTotalItemsInCompactToolbar,
@@ -444,7 +457,6 @@ const DefaultTable = ({
       toolbarActions,
     ],
   );
-
   // Do not mutate store.configs during render. A new configs object is built
   // every pass; writing it here retriggers subscribers and React #185 when
   // opening Adicionar on DefaultTable (categories). Sync only in the hook
@@ -490,5 +502,4 @@ const DefaultTable = ({
     requestParamsSeed
   }} />;
 };
-
 export default DefaultTable;

package/src/react/components/table/DefaultTable.layoutUtils.js

@@ -214,6 +214,7 @@ export const getColumnStyle = column => {
   if (Number.isFinite(columnWidth) && columnWidth > 0) {
     customSize.width = columnWidth;
     customSize.flexBasis = columnWidth;
+    if(column?.cellComponent){customSize.flexGrow=0;customSize.maxWidth=columnWidth;}
   }
 
   if (Number.isFinite(columnMinWidth) && columnMinWidth > 0) {

package/src/react/components/table/DefaultTableCards.js

@@ -66,6 +66,8 @@ const DefaultTableCards = ({ storeName }) => {
     key: cardListKey,
     listKey,
     numColumns: _ignoredNumColumns,
+    transformData,
+    unframedCards,
     ...flatListProps
   } = cardListProps;
   const isLoading = Boolean(store?.getters?.isLoadingList || store?.getters?.isLoading);
@@ -137,6 +139,7 @@ const DefaultTableCards = ({ storeName }) => {
             hasRowActions ? styles.cardItemWithActions : null,
             rowStyleValue,
             compact ? [compactStyles.cardItem, {flex: 0, flexGrow: 0, flexShrink: 0, flexBasis: 'auto', width: compactCardWidth, maxWidth: compactCardWidth, backgroundColor: palette.cardBackground || palette.panelBackground, borderColor: palette.cardBorder || palette.inputBorder}] : null,
+            unframedCards ? {borderWidth:0,backgroundColor:'transparent',shadowOpacity:0,elevation:0} : null,
           ]}
         >
           <View style={[styles.cardContent, hasRowActions ? null : intrinsicHeight, compact ? {flex: 0, flexBasis: 'auto', flexGrow: 0} : null]}>
@@ -206,11 +209,11 @@ const DefaultTableCards = ({ storeName }) => {
   return (
     <FlatList
       {...flatListProps}
-      key={resolvedListKey}
+      key={`${resolvedListKey}:columns-${resolvedNumColumns}`}
       numColumns={resolvedNumColumns}
       onLayout={event => {flatListProps.onLayout?.(event); setListWidth(event.nativeEvent.layout.width);}}
       columnWrapperStyle={compact && gridColumns > 1 ? {gap: 12} : flatListProps.columnWrapperStyle}
-      data={sortedData}
+      data={typeof transformData === 'function' ? transformData(sortedData) : sortedData}
       keyExtractor={getRowKey}
       renderItem={({ item, index }) => renderCardItem(item, index)}
       style={styles.cardsScroll}

package/src/react/components/table/DefaultTableCompactToolbar.js

@@ -83,12 +83,12 @@ export default function DefaultTableCompactToolbar({storeName, actions = [], sho
           <Text numberOfLines={1} style={[s.small, {color: c.chipText || text, flexShrink: 1}]}>{label}</Text><Icon name="x" size={12} color={text} />
         </TouchableOpacity>;
       })}<TouchableOpacity accessibilityRole="button" onPress={() => apply({})}><Text style={[s.small, {color: muted}]}>Limpar filtros</Text></TouchableOpacity></View> : null}
-      <View style={s.secondary}>
+      {configs.showCompactCaption !== false && <View style={s.secondary}>
         <Text style={[s.small, {color: muted}]}>{configs.showTotalItemsInFooter !== false ? `${store.getters?.totalItems ?? 0} ${Number(store.getters?.totalItems) === 1 ? 'resultado' : 'resultados'}` : 'Pedidos'}</Text>
         {showControls ? <TouchableOpacity accessibilityRole="button" accessibilityLabel="Escolher ordenação" onPress={() => setModal('sort')} style={s.row}>
           <Icon name="arrow-down" size={14} color={muted} /><Text style={[s.small, {color: text}]}>{sortColumn ? labelFor(sortColumn) : 'Ordenar'} · {configs.resolvedSort?.direction === 'asc' ? '↑' : '↓'}</Text>
         </TouchableOpacity> : null}
-      </View>
+      </View>}
       <DefaultFiltersModal storeName={storeName} visible={modal === 'filters'} deferred onClose={() => setModal('')} />
       <DefaultColumnMenu storeName={storeName} visible={modal === 'columns'} onClose={() => setModal('')} />
       <DefaultCompactDialog visible={modal === 'more' || modal === 'sort'} title={modal === 'sort' ? 'Ordenação' : 'Mais opções'}

package/src/react/components/table/DefaultTableControls.js

@@ -43,7 +43,7 @@ const DefaultTableControls = ({ storeName }) => {
   const addConfig = store?.getters?.add;
   const addButtonPlacement = normalizeText(configs.addButtonPlacement) || 'toolbar';
   const shouldRenderAddButton =
-    addButtonPlacement === 'toolbar' &&
+    configs.add !== false && addButtonPlacement === 'toolbar' &&
     (addConfig === true || configs.add === true) &&
     (typeof configs.onAdd === 'function' || typeof store?.actions?.save === 'function');
   const { tableButtonColors } = useDefaultTableTheme();
@@ -78,7 +78,7 @@ const DefaultTableControls = ({ storeName }) => {
 
   return (
     <>
-      <DefaultDebug storeName={storeName} />
+      {configs.showAdministrativeTools !== false ? <DefaultDebug storeName={storeName} /> : null}
       {/* app-community#811: LISTA (table) e CARD abrem o mesmo DefaultFiltersModal */}
       {hasFilterableColumns ? (
         <DefaultModalButton

package/src/react/components/table/DefaultTableInput.js

@@ -83,7 +83,7 @@ const DefaultTableInput = ({
   const compactDisplay = compact && storeName === 'orders' ? (resolvedFieldName === 'price' ? Formatter.formatMoney(rawValue || 0) : dateField && rawValue ? `${Formatter.formatDateYmdTodmY(rawValue, false)}${time && (time !== '00:00' || resolvedFieldName === 'alterDate') ? '\n' + time : ''}` : compactType) : undefined;
   const compactTextStyle = compact ? {fontSize: 13, fontWeight: column.isIdentity ? '600' : '400', ...(resolvedFieldName === 'status' ? {color: statusColor} : {color: themeColors.textPrimary})} : null;
   const statusStyle = compact && resolvedFieldName === 'status' ? {width: 'auto', alignSelf: 'flex-start', borderWidth: 1, borderColor: statusColor, borderRadius: 18, paddingHorizontal: 8, paddingVertical: 3, backgroundColor: /^#[0-9a-f]{6}$/i.test(statusColor) ? statusColor + '10' : themeColors.panelBackground} : null;
-  const input = (
+  const input = column.cellComponent ? React.createElement(column.cellComponent,{row,column}) : (
     <DefaultInput
       accentColor={options.accentColor || resolvedAccentColor}
       column={column}

package/src/react/components/table/DefaultTableRows.js

@@ -37,7 +37,7 @@ const DefaultTableRows = ({ storeName }) => {
   const store = useStore(storeName);
   const configs = store?.getters?.configs || {};
   const { palette, resolvedAccentColor, tableBorderColors, themeTokens } = useDefaultTableTheme();
-  const columns = Array.isArray(store?.getters?.columns) ? store.getters.columns : [];
+  const columns = Array.isArray(configs.presentationColumns) ? configs.presentationColumns : Array.isArray(store?.getters?.columns) ? store.getters.columns : [];
   const visibleColumns = store?.getters?.visibleColumns || {};
   const tableColumns = columns.filter(
     column => shouldIncludeColumn(column) && visibleColumns[getColumnKey(column)] !== false,

package/src/react/components/table/DefaultTableToolbar.js

@@ -76,7 +76,7 @@ const DefaultTableToolbar = ({
 
     return null;
   };
-  const importConfig = configs.import || null;
+  const importConfig = configs.showAdministrativeTools === false ? null : configs.import || null;
   const importActionOverrides =
     configs.importAction && typeof configs.importAction === 'object'
       ? configs.importAction

package/src/react/components/table/useDefaultTablePagination.js

@@ -75,6 +75,7 @@ const useAutoPageLoader = ({
   resolvedActions,
   showError,
   storeName,
+  store,
 }) => {
   const [currentPage, setCurrentPage] = useState(1);
   const [autoHasLoaded, setAutoHasLoaded] = useState(false);
@@ -84,6 +85,7 @@ const useAutoPageLoader = ({
   const [autoLastPageCount, setAutoLastPageCount] = useState(0);
   const autoRequestIdRef = useRef(0);
   const autoLoadedQueryKeyRef = useRef('');
+  const autoLoadedStoreKeyRef = useRef(null);
   const autoErroredQueryKeyRef = useRef('');
   const autoPageRef = useRef(0);
   const isFetchingRef = useRef(false);
@@ -116,13 +118,22 @@ const useAutoPageLoader = ({
       const query = buildRequestQuery(page, append);
       if (refresh && resolvedActions.catalogCache) query.__storeMeta = {catalogRefresh: true};
 
-      return Promise.resolve(resolvedActions.getItems(query))
+      const request = resolvedActions.getItems(query);
+      const owningRequestKey = store?.getters?.activeRequestKey;
+      return Promise.resolve(request)
         .then(response => {
           if (autoRequestIdRef.current !== requestId) {
             return response;
           }
 
           const pageItems = normalizeCollectionItems(response);
+          // A retained screen must not present another screen's shared-store result.
+          if (owningRequestKey && store?.getters?.lastCompletedRequest?.requestKey !== owningRequestKey) {
+            autoLoadedQueryKeyRef.current = '';
+            setAutoHasLoaded(false);
+            return pageItems;
+          }
+          autoLoadedStoreKeyRef.current = owningRequestKey || store?.getters?.lastCompletedRequest?.requestKey || null;
           autoPageRef.current = Number(response?.catalogPage) || page;
           setCurrentPage(autoPageRef.current);
           autoLoadedQueryKeyRef.current = autoQuerySignature;
@@ -159,6 +170,7 @@ const useAutoPageLoader = ({
       resolvedActions,
       showError,
       storeName,
+      store,
     ],
   );
 
@@ -168,6 +180,7 @@ const useAutoPageLoader = ({
     autoHasLoaded,
     autoLastPageCount,
     autoLoadedQueryKeyRef,
+    autoLoadedStoreKeyRef,
     autoLoading,
     autoLoadingMore,
     autoRefreshing,
@@ -188,21 +201,30 @@ const useAutoPageEffect = ({
   isFocused,
   loadAutoPage,
   resolvedActions,
+  ownsStoreResult,
+  autoPageRef,
 }) => {
+  const wasFocused = useRef(false);
   useEffect(() => {
+    const entering = isFocused && !wasFocused.current;
+    wasFocused.current = isFocused;
     if (!autoMode || !isFocused) return;
     if (typeof resolvedActions.getItems !== 'function') return;
+    // A failed visit may retry on the next focus, but never spin while still focused.
+    if (entering) autoErroredQueryKeyRef.current = '';
     if (
       autoLoading ||
       autoLoadingMore ||
-      autoLoadedQueryKeyRef.current === autoQuerySignature ||
+      (autoLoadedQueryKeyRef.current === autoQuerySignature && ownsStoreResult && !(entering && resolvedActions.catalogCache)) ||
       autoErroredQueryKeyRef.current === autoQuerySignature
     ) {
       return;
     }
 
     endReachedLockRef.current = false;
-    loadAutoPage(1, { append: false });
+    const retainedPage = autoLoadedQueryKeyRef.current === autoQuerySignature && (!ownsStoreResult || resolvedActions.catalogCache)
+      ? Math.max(1, autoPageRef.current) : 1;
+    loadAutoPage(retainedPage, { append: false });
   }, [
     autoErroredQueryKeyRef,
     autoLoadedQueryKeyRef,
@@ -214,6 +236,8 @@ const useAutoPageEffect = ({
     isFocused,
     loadAutoPage,
     resolvedActions,
+    ownsStoreResult,
+  autoPageRef,
   ]);
 };
 
@@ -245,6 +269,10 @@ export const useDefaultTablePagination = ({
     sortField: resolvedSort?.field,
   });
   const pageSizeNumber = Number(requestParams.itemsPerPage || pageSize || 50) || 50;
+  const [localPage, setLocalPage] = useState({key: '', page: 1});
+  const localQueryKey = stableSerialize([storeName, pageSizeNumber, filters, resolvedSort,
+    Array.isArray(data) ? data.map(item => item?.['@id'] ?? item?.id) : []]);
+  const localPages = Math.max(1, Math.ceil((Array.isArray(data) ? data.length : 0) / pageSizeNumber));
   const resourceEndpoint = store?.getters?.resourceEndpoint || '';
   const storeReload = store?.getters?.reload;
   const buildRequestQuery = useCallback(
@@ -279,11 +307,12 @@ export const useDefaultTablePagination = ({
     [columnsForTable, filters, pageSizeNumber, requestParams, resolvedSort, resourceEndpoint, storeName, storeReload],
   );
   const {
-    currentPage,
+    currentPage: autoCurrentPage,
     autoErroredQueryKeyRef,
     autoHasLoaded,
     autoLastPageCount,
     autoLoadedQueryKeyRef,
+    autoLoadedStoreKeyRef,
     autoLoading,
     autoLoadingMore,
     autoRefreshing,
@@ -298,8 +327,17 @@ export const useDefaultTablePagination = ({
     resolvedActions,
     showError,
     storeName,
+    store,
   });
 
+  const currentPage = autoMode ? autoCurrentPage : Math.min(localPages, localPage.key === localQueryKey ? localPage.page : 1);
+  const paginateData = useCallback(items => !autoMode && paginationMode === 'pages'
+    ? items.slice((currentPage - 1) * pageSizeNumber, currentPage * pageSizeNumber) : items,
+  [autoMode, paginationMode, currentPage, pageSizeNumber]);
+
+  const ownsStoreResult = !autoLoadedStoreKeyRef.current ||
+    autoLoadedStoreKeyRef.current === store?.getters?.lastCompletedRequest?.requestKey;
+
   useAutoPageEffect({
     autoErroredQueryKeyRef,
     autoLoadedQueryKeyRef,
@@ -311,6 +349,8 @@ export const useDefaultTablePagination = ({
     isFocused,
     loadAutoPage,
     resolvedActions,
+    ownsStoreResult,
+    autoPageRef,
   });
 
   useEffect(() => {
@@ -326,7 +366,7 @@ export const useDefaultTablePagination = ({
     ? autoRefreshing
     : false;
   const resolvedData = autoMode
-    ? (autoHasLoaded && Array.isArray(store?.getters?.items) ? store.getters.items : [])
+    ? (autoHasLoaded && ownsStoreResult && Array.isArray(store?.getters?.items) ? store.getters.items : [])
     : (Array.isArray(data) ? data : []);
   const resolvedHasMore = useMemo(
     () => {
@@ -416,8 +456,10 @@ export const useDefaultTablePagination = ({
   return {
     buildRequestQuery,
     currentPage,
+    paginateData,
     goToPage: page => {
-      const totalPages = Math.max(1, Math.ceil(Number(resolvedTotalItems || 0) / pageSizeNumber));
+      const totalPages = autoMode ? Math.max(1, Math.ceil(Number(resolvedTotalItems || 0) / pageSizeNumber)) : localPages;
+      if (!autoMode && paginationMode === 'pages' && Number.isInteger(page) && page >= 1 && page <= totalPages && !resolvedIsLoading) setLocalPage({key: localQueryKey, page});
       if (autoMode && paginationMode === 'pages' && Number.isInteger(page) && page >= 1 && page <= totalPages && !resolvedIsLoading) {
         return loadAutoPage(page, {append: false});
       }

package/src/react/components/table/useDefaultTableStoreSync.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import {
   persistTableFiltersPreference,
   resolveStoredTableFiltersPreference,
@@ -65,7 +65,15 @@ export function useDefaultTableStoreSync({
   const storeRef = useRef(store);
   storeRef.current = store;
   const lastPublishedItemsRef = useRef(undefined);
-  const configsSignatureRef = useRef('');
+  // Keep custom presentation closures current (for example after a theme switch)
+  // without publishing configs for every new callback identity and reintroducing #185.
+  const cardOwner = useMemo(() => {
+    const owner = {current: null, signature: ''};
+    owner.render = (...args) => owner.current?.(...args);
+    return owner;
+  }, [storeName, store?.actions?.setConfigs]);
+  cardOwner.current = defaultTableConfigs.renderCard;
+  const hasRenderCard = typeof defaultTableConfigs.renderCard === 'function';
   const lastHydratedFiltersKeyRef = useRef('');
   const storeFiltersRef = useRef(storeFilters);
   storeFiltersRef.current = storeFilters;
@@ -163,11 +171,15 @@ export function useDefaultTableStoreSync({
   }, [filters]);
 
   useEffect(() => {
-    if (configsSignatureRef.current === defaultTableConfigsSignature) {
+    const signature = `${storeName}:${defaultTableConfigsSignature}:render-card:${hasRenderCard}`;
+    if (cardOwner.signature === signature) {
       return;
     }
 
-    configsSignatureRef.current = defaultTableConfigsSignature;
-    publishStoreValue(storeRef.current, 'setConfigs', defaultTableConfigs, 'configs');
-  }, [defaultTableConfigs, defaultTableConfigsSignature, storeName]);
+    cardOwner.signature = signature;
+    publishStoreValue(storeRef.current, 'setConfigs', {
+      ...defaultTableConfigs,
+      renderCard: hasRenderCard ? cardOwner.render : defaultTableConfigs.renderCard,
+    }, 'configs');
+  }, [defaultTableConfigs, defaultTableConfigsSignature, storeName, hasRenderCard, cardOwner]);
 }