@asteby/metacore-runtime-react 28.0.3 → 28.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @asteby/metacore-runtime-react
 
+## 28.1.0
+
+### Minor Changes
+
+- 833cffb: DynamicTable: nuevo prop `pagination?: 'pages' | 'infinite'` con default `'pages'` (paginación clásica). El modo por defecto renderiza el footer `DataTablePagination` (selector de filas por página, "página X de Y", botones primera/anterior/siguiente/última) y cada cambio de página hace un fetch que REEMPLAZA las filas visibles (page/per_page contra el servidor, pageCount derivado de `meta.total`). Cambiar filtros/búsqueda/orden resetea a la página 1, y el tamaño de página elegido se persiste por tabla en localStorage (clave por `model`). El scroll infinito pasa a ser opt-in explícito con `pagination="infinite"`; el prop booleano `infiniteScroll` queda deprecado pero sigue funcionando cuando no se pasa `pagination`, así que los hosts existentes no cambian de comportamiento.
+
 ## 28.0.3
 
 ### Patch Changes

package/dist/dynamic-table.d.ts

@@ -37,13 +37,26 @@ export interface DynamicTableProps {
      */
     currency?: string;
     /**
-     * Opt into infinite scroll: instead of the classic pager, rows accumulate as
-     * the user scrolls (a sentinel at the bottom fetches + appends the next
-     * page, deduped by id, respecting the active filters/search). Changing any
-     * filter/sort/search resets to page 1. Default false — existing hosts keep
-     * the classic pagination untouched.
+     * Pagination mode.
+     *   - 'pages' (default): classic pager footer (DataTablePagination — rows
+     *     per page selector, "página X de Y", first/prev/next/last). Each page
+     *     change fetches and REPLACES the visible rows (page/per_page against
+     *     the same server params the infinite mode uses; pageCount derives
+     *     from meta.total). The chosen page size persists per table in
+     *     localStorage (keyed by model). Changing any filter/sort/search
+     *     resets to page 1.
+     *   - 'infinite': rows accumulate as the user scrolls (a sentinel at the
+     *     bottom fetches + appends the next page, deduped by id, respecting
+     *     the active filters/search). Changing any filter/sort/search resets
+     *     to page 1.
+     */
+    pagination?: 'pages' | 'infinite';
+    /**
+     * @deprecated Use `pagination="infinite"`. Kept for back-compat: when the
+     * new `pagination` prop is not provided, `infiniteScroll` still selects the
+     * mode exactly as before.
      */
     infiniteScroll?: boolean;
 }
-export declare function DynamicTable({ model, endpoint, enableUrlSync, hiddenColumns, onAction, onRowClick, refreshTrigger, defaultFilters, extraColumns, getDynamicColumns, timeZone, currency, infiniteScroll, }: DynamicTableProps): import("react").JSX.Element;
+export declare function DynamicTable({ model, endpoint, enableUrlSync, hiddenColumns, onAction, onRowClick, refreshTrigger, defaultFilters, extraColumns, getDynamicColumns, timeZone, currency, pagination: paginationMode, infiniteScroll: infiniteScrollProp, }: DynamicTableProps): import("react").JSX.Element;
 //# sourceMappingURL=dynamic-table.d.ts.map

package/dist/dynamic-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-table.d.ts","sourceRoot":"","sources":["../src/dynamic-table.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAKH,KAAK,SAAS,EAajB,MAAM,uBAAuB,CAAA;AAgC9B,OAAO,KAAK,EAAsB,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAiEnF,MAAM,WAAW,iBAAiB;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC7C;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC/B,cAAc,CAAC,EAAE,GAAG,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,YAAY,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAA;IAC/B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,aAAoB,EACpB,aAAkB,EAClB,QAAQ,EACR,UAAU,EACV,cAAc,EACd,cAAc,EACd,YAAiB,EACjB,iBAA4C,EAC5C,QAAQ,EACR,QAAQ,EACR,cAAsB,GACzB,EAAE,iBAAiB,+BA2rCnB"}
+{"version":3,"file":"dynamic-table.d.ts","sourceRoot":"","sources":["../src/dynamic-table.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAKH,KAAK,SAAS,EAajB,MAAM,uBAAuB,CAAA;AAgC9B,OAAO,KAAK,EAAsB,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AA2FnF,MAAM,WAAW,iBAAiB;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC7C;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC/B,cAAc,CAAC,EAAE,GAAG,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,YAAY,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAA;IAC/B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;;;;;;;;;OAaG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,UAAU,CAAA;IACjC;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,aAAoB,EACpB,aAAkB,EAClB,QAAQ,EACR,UAAU,EACV,cAAc,EACd,cAAc,EACd,YAAiB,EACjB,iBAA4C,EAC5C,QAAQ,EACR,QAAQ,EACR,UAAU,EAAE,cAAc,EAC1B,cAAc,EAAE,kBAA0B,GAC7C,EAAE,iBAAiB,+BAquCnB"}

package/dist/dynamic-table.js

@@ -75,7 +75,38 @@ function writeTableDataCache(key, rows, rowCount) {
         // quota / private mode — the cache is a nicety, never fatal
     }
 }
-export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColumns = [], onAction, onRowClick, refreshTrigger, defaultFilters, extraColumns = [], getDynamicColumns = defaultGetDynamicColumns, timeZone, currency, infiniteScroll = false, }) {
+// Chosen page size, persisted per table so a user's preferred density survives
+// reloads. localStorage ON PURPOSE (unlike the row-data cache above): a page
+// size is a UI preference, not org/user-scoped data, so outliving the tab is
+// desired. Keyed by model.
+const TBL_PAGE_SIZE_PREFIX = 'mc:tbl:pageSize:v1';
+function readStoredPageSize(model) {
+    try {
+        const raw = localStorage.getItem(`${TBL_PAGE_SIZE_PREFIX}|${model}`);
+        if (!raw)
+            return null;
+        const n = parseInt(raw, 10);
+        return Number.isFinite(n) && n > 0 ? n : null;
+    }
+    catch {
+        return null;
+    }
+}
+function writeStoredPageSize(model, size) {
+    try {
+        if (size === null)
+            localStorage.removeItem(`${TBL_PAGE_SIZE_PREFIX}|${model}`);
+        else
+            localStorage.setItem(`${TBL_PAGE_SIZE_PREFIX}|${model}`, String(size));
+    }
+    catch {
+        // quota / private mode — persistence is a nicety, never fatal
+    }
+}
+export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColumns = [], onAction, onRowClick, refreshTrigger, defaultFilters, extraColumns = [], getDynamicColumns = defaultGetDynamicColumns, timeZone, currency, pagination: paginationMode, infiniteScroll: infiniteScrollProp = false, }) {
+    // The explicit `pagination` prop wins; the legacy `infiniteScroll` boolean
+    // still selects the mode when `pagination` is absent (back-compat).
+    const infiniteScroll = paginationMode ? paginationMode === 'infinite' : infiniteScrollProp;
     const { t, i18n } = useTranslation();
     const api = useApi();
     const currentBranch = useCurrentBranch();
@@ -122,7 +153,17 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
         return initial;
     });
     const [columnFilters, setColumnFilters] = useState([]);
-    const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
+    // The user's persisted page-size preference for this table (pages mode).
+    // Read once at mount; a URL `per_page` still wins over it (deep-links stay
+    // exact), and it wins over the model's server default.
+    const storedPageSizeRef = useRef(undefined);
+    if (storedPageSizeRef.current === undefined) {
+        storedPageSizeRef.current = readStoredPageSize(model);
+    }
+    const [pagination, setPagination] = useState({
+        pageIndex: 0,
+        pageSize: storedPageSizeRef.current ?? 10,
+    });
     const [globalFilter, setGlobalFilter] = useState('');
     const [rowCount, setRowCount] = useState(bootData?.rowCount ?? 0);
     const [dateRange, setDateRange] = useState(undefined);
@@ -397,7 +438,7 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
             if (cached) {
                 setMetadata(cached);
                 defaultPerPage.current = cached.defaultPerPage || 10;
-                if (!urlHadPerPage.current)
+                if (!urlHadPerPage.current && storedPageSizeRef.current == null)
                     setPagination((prev) => ({ ...prev, pageSize: cached.defaultPerPage || 10 }));
                 setLoading(false);
             }
@@ -413,7 +454,7 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
                     setMetadata(fresh);
                     cacheMetadata(model, fresh);
                     defaultPerPage.current = fresh.defaultPerPage || 10;
-                    if (!urlHadPerPage.current)
+                    if (!urlHadPerPage.current && storedPageSizeRef.current == null)
                         setPagination((prev) => ({ ...prev, pageSize: fresh.defaultPerPage || 10 }));
                 }
             }
@@ -630,6 +671,37 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
     // Signature of everything that must reset the incremental list to page 1:
     // the filters/search AND the sort (both live in buildFilterParams).
     const filterSignature = useMemo(() => JSON.stringify(buildFilterParams()), [buildFilterParams]);
+    // Pages mode: any filter/search/sort change snaps back to page 1 (same
+    // contract as the infinite reset above — a filtered set has its own page
+    // space). Ref-compared so paging itself never triggers it, and armed only
+    // AFTER the URL adoption has settled so a deep-linked `?page=3&sortBy=...`
+    // is not immediately reset by its own sort arriving.
+    const pagesSigArmed = useRef(false);
+    const pagesPrevSig = useRef(null);
+    useEffect(() => {
+        if (infiniteScroll)
+            return;
+        if (enableUrlSync && !urlSynced)
+            return;
+        if (!pagesSigArmed.current) {
+            pagesSigArmed.current = true;
+            pagesPrevSig.current = filterSignature;
+            return;
+        }
+        if (pagesPrevSig.current === filterSignature)
+            return;
+        pagesPrevSig.current = filterSignature;
+        setPagination((p) => (p.pageIndex === 0 ? p : { ...p, pageIndex: 0 }));
+    }, [infiniteScroll, enableUrlSync, urlSynced, filterSignature]);
+    // Persist the chosen page size per table (localStorage, keyed by model).
+    // The server default is stored as an explicit removal so a later backend
+    // change of `defaultPerPage` still propagates to users who never deviated.
+    useEffect(() => {
+        if (!metadata)
+            return;
+        const chosen = pagination.pageSize;
+        writeStoredPageSize(model, chosen === defaultPerPage.current ? null : chosen);
+    }, [metadata, model, pagination.pageSize]);
     const loadNextPage = useCallback(() => {
         if (loadingMore || loadingData || infExhausted)
             return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "28.0.3",
+  "version": "28.1.0",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",
@@ -67,8 +67,8 @@
     "typescript": "^6.0.0",
     "vitest": "^4.0.0",
     "zustand": "^5.0.0",
-    "@asteby/metacore-sdk": "3.4.0",
-    "@asteby/metacore-ui": "2.12.1"
+    "@asteby/metacore-ui": "2.12.1",
+    "@asteby/metacore-sdk": "3.4.0"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",

package/src/__tests__/dynamic-table-pages.test.tsx

@@ -0,0 +1,160 @@
+// @vitest-environment happy-dom
+//
+// DynamicTable classic pagination ('pages', the default mode):
+//   1. The pager footer renders; clicking page 2 issues a NEW query with
+//      page=2 and REPLACES the visible rows (no accumulation).
+//   2. Changing the filters resets back to page 1.
+//   3. The chosen page size persists per table in localStorage and is adopted
+//      on the next mount (over the model's server default).
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+vi.mock('@tanstack/react-router', () => ({
+    useNavigate: () => () => {},
+}))
+const I18N = {
+    t: (_k: string, o?: { defaultValue?: string; count?: number; total?: number }) => {
+        if (o?.defaultValue && o.count != null && o.total != null) {
+            return o.defaultValue.replace('{{count}}', String(o.count)).replace('{{total}}', String(o.total))
+        }
+        return o?.defaultValue ?? _k
+    },
+    i18n: { language: 'es' },
+}
+vi.mock('react-i18next', () => ({ useTranslation: () => I18N }))
+
+import { DynamicTable } from '../dynamic-table'
+import { ApiProvider, type ApiClient } from '../api-context'
+import { useMetadataCache } from '../metadata-cache'
+import type { TableMetadata } from '../types'
+
+afterEach(cleanup)
+
+function meta(): TableMetadata {
+    return {
+        title: 'Issues',
+        endpoint: '/data/issue',
+        group_by: 'stage',
+        columns: [
+            { key: 'title', label: 'Title', type: 'text', sortable: true, filterable: false, searchable: true },
+        ],
+        actions: [],
+        perPageOptions: [10, 20, 50],
+        defaultPerPage: 10,
+        searchPlaceholder: 'Buscar...',
+        enableCRUDActions: false,
+        hasActions: false,
+    }
+}
+
+function fakeApi(total: number): ApiClient {
+    const ok = (data: unknown) => ({ data: { success: true, data, meta: { total } } })
+    const page = (n: number, size: number) => {
+        const start = (n - 1) * size
+        const rows: Array<{ id: number; title: string }> = []
+        for (let i = start; i < Math.min(start + size, total); i++) {
+            rows.push({ id: i + 1, title: `Issue ${i + 1}` })
+        }
+        return rows
+    }
+    return {
+        get: vi.fn(async (url: string, cfg?: any) => {
+            if (url.startsWith('/metadata/table/')) return ok(meta())
+            if (url.endsWith('/facets')) return ok([])
+            const p = cfg?.params?.page ?? 1
+            const size = cfg?.params?.per_page ?? 10
+            return ok(page(p, size))
+        }),
+        post: vi.fn(async () => ok(null)),
+        put: vi.fn(async () => ok(null)),
+        delete: vi.fn(async () => ok(null)),
+    }
+}
+
+function dataCalls(api: ApiClient) {
+    return (api.get as any).mock.calls.filter((c: any[]) => c[0] === '/data/issue')
+}
+
+describe('DynamicTable classic pages mode (default)', () => {
+    beforeEach(() => {
+        localStorage.clear()
+        sessionStorage.clear()
+        useMetadataCache.getState().setMetadata('issue', meta())
+    })
+
+    it('changes page: new query with page=2 and REPLACES the rows', async () => {
+        const api = fakeApi(45)
+        render(
+            <ApiProvider client={api}>
+                <DynamicTable model="issue" pagination="pages" enableUrlSync={false} />
+            </ApiProvider>,
+        )
+
+        // Page 1 loads with the model's default size.
+        await waitFor(() => {
+            const first = dataCalls(api)[0]
+            expect(first?.[1]?.params).toMatchObject({ page: 1, per_page: 10 })
+        })
+        await waitFor(() => expect(screen.getAllByText('Issue 1').length).toBeGreaterThan(0))
+
+        // Click the pager's page "2" button.
+        const btn2 = screen.getAllByRole('button').find((b) => b.textContent?.trim().endsWith('2'))
+        expect(btn2).toBeTruthy()
+        fireEvent.click(btn2!)
+
+        await waitFor(() => {
+            const pages = dataCalls(api).map((c: any[]) => c[1]?.params?.page)
+            expect(pages).toContain(2)
+        })
+        // Rows were REPLACED, not accumulated: page-2 rows in, page-1 rows out.
+        await waitFor(() => expect(screen.getAllByText('Issue 11').length).toBeGreaterThan(0))
+        expect(screen.queryByText('Issue 1')).toBeNull()
+    })
+
+    it('resets to page 1 when the filters change', async () => {
+        const api = fakeApi(45)
+        const { rerender } = render(
+            <ApiProvider client={api}>
+                <DynamicTable model="issue" pagination="pages" enableUrlSync={false} />
+            </ApiProvider>,
+        )
+        await waitFor(() => expect(screen.getAllByText('Issue 1').length).toBeGreaterThan(0))
+        const btn2 = screen.getAllByRole('button').find((b) => b.textContent?.trim().endsWith('2'))
+        fireEvent.click(btn2!)
+        await waitFor(() => expect(screen.getAllByText('Issue 11').length).toBeGreaterThan(0))
+
+        // Change the active filters via defaultFilters (part of buildFilterParams).
+        rerender(
+            <ApiProvider client={api}>
+                <DynamicTable
+                    model="issue"
+                    pagination="pages"
+                    enableUrlSync={false}
+                    defaultFilters={{ stage: 'done' }}
+                />
+            </ApiProvider>,
+        )
+
+        // The filtered request goes back to page 1.
+        await waitFor(() => {
+            const withFilter = dataCalls(api).filter((c: any[]) => c[1]?.params?.f_stage === 'done')
+            expect(withFilter.length).toBeGreaterThan(0)
+            expect(withFilter.every((c: any[]) => c[1]?.params?.page === 1)).toBe(true)
+        })
+        await waitFor(() => expect(screen.getAllByText('Issue 1').length).toBeGreaterThan(0))
+    })
+
+    it('adopts the per-table page size persisted in localStorage', async () => {
+        localStorage.setItem('mc:tbl:pageSize:v1|issue', '20')
+        const api = fakeApi(45)
+        render(
+            <ApiProvider client={api}>
+                <DynamicTable model="issue" enableUrlSync={false} />
+            </ApiProvider>,
+        )
+        await waitFor(() => {
+            const first = dataCalls(api)[0]
+            expect(first?.[1]?.params).toMatchObject({ page: 1, per_page: 20 })
+        })
+    })
+})

package/src/dynamic-table.tsx

@@ -129,6 +129,32 @@ function writeTableDataCache(key: string, rows: any[], rowCount: number): void {
     }
 }
 
+// Chosen page size, persisted per table so a user's preferred density survives
+// reloads. localStorage ON PURPOSE (unlike the row-data cache above): a page
+// size is a UI preference, not org/user-scoped data, so outliving the tab is
+// desired. Keyed by model.
+const TBL_PAGE_SIZE_PREFIX = 'mc:tbl:pageSize:v1'
+
+function readStoredPageSize(model: string): number | null {
+    try {
+        const raw = localStorage.getItem(`${TBL_PAGE_SIZE_PREFIX}|${model}`)
+        if (!raw) return null
+        const n = parseInt(raw, 10)
+        return Number.isFinite(n) && n > 0 ? n : null
+    } catch {
+        return null
+    }
+}
+
+function writeStoredPageSize(model: string, size: number | null): void {
+    try {
+        if (size === null) localStorage.removeItem(`${TBL_PAGE_SIZE_PREFIX}|${model}`)
+        else localStorage.setItem(`${TBL_PAGE_SIZE_PREFIX}|${model}`, String(size))
+    } catch {
+        // quota / private mode — persistence is a nicety, never fatal
+    }
+}
+
 export interface DynamicTableProps {
     model: string
     endpoint?: string
@@ -166,11 +192,24 @@ export interface DynamicTableProps {
      */
     currency?: string
     /**
-     * Opt into infinite scroll: instead of the classic pager, rows accumulate as
-     * the user scrolls (a sentinel at the bottom fetches + appends the next
-     * page, deduped by id, respecting the active filters/search). Changing any
-     * filter/sort/search resets to page 1. Default false — existing hosts keep
-     * the classic pagination untouched.
+     * Pagination mode.
+     *   - 'pages' (default): classic pager footer (DataTablePagination — rows
+     *     per page selector, "página X de Y", first/prev/next/last). Each page
+     *     change fetches and REPLACES the visible rows (page/per_page against
+     *     the same server params the infinite mode uses; pageCount derives
+     *     from meta.total). The chosen page size persists per table in
+     *     localStorage (keyed by model). Changing any filter/sort/search
+     *     resets to page 1.
+     *   - 'infinite': rows accumulate as the user scrolls (a sentinel at the
+     *     bottom fetches + appends the next page, deduped by id, respecting
+     *     the active filters/search). Changing any filter/sort/search resets
+     *     to page 1.
+     */
+    pagination?: 'pages' | 'infinite'
+    /**
+     * @deprecated Use `pagination="infinite"`. Kept for back-compat: when the
+     * new `pagination` prop is not provided, `infiniteScroll` still selects the
+     * mode exactly as before.
      */
     infiniteScroll?: boolean
 }
@@ -188,8 +227,12 @@ export function DynamicTable({
     getDynamicColumns = defaultGetDynamicColumns,
     timeZone,
     currency,
-    infiniteScroll = false,
+    pagination: paginationMode,
+    infiniteScroll: infiniteScrollProp = false,
 }: DynamicTableProps) {
+    // The explicit `pagination` prop wins; the legacy `infiniteScroll` boolean
+    // still selects the mode when `pagination` is absent (back-compat).
+    const infiniteScroll = paginationMode ? paginationMode === 'infinite' : infiniteScrollProp
     const { t, i18n } = useTranslation()
     const api = useApi()
     const currentBranch = useCurrentBranch()
@@ -247,7 +290,17 @@ export function DynamicTable({
         return initial
     })
     const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
-    const [pagination, setPagination] = useState<PaginationState>({ pageIndex: 0, pageSize: 10 })
+    // The user's persisted page-size preference for this table (pages mode).
+    // Read once at mount; a URL `per_page` still wins over it (deep-links stay
+    // exact), and it wins over the model's server default.
+    const storedPageSizeRef = useRef<number | null | undefined>(undefined)
+    if (storedPageSizeRef.current === undefined) {
+        storedPageSizeRef.current = readStoredPageSize(model)
+    }
+    const [pagination, setPagination] = useState<PaginationState>({
+        pageIndex: 0,
+        pageSize: storedPageSizeRef.current ?? 10,
+    })
     const [globalFilter, setGlobalFilter] = useState('')
     const [rowCount, setRowCount] = useState(bootData?.rowCount ?? 0)
 
@@ -507,7 +560,7 @@ export function DynamicTable({
             if (cached) {
                 setMetadata(cached)
                 defaultPerPage.current = cached.defaultPerPage || 10
-                if (!urlHadPerPage.current) setPagination((prev: PaginationState) => ({ ...prev, pageSize: cached.defaultPerPage || 10 }))
+                if (!urlHadPerPage.current && storedPageSizeRef.current == null) setPagination((prev: PaginationState) => ({ ...prev, pageSize: cached.defaultPerPage || 10 }))
                 setLoading(false)
             } else {
                 setLoading(true)
@@ -521,7 +574,7 @@ export function DynamicTable({
                     setMetadata(fresh)
                     cacheMetadata(model, fresh)
                     defaultPerPage.current = fresh.defaultPerPage || 10
-                    if (!urlHadPerPage.current) setPagination((prev: PaginationState) => ({ ...prev, pageSize: fresh.defaultPerPage || 10 }))
+                    if (!urlHadPerPage.current && storedPageSizeRef.current == null) setPagination((prev: PaginationState) => ({ ...prev, pageSize: fresh.defaultPerPage || 10 }))
                 }
             } catch (error) {
                 if (!cached) console.error('Error al cargar la configuración de la tabla', error)
@@ -738,6 +791,35 @@ export function DynamicTable({
         [buildFilterParams],
     )
 
+    // Pages mode: any filter/search/sort change snaps back to page 1 (same
+    // contract as the infinite reset above — a filtered set has its own page
+    // space). Ref-compared so paging itself never triggers it, and armed only
+    // AFTER the URL adoption has settled so a deep-linked `?page=3&sortBy=...`
+    // is not immediately reset by its own sort arriving.
+    const pagesSigArmed = useRef(false)
+    const pagesPrevSig = useRef<string | null>(null)
+    useEffect(() => {
+        if (infiniteScroll) return
+        if (enableUrlSync && !urlSynced) return
+        if (!pagesSigArmed.current) {
+            pagesSigArmed.current = true
+            pagesPrevSig.current = filterSignature
+            return
+        }
+        if (pagesPrevSig.current === filterSignature) return
+        pagesPrevSig.current = filterSignature
+        setPagination((p: PaginationState) => (p.pageIndex === 0 ? p : { ...p, pageIndex: 0 }))
+    }, [infiniteScroll, enableUrlSync, urlSynced, filterSignature])
+
+    // Persist the chosen page size per table (localStorage, keyed by model).
+    // The server default is stored as an explicit removal so a later backend
+    // change of `defaultPerPage` still propagates to users who never deviated.
+    useEffect(() => {
+        if (!metadata) return
+        const chosen = pagination.pageSize
+        writeStoredPageSize(model, chosen === defaultPerPage.current ? null : chosen)
+    }, [metadata, model, pagination.pageSize])
+
     const loadNextPage = useCallback(() => {
         if (loadingMore || loadingData || infExhausted) return
         if (data.length >= rowCount) return