@asteby/metacore-runtime-react 23.9.1 → 23.9.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @asteby/metacore-runtime-react
 
+## 23.9.2
+
+### Patch Changes
+
+- 38856fc: fix(data-table/kanban): filtros con un solo indicador y scroll infinito sin atascos
+  - La tabla ya no renderiza la fila de chips de filtros activos: el indicador del header de columna es la única señal (los chips seguían duplicando la info).
+  - La tabla re-sincroniza sus filtros cuando el router del host reescribe la query string sin remontar (p. ej. entradas hermanas del sidebar que deep-linkean distintos `f_` sobre la misma ruta); antes quedaba mostrando el filtro anterior.
+  - El sentinel de scroll infinito encadena la siguiente página cuando una carga termina y el sentinel sigue visible (pantallas pequeñas / páginas cortas); antes se atascaba hasta que el usuario movía el scroll.
+
 ## 23.9.1
 
 ### Patch Changes

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;AAanF,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,+BA6iCnB"}
+{"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;AAanF,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,+BA8iCnB"}

package/dist/dynamic-table.js

@@ -25,7 +25,7 @@ import { useMetadataCache } from './metadata-cache';
 import { useApi, useCurrentBranch } from './api-context';
 import { defaultGetDynamicColumns, DATE_CELL_TYPES, aggregateOf, formatAggregateTotal } from './dynamic-columns';
 import { useFacetLoaders, isLongTextColumn } from './use-facet-loaders';
-import { FilterChipsRow, translateOptionLabels } from './filter-chips';
+import { translateOptionLabels } from './filter-chips';
 import { dedupeById, useInfiniteScrollSentinel } from './use-infinite-scroll';
 import { OptionsContext } from './options-context';
 import { getSearchableColumnKeys } from './column-visibility';
@@ -148,6 +148,10 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
         if (Object.keys(filters).length > 0)
             setDynamicFilters(filters);
     }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    // The exact query string this table last wrote to the URL — lets the
+    // resync effect below tell "our own replaceState" apart from an external
+    // rewrite by the host router.
+    const lastSelfSearch = useRef(null);
     useEffect(() => {
         if (!enableUrlSync || !initializedFromUrl.current)
             return;
@@ -188,8 +192,46 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
         });
         const search = params.toString();
         const newUrl = search ? `${window.location.pathname}?${search}` : window.location.pathname;
+        lastSelfSearch.current = search ? `?${search}` : '';
         window.history.replaceState(null, '', newUrl);
     }, [enableUrlSync, pagination, sorting, globalFilter, dynamicFilters, defaultFilters]);
+    // The host router can rewrite the query string WITHOUT remounting the
+    // table — e.g. sidebar sibling entries deep-link different `f_` filters
+    // into the same model route. The mount-time init above never re-runs, so
+    // the table kept showing the previous filter. On every render where the
+    // location's search differs from the last URL we ourselves wrote,
+    // re-parse the `f_` params and adopt them.
+    const locationSearch = typeof window !== 'undefined' ? window.location.search : '';
+    useEffect(() => {
+        if (!enableUrlSync || !initializedFromUrl.current)
+            return;
+        if (locationSearch === lastSelfSearch.current)
+            return;
+        lastSelfSearch.current = locationSearch;
+        const params = new URLSearchParams(locationSearch);
+        const filters = {};
+        params.forEach((rawValue, key) => {
+            if (!key.startsWith('f_'))
+                return;
+            const filterKey = key.substring(2);
+            if (defaultFilters && filterKey in defaultFilters)
+                return;
+            const value = urlValueToInternal(rawValue);
+            if (value.startsWith('IN:'))
+                filters[filterKey] = value.substring(3).split(',');
+            else
+                filters[filterKey] = [value];
+        });
+        setDynamicFilters((prev) => {
+            if (JSON.stringify(prev) === JSON.stringify(filters))
+                return prev;
+            setPagination((p) => ({ ...p, pageIndex: 0 }));
+            return filters;
+        });
+        const search = params.get('search');
+        if (search !== null)
+            setGlobalFilter(search);
+    });
     const prefetchOptions = useCallback(async (endpoints) => {
         if (endpoints.length === 0)
             return new Map();
@@ -714,30 +756,6 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
             return;
         prefetchFacets(facetFieldsSig.split('|'));
     }, [facetFieldsSig, prefetchFacets]);
-    // Active-filter chips (shared row with the kanban). One chip per field with a
-    // selection; the label is the translated filter/column label.
-    const activeFilterChips = useMemo(() => {
-        if (!metadata)
-            return [];
-        const out = [];
-        for (const [key, config] of columnFilterConfigs) {
-            if ((config.selectedValues?.length ?? 0) === 0)
-                continue;
-            const f = metadata.filters?.find((x) => x.key === key);
-            const c = metadata.columns?.find((x) => x.key === key);
-            const rawLabel = f?.label || c?.label || key;
-            out.push({
-                key,
-                label: t(rawLabel, { defaultValue: rawLabel }),
-                config,
-            });
-        }
-        return out;
-    }, [metadata, columnFilterConfigs, t]);
-    const clearAllDynamicFilters = useCallback(() => {
-        setDynamicFilters({});
-        setPagination((prev) => ({ ...prev, pageIndex: 0 }));
-    }, []);
     const columns = useMemo(() => {
         if (!viewMetadata)
             return [];
@@ -783,7 +801,7 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
     if (!metadata) {
         return _jsx("div", { className: "text-center text-muted-foreground py-8", children: "Error al cargar la configuraci\u00F3n de la tabla." });
     }
-    return (_jsxs(OptionsContext.Provider, { value: { optionsMap }, children: [_jsxs("div", { className: 'flex flex-col h-full min-h-0 w-full', children: [_jsxs("div", { className: 'pb-4 shrink-0', children: [_jsx(DataTableToolbar, { table: table, searchPlaceholder: metadata.searchPlaceholder || 'Buscar...', filters: filters, activeFilters: dynamicFilters, onDynamicFilterChange: handleDynamicFilterChange, dateFilter: { value: dateRange, onChange: setDateRange, placeholder: 'Filtrar por fecha' }, perPageOptions: metadata.perPageOptions, onRefresh: handleRefresh, isLoading: loadingData, selectedCount: Object.keys(rowSelection).length, onBulkDelete: () => setShowBulkDeleteConfirm(true), extraActions: _jsxs(_Fragment, { children: [viewMetadata?.canExport && (_jsxs(Button, { variant: "outline", size: "sm", className: "h-8", onClick: () => setExportOpen(true), children: [_jsx(Download, { className: "h-4 w-4 mr-1" }), " Exportar"] })), viewMetadata?.canImport && (_jsxs(Button, { variant: "outline", size: "sm", className: "h-8", onClick: () => setImportOpen(true), children: [_jsx(Upload, { className: "h-4 w-4 mr-1" }), " Importar"] }))] }) }), activeFilterChips.length > 0 && (_jsx("div", { className: 'pt-2', children: _jsx(FilterChipsRow, { fields: activeFilterChips, onClearAll: clearAllDynamicFilters, "data-testid": 'table-filter-chips' }) }))] }), _jsxs("div", { ref: infDesktopRoot, className: 'hidden sm:block flex-1 min-h-0 overflow-auto border rounded-md bg-card', children: [_jsxs(Table, { noWrapper: true, className: cn('min-w-max w-full', aggregateColumns.length > 0 && Object.keys(footerTotals).length > 0 && 'h-full'), children: [_jsx(TableHeader, { className: 'sticky top-0 z-10', children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { className: 'border-b-0 hover:bg-transparent', children: headerGroup.headers.map((header) => {
+    return (_jsxs(OptionsContext.Provider, { value: { optionsMap }, children: [_jsxs("div", { className: 'flex flex-col h-full min-h-0 w-full', children: [_jsx("div", { className: 'pb-4 shrink-0', children: _jsx(DataTableToolbar, { table: table, searchPlaceholder: metadata.searchPlaceholder || 'Buscar...', filters: filters, activeFilters: dynamicFilters, onDynamicFilterChange: handleDynamicFilterChange, dateFilter: { value: dateRange, onChange: setDateRange, placeholder: 'Filtrar por fecha' }, perPageOptions: metadata.perPageOptions, onRefresh: handleRefresh, isLoading: loadingData, selectedCount: Object.keys(rowSelection).length, onBulkDelete: () => setShowBulkDeleteConfirm(true), extraActions: _jsxs(_Fragment, { children: [viewMetadata?.canExport && (_jsxs(Button, { variant: "outline", size: "sm", className: "h-8", onClick: () => setExportOpen(true), children: [_jsx(Download, { className: "h-4 w-4 mr-1" }), " Exportar"] })), viewMetadata?.canImport && (_jsxs(Button, { variant: "outline", size: "sm", className: "h-8", onClick: () => setImportOpen(true), children: [_jsx(Upload, { className: "h-4 w-4 mr-1" }), " Importar"] }))] }) }) }), _jsxs("div", { ref: infDesktopRoot, className: 'hidden sm:block flex-1 min-h-0 overflow-auto border rounded-md bg-card', children: [_jsxs(Table, { noWrapper: true, className: cn('min-w-max w-full', aggregateColumns.length > 0 && Object.keys(footerTotals).length > 0 && 'h-full'), children: [_jsx(TableHeader, { className: 'sticky top-0 z-10', children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { className: 'border-b-0 hover:bg-transparent', children: headerGroup.headers.map((header) => {
                                                 const isActionsColumn = header.id === 'actions';
                                                 return (_jsx(TableHead, { colSpan: header.colSpan, style: header.column.columnDef.size ? { width: header.column.columnDef.size } : undefined, className: cn('bg-card border-b h-10', isActionsColumn && 'sticky right-0 z-20 bg-card shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.1)]'), children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }, header.id));
                                             }) }, headerGroup.id))) }), _jsx(TableBody, { children: loadingData && data.length === 0 ? (_jsx(TableSkeleton, {})) : table.getRowModel().rows?.length ? (_jsxs(_Fragment, { children: [table.getRowModel().rows.map((row) => (_jsx(TableRow, { "data-state": row.getIsSelected() && 'selected', className: cn(onRowClick && 'cursor-pointer'), onClick: onRowClick ? () => onRowClick(row.original) : undefined, children: row.getVisibleCells().map((cell) => {

package/dist/use-infinite-scroll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-infinite-scroll.d.ts","sourceRoot":"","sources":["../src/use-infinite-scroll.ts"],"names":[],"mappings":"AAWA;;;GAGG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS;IAAE,EAAE,CAAC,EAAE,GAAG,CAAA;CAAE,EAC/C,QAAQ,EAAE,CAAC,EAAE,EACb,QAAQ,EAAE,CAAC,EAAE,GACZ,CAAC,EAAE,CAWL;AAED,MAAM,WAAW,wBAAwB;IACvC,wEAAwE;IACxE,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,MAAM,WAAW,kBAAkB,CACjC,CAAC,SAAS,WAAW,GAAG,cAAc,EACtC,CAAC,SAAS,WAAW,GAAG,cAAc;IAEtC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,CAAA;IAClC,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,CAAA;CACvC;AAED;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACvC,CAAC,SAAS,WAAW,GAAG,cAAc,EACtC,CAAC,SAAS,WAAW,GAAG,cAAc,EACtC,EACA,UAAU,EACV,QAAgB,EAChB,UAAgB,GACjB,EAAE,wBAAwB,GAAG,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,CAgCrD"}
+{"version":3,"file":"use-infinite-scroll.d.ts","sourceRoot":"","sources":["../src/use-infinite-scroll.ts"],"names":[],"mappings":"AAWA;;;GAGG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS;IAAE,EAAE,CAAC,EAAE,GAAG,CAAA;CAAE,EAC/C,QAAQ,EAAE,CAAC,EAAE,EACb,QAAQ,EAAE,CAAC,EAAE,GACZ,CAAC,EAAE,CAWL;AAED,MAAM,WAAW,wBAAwB;IACvC,wEAAwE;IACxE,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,MAAM,WAAW,kBAAkB,CACjC,CAAC,SAAS,WAAW,GAAG,cAAc,EACtC,CAAC,SAAS,WAAW,GAAG,cAAc;IAEtC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,CAAA;IAClC,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,CAAA;CACvC;AAED;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACvC,CAAC,SAAS,WAAW,GAAG,cAAc,EACtC,CAAC,SAAS,WAAW,GAAG,cAAc,EACtC,EACA,UAAU,EACV,QAAgB,EAChB,UAAgB,GACjB,EAAE,wBAAwB,GAAG,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,CA4CrD"}

package/dist/use-infinite-scroll.js

@@ -37,6 +37,7 @@ export function useInfiniteScrollSentinel({ onLoadMore, disabled = false, rootMa
     const sentinelRef = useRef(null);
     const cb = useRef(onLoadMore);
     const disabledRef = useRef(disabled);
+    const intersectingRef = useRef(false);
     cb.current = onLoadMore;
     disabledRef.current = disabled;
     useEffect(() => {
@@ -47,6 +48,7 @@ export function useInfiniteScrollSentinel({ onLoadMore, disabled = false, rootMa
         }
         const observer = new IntersectionObserver((entries) => {
             for (const entry of entries) {
+                intersectingRef.current = entry.isIntersecting;
                 if (entry.isIntersecting && !disabledRef.current) {
                     cb.current();
                 }
@@ -56,5 +58,15 @@ export function useInfiniteScrollSentinel({ onLoadMore, disabled = false, rootMa
         return () => observer.disconnect();
         // Re-create only when the margin changes; onLoadMore/disabled are read live.
     }, [rootMargin]);
+    // IntersectionObserver only fires on intersection CHANGES. If a loaded page
+    // is too short to push the sentinel out of view (small screens, short
+    // lanes), the sentinel stays intersecting and no further event ever comes —
+    // the list stalls until the user jiggles the scroll. When a load finishes
+    // (disabled flips back to false) and the sentinel is still in view, chain
+    // the next page.
+    useEffect(() => {
+        if (!disabled && intersectingRef.current)
+            cb.current();
+    }, [disabled]);
     return { rootRef, sentinelRef };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "23.9.1",
+  "version": "23.9.2",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",

package/src/dynamic-table.tsx

@@ -67,7 +67,7 @@ import { useApi, useCurrentBranch } from './api-context'
 import type { ColumnFilterConfig, GetDynamicColumns } from './dynamic-columns-shim'
 import { defaultGetDynamicColumns, DATE_CELL_TYPES, aggregateOf, formatAggregateTotal } from './dynamic-columns'
 import { useFacetLoaders, isLongTextColumn } from './use-facet-loaders'
-import { FilterChipsRow, translateOptionLabels, type FilterChipField } from './filter-chips'
+import { translateOptionLabels } from './filter-chips'
 import { dedupeById, useInfiniteScrollSentinel } from './use-infinite-scroll'
 import { OptionsContext } from './options-context'
 import type { TableMetadata, ApiResponse } from './types'
@@ -256,6 +256,11 @@ export function DynamicTable({
         if (Object.keys(filters).length > 0) setDynamicFilters(filters)
     }, []) // eslint-disable-line react-hooks/exhaustive-deps
 
+    // The exact query string this table last wrote to the URL — lets the
+    // resync effect below tell "our own replaceState" apart from an external
+    // rewrite by the host router.
+    const lastSelfSearch = useRef<string | null>(null)
+
     useEffect(() => {
         if (!enableUrlSync || !initializedFromUrl.current) return
         const params = new URLSearchParams()
@@ -287,9 +292,40 @@ export function DynamicTable({
         })
         const search = params.toString()
         const newUrl = search ? `${window.location.pathname}?${search}` : window.location.pathname
+        lastSelfSearch.current = search ? `?${search}` : ''
         window.history.replaceState(null, '', newUrl)
     }, [enableUrlSync, pagination, sorting, globalFilter, dynamicFilters, defaultFilters])
 
+    // The host router can rewrite the query string WITHOUT remounting the
+    // table — e.g. sidebar sibling entries deep-link different `f_` filters
+    // into the same model route. The mount-time init above never re-runs, so
+    // the table kept showing the previous filter. On every render where the
+    // location's search differs from the last URL we ourselves wrote,
+    // re-parse the `f_` params and adopt them.
+    const locationSearch = typeof window !== 'undefined' ? window.location.search : ''
+    useEffect(() => {
+        if (!enableUrlSync || !initializedFromUrl.current) return
+        if (locationSearch === lastSelfSearch.current) return
+        lastSelfSearch.current = locationSearch
+        const params = new URLSearchParams(locationSearch)
+        const filters: Record<string, string[]> = {}
+        params.forEach((rawValue, key) => {
+            if (!key.startsWith('f_')) return
+            const filterKey = key.substring(2)
+            if (defaultFilters && filterKey in defaultFilters) return
+            const value = urlValueToInternal(rawValue)
+            if (value.startsWith('IN:')) filters[filterKey] = value.substring(3).split(',')
+            else filters[filterKey] = [value]
+        })
+        setDynamicFilters((prev: Record<string, string[]>) => {
+            if (JSON.stringify(prev) === JSON.stringify(filters)) return prev
+            setPagination((p: PaginationState) => ({ ...p, pageIndex: 0 }))
+            return filters
+        })
+        const search = params.get('search')
+        if (search !== null) setGlobalFilter(search)
+    })
+
     const prefetchOptions = useCallback(async (endpoints: string[]) => {
         if (endpoints.length === 0) return new Map<string, any[]>()
         const uniqueEndpoints = Array.from(new Set(endpoints))
@@ -790,30 +826,6 @@ export function DynamicTable({
         prefetchFacets(facetFieldsSig.split('|'))
     }, [facetFieldsSig, prefetchFacets])
 
-    // Active-filter chips (shared row with the kanban). One chip per field with a
-    // selection; the label is the translated filter/column label.
-    const activeFilterChips = useMemo<FilterChipField[]>(() => {
-        if (!metadata) return []
-        const out: FilterChipField[] = []
-        for (const [key, config] of columnFilterConfigs) {
-            if ((config.selectedValues?.length ?? 0) === 0) continue
-            const f = metadata.filters?.find((x) => x.key === key)
-            const c = metadata.columns?.find((x) => x.key === key)
-            const rawLabel = f?.label || c?.label || key
-            out.push({
-                key,
-                label: t(rawLabel, { defaultValue: rawLabel }),
-                config,
-            })
-        }
-        return out
-    }, [metadata, columnFilterConfigs, t])
-
-    const clearAllDynamicFilters = useCallback(() => {
-        setDynamicFilters({})
-        setPagination((prev: PaginationState) => ({ ...prev, pageIndex: 0 }))
-    }, [])
-
     const columns = useMemo(() => {
         if (!viewMetadata) return []
         // Row-action column only renders per-row actions. Table-level placements
@@ -933,17 +945,6 @@ export function DynamicTable({
                             </>
                         }
                     />
-                    {/* Active-filter chips — shared with the kanban. Quick
-                        visibility + one-click removal of the header filters. */}
-                    {activeFilterChips.length > 0 && (
-                        <div className='pt-2'>
-                            <FilterChipsRow
-                                fields={activeFilterChips}
-                                onClearAll={clearAllDynamicFilters}
-                                data-testid='table-filter-chips'
-                            />
-                        </div>
-                    )}
                 </div>
                 {/* Desktop: classic horizontal-scroll table. Hidden on phones —
                     a 7-column table forces a wide horizontal scroll there, so we

package/src/use-infinite-scroll.ts

@@ -64,6 +64,7 @@ export function useInfiniteScrollSentinel<
   const sentinelRef = useRef<S | null>(null)
   const cb = useRef(onLoadMore)
   const disabledRef = useRef(disabled)
+  const intersectingRef = useRef(false)
   cb.current = onLoadMore
   disabledRef.current = disabled
 
@@ -78,6 +79,7 @@ export function useInfiniteScrollSentinel<
     const observer = new IntersectionObserver(
       (entries) => {
         for (const entry of entries) {
+          intersectingRef.current = entry.isIntersecting
           if (entry.isIntersecting && !disabledRef.current) {
             cb.current()
           }
@@ -90,5 +92,15 @@ export function useInfiniteScrollSentinel<
     // Re-create only when the margin changes; onLoadMore/disabled are read live.
   }, [rootMargin])
 
+  // IntersectionObserver only fires on intersection CHANGES. If a loaded page
+  // is too short to push the sentinel out of view (small screens, short
+  // lanes), the sentinel stays intersecting and no further event ever comes —
+  // the list stalls until the user jiggles the scroll. When a load finishes
+  // (disabled flips back to false) and the sentinel is still in view, chain
+  // the next page.
+  useEffect(() => {
+    if (!disabled && intersectingRef.current) cb.current()
+  }, [disabled])
+
   return { rootRef, sentinelRef }
 }