@pallasoft/ps-table-components 1.18.1 → 1.19.0

package/dist/components/ps-data-table.js

@@ -7,11 +7,14 @@ const ps_core_components_1 = require("@pallasoft/ps-core-components");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const ps_input_components_1 = require("@pallasoft/ps-input-components");
 const ps_motion_components_1 = require("@pallasoft/ps-motion-components");
+const react_virtual_1 = require("@tanstack/react-virtual");
 const table_config_1 = require("../constants/table-config");
+const use_ps_incremental_count_1 = require("../hooks/use-ps-incremental-count");
 const ps_table_cell_tooltip_service_1 = require("../services/ps-table-cell-tooltip-service");
 const ps_table_column_size_service_1 = require("../services/ps-table-column-size-service");
 const ps_table_group_service_1 = require("../services/ps-table-group-service");
 const ps_table_query_service_1 = require("../services/ps-table-query-service");
+const ps_table_scroll_service_1 = require("../services/ps-table-scroll-service");
 const ps_table_bulk_bar_1 = require("./ps-table-bulk-bar");
 const ps_table_card_list_1 = require("./ps-table-card-list");
 const ps_table_column_picker_1 = require("./ps-table-column-picker");
@@ -64,9 +67,21 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
     const hasToolbar = isSearchable || hasFilters || Boolean(toolbarActions);
     const isSelectable = Boolean(getBulkActions);
     const columnCount = visibleColumns.length + (isSelectable ? 1 : 0);
+    const deferredRows = (0, react_1.useDeferredValue)(rows);
+    const deferredFilters = (0, react_1.useDeferredValue)(filters);
+    const deferredSearch = (0, react_1.useDeferredValue)(search);
+    const deferredSort = (0, react_1.useDeferredValue)(sort);
     const queriedRows = (0, react_1.useMemo)(() => isServerPaginated
-        ? rows
-        : ps_table_query_service_1.PsTableQueryService.apply(rows, columns, filters, search, getSearchText, sort), [columns, filters, getSearchText, isServerPaginated, rows, search, sort]);
+        ? deferredRows
+        : ps_table_query_service_1.PsTableQueryService.apply(deferredRows, columns, deferredFilters, deferredSearch, getSearchText, deferredSort), [
+        columns,
+        deferredFilters,
+        deferredRows,
+        deferredSearch,
+        deferredSort,
+        getSearchText,
+        isServerPaginated,
+    ]);
     const currentPage = page !== null && page !== undefined ? page : uncontrolledPage;
     const rowCount = isServerPaginated ? totalRows : queriedRows.length;
     const pageCount = pageSize ? Math.max(Math.ceil(rowCount / pageSize), 1) : 1;
@@ -149,19 +164,62 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
         updateQuery({ filters: {}, search: '' });
         resetPage();
     };
-    const selectedRows = queriedRows.filter((row) => selectedIds.includes(getRowId(row)));
+    const selectedIdSet = (0, react_1.useMemo)(() => new Set(selectedIds), [selectedIds]);
+    const selectedRows = selectedIds.length === 0 ? [] : queriedRows.filter((row) => selectedIdSet.has(getRowId(row)));
     const pageIds = visibleRows.map((row) => getRowId(row));
-    const isPageSelected = pageIds.length > 0 && pageIds.every((rowId) => selectedIds.includes(rowId));
-    const togglePage = () => setSelectedIds((current) => isPageSelected
-        ? current.filter((rowId) => !pageIds.includes(rowId))
-        : [...new Set([...current, ...pageIds])]);
+    const isPageSelected = pageIds.length > 0 && pageIds.every((rowId) => selectedIdSet.has(rowId));
+    const togglePage = () => setSelectedIds((current) => {
+        const pageIdSet = new Set(pageIds);
+        return isPageSelected
+            ? current.filter((rowId) => !pageIdSet.has(rowId))
+            : [...new Set([...current, ...pageIds])];
+    });
+    const bodyRef = (0, react_1.useRef)(null);
+    const [scrollParent, setScrollParent] = (0, react_1.useState)(null);
+    const [scrollMargin, setScrollMargin] = (0, react_1.useState)(0);
+    const shouldVirtualize = !grouping && visibleRows.length > table_config_1.PsTableConfig.virtualizeAfter;
+    const virtualOptions = {
+        count: shouldVirtualize ? visibleRows.length : 0,
+        estimateSize: () => table_config_1.PsTableConfig.rowEstimatePx[density],
+        getItemKey: (index) => getRowId(visibleRows[index]),
+        initialRect: {
+            height: table_config_1.PsTableConfig.virtualizeAfter * table_config_1.PsTableConfig.rowEstimatePx[density],
+            width: 0,
+        },
+        overscan: table_config_1.PsTableConfig.virtualOverscan,
+        scrollMargin,
+    };
+    const elementVirtualizer = (0, react_virtual_1.useVirtualizer)({
+        ...virtualOptions,
+        count: scrollParent === null ? 0 : virtualOptions.count,
+        getScrollElement: () => scrollParent,
+    });
+    const windowVirtualizer = (0, react_virtual_1.useWindowVirtualizer)({
+        ...virtualOptions,
+        count: scrollParent === null ? virtualOptions.count : 0,
+    });
+    const virtualizer = scrollParent === null ? windowVirtualizer : elementVirtualizer;
+    const virtualItems = shouldVirtualize ? virtualizer.getVirtualItems() : [];
+    const virtualTop = virtualItems.length > 0 ? virtualItems[0].start - scrollMargin : 0;
+    const virtualBottom = virtualItems.length > 0
+        ? virtualizer.getTotalSize() - (virtualItems[virtualItems.length - 1].end - scrollMargin)
+        : 0;
+    const cards = (0, use_ps_incremental_count_1.usePsIncrementalCount)(visibleRows.length, table_config_1.PsTableConfig.cardBatch);
+    (0, react_1.useEffect)(() => {
+        const body = bodyRef.current;
+        if (!shouldVirtualize || body === null)
+            return;
+        const parent = ps_table_scroll_service_1.PsTableScrollService.parent(body);
+        setScrollParent(parent);
+        setScrollMargin(ps_table_scroll_service_1.PsTableScrollService.offset(body, parent));
+    }, [shouldVirtualize, visibleRows.length]);
     const toggleRow = (rowId) => setSelectedIds((current) => current.includes(rowId) ? current.filter((id) => id !== rowId) : [...current, rowId]);
     const renderCardList = (cardRows, emptyContent) => ((0, jsx_runtime_1.jsx)(ps_table_card_list_1.PsTableCardList, { columns: visibleColumns, emptyContent: emptyContent, expandedRowIds: expandedRowIds, footerColumns: hasFooter ? visibleColumns.filter((column) => column.footer !== undefined) : [], getRowId: getRowId, getRowLabel: (row) => (getRowLabel ? getRowLabel(row) : getRowId(row)), isSelectable: isSelectable, onRowClick: onRowClick, onRowHover: onRowHover, onToggleRow: toggleRow, renderExpandedRow: renderExpandedRow, rows: cardRows, selectedIds: selectedIds }));
-    const renderRow = (row, motion) => {
+    const renderRow = (row, motion, virtualItem) => {
         const rowId = getRowId(row);
         const isExpanded = expandedRowIds ? expandedRowIds.includes(rowId) : false;
         const rowLabel = getRowLabel ? getRowLabel(row) : rowId;
-        return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("tr", { "aria-expanded": renderExpandedRow ? isExpanded : undefined, "aria-label": onRowClick ? rowLabel : undefined, className: ps_design_system_1.PallasoftClassNameService.merge('align-middle transition-colors', motion ? motion.className : '', onRowClick ? 'ps-focus-ring cursor-pointer hover:bg-mist/60' : 'hover:bg-mist/40', isExpanded ? 'bg-mist/40' : ''), onClick: onRowClick ? () => onRowClick(row) : undefined, onFocus: onRowHover ? () => onRowHover(row) : undefined, onPointerEnter: onRowHover ? () => onRowHover(row) : undefined, onKeyDown: onRowClick
+        return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("tr", { "data-index": virtualItem ? virtualItem.index : undefined, ref: virtualItem ? virtualizer.measureElement : undefined, "aria-expanded": renderExpandedRow ? isExpanded : undefined, "aria-label": onRowClick ? rowLabel : undefined, className: ps_design_system_1.PallasoftClassNameService.merge('align-middle transition-colors', motion ? motion.className : '', onRowClick ? 'ps-focus-ring cursor-pointer hover:bg-mist/60' : 'hover:bg-mist/40', isExpanded ? 'bg-mist/40' : ''), onClick: onRowClick ? () => onRowClick(row) : undefined, onFocus: onRowHover ? () => onRowHover(row) : undefined, onPointerEnter: onRowHover ? () => onRowHover(row) : undefined, onKeyDown: onRowClick
                         ? (event) => {
                             if (event.target !== event.currentTarget)
                                 return;
@@ -172,7 +230,7 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
                         }
                         : undefined, style: motion && motion.delayMs !== undefined
                         ? { animationDelay: `${motion.delayMs}ms` }
-                        : undefined, tabIndex: onRowClick ? 0 : undefined, children: [isSelectable ? ((0, jsx_runtime_1.jsx)("td", { className: 'w-10 pl-4 pr-0', onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: (0, jsx_runtime_1.jsx)(ps_input_components_1.PsCheckbox, { isSelected: selectedIds.includes(rowId), label: `Select ${rowLabel}`, onChange: () => toggleRow(rowId) }) })) : null, visibleColumns.map((column) => ((0, jsx_runtime_1.jsx)("td", { className: ps_design_system_1.PallasoftClassNameService.merge(densityClassNames[density].cell, alignClassNames[column.align !== null && column.align !== undefined ? column.align : 'left'], column.wrap ? '' : 'whitespace-nowrap', (layout === 'fixed' && !column.wrap) ||
+                        : undefined, tabIndex: onRowClick ? 0 : undefined, children: [isSelectable ? ((0, jsx_runtime_1.jsx)("td", { className: 'w-10 pl-4 pr-0', onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: (0, jsx_runtime_1.jsx)(ps_input_components_1.PsCheckbox, { isSelected: selectedIdSet.has(rowId), label: `Select ${rowLabel}`, onChange: () => toggleRow(rowId) }) })) : null, visibleColumns.map((column) => ((0, jsx_runtime_1.jsx)("td", { className: ps_design_system_1.PallasoftClassNameService.merge(densityClassNames[density].cell, alignClassNames[column.align !== null && column.align !== undefined ? column.align : 'left'], column.wrap ? '' : 'whitespace-nowrap', (layout === 'fixed' && !column.wrap) ||
                                 ps_table_column_size_service_1.PsTableColumnSizeService.maxWidthOf(column) !== undefined
                                 ? 'truncate'
                                 : '', 'text-sm text-ink'), style: columnStyle(column), title: ps_table_cell_tooltip_service_1.PsTableCellTooltipService.forCell(column, row), children: column.render(row) }, column.id)))] }), renderExpandedRow ? ((0, jsx_runtime_1.jsx)("tr", { "aria-hidden": !isExpanded, className: isExpanded ? 'border-t-0' : 'border-0', children: (0, jsx_runtime_1.jsx)("td", { className: 'p-0', colSpan: columnCount, children: (0, jsx_runtime_1.jsx)(ps_motion_components_1.PsCollapse, { isOpen: isExpanded, children: (0, jsx_runtime_1.jsx)("div", { className: 'w-0 min-w-full border-l-2 border-primary bg-mist/40 px-4 py-4', children: renderExpandedRow(row) }) }) }) })) : null] }, rowId));
@@ -187,14 +245,14 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
                 }, onSearchChange: (next) => {
                     updateQuery({ search: next });
                     resetPage();
-                }, rows: rows, search: search, searchPlaceholder: searchPlaceholder })) : null, (0, jsx_runtime_1.jsxs)("div", { className: 'min-w-0 overflow-hidden rounded-[1.25rem] border border-line bg-surface', children: [mobileLayout === 'cards' ? ((0, jsx_runtime_1.jsx)("div", { className: 'sm:hidden', children: grouping
-                            ? groups.map((group, groupIndex) => {
-                                const isExpanded = isGroupExpanded(group.key, groupIndex);
-                                return ((0, jsx_runtime_1.jsxs)("div", { className: 'border-b border-line last:border-b-0', children: [(0, jsx_runtime_1.jsx)(ps_table_group_header_1.PsTableGroupHeader, { count: group.rows.length, isExpanded: isExpanded, label: grouping.getGroupLabel(group.key, group.rows), onToggle: () => toggleGroup(group.key, isExpanded), summary: grouping.renderGroupSummary
-                                                ? grouping.renderGroupSummary(group.rows)
-                                                : undefined }), (0, jsx_runtime_1.jsx)(ps_motion_components_1.PsCollapse, { isOpen: isExpanded && !closingGroupKeys.includes(group.key), children: renderCardList(group.rows, null) })] }, `group-${group.key}`));
-                            })
-                            : renderCardList(visibleRows, visibleRows.length === 0 && isQueried ? ((0, jsx_runtime_1.jsxs)("div", { className: 'px-4 py-10 text-center', children: [(0, jsx_runtime_1.jsx)("p", { className: 'text-sm font-semibold text-ink', children: table_config_1.PsTableConfig.noMatchesTitle }), (0, jsx_runtime_1.jsx)("button", { className: 'ps-focus-ring mt-2 rounded-full px-3 py-1.5 text-sm font-semibold text-primary', onClick: clearFilters, type: 'button', children: "Clear search and filters" })] })) : null) })) : null, (0, jsx_runtime_1.jsx)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-scrollbar overflow-x-auto overflow-y-hidden', mobileLayout === 'cards' ? 'hidden sm:block' : ''), children: (0, jsx_runtime_1.jsxs)("table", { className: ps_design_system_1.PallasoftClassNameService.merge('w-full border-collapse text-left', layout === 'fixed' ? 'table-fixed' : ''), children: [caption ? (0, jsx_runtime_1.jsx)("caption", { className: 'sr-only', children: caption }) : null, (0, jsx_runtime_1.jsx)("thead", { className: 'bg-mist/70 text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-ink/45', children: (0, jsx_runtime_1.jsxs)("tr", { children: [isSelectable ? ((0, jsx_runtime_1.jsx)("th", { className: 'w-10 pl-4 pr-0', scope: 'col', children: (0, jsx_runtime_1.jsx)(ps_input_components_1.PsCheckbox, { isIndeterminate: !isPageSelected && pageIds.some((rowId) => selectedIds.includes(rowId)), isSelected: isPageSelected, label: 'Select all rows on this page', onChange: togglePage }) })) : null, visibleColumns.map((column) => {
+                }, rows: rows, search: search, searchPlaceholder: searchPlaceholder })) : null, (0, jsx_runtime_1.jsxs)("div", { className: 'min-w-0 overflow-hidden rounded-[1.25rem] border border-line bg-surface', children: [mobileLayout === 'cards' ? ((0, jsx_runtime_1.jsxs)("div", { className: 'sm:hidden', children: [grouping
+                                ? groups.map((group, groupIndex) => {
+                                    const isExpanded = isGroupExpanded(group.key, groupIndex);
+                                    return ((0, jsx_runtime_1.jsxs)("div", { className: 'border-b border-line last:border-b-0', children: [(0, jsx_runtime_1.jsx)(ps_table_group_header_1.PsTableGroupHeader, { count: group.rows.length, isExpanded: isExpanded, label: grouping.getGroupLabel(group.key, group.rows), onToggle: () => toggleGroup(group.key, isExpanded), summary: grouping.renderGroupSummary
+                                                    ? grouping.renderGroupSummary(group.rows)
+                                                    : undefined }), (0, jsx_runtime_1.jsx)(ps_motion_components_1.PsCollapse, { isOpen: isExpanded && !closingGroupKeys.includes(group.key), children: renderCardList(group.rows, null) })] }, `group-${group.key}`));
+                                })
+                                : renderCardList(shouldVirtualize ? visibleRows.slice(0, cards.count) : visibleRows, visibleRows.length === 0 && isQueried ? ((0, jsx_runtime_1.jsxs)("div", { className: 'px-4 py-10 text-center', children: [(0, jsx_runtime_1.jsx)("p", { className: 'text-sm font-semibold text-ink', children: table_config_1.PsTableConfig.noMatchesTitle }), (0, jsx_runtime_1.jsx)("button", { className: 'ps-focus-ring mt-2 rounded-full px-3 py-1.5 text-sm font-semibold text-primary', onClick: clearFilters, type: 'button', children: "Clear search and filters" })] })) : null), !grouping && shouldVirtualize && cards.count < visibleRows.length ? ((0, jsx_runtime_1.jsx)("div", { "aria-hidden": 'true', className: 'h-px', ref: cards.sentinelRef })) : null] })) : null, (0, jsx_runtime_1.jsx)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-scrollbar overflow-x-auto overflow-y-hidden', mobileLayout === 'cards' ? 'hidden sm:block' : ''), children: (0, jsx_runtime_1.jsxs)("table", { className: ps_design_system_1.PallasoftClassNameService.merge('w-full border-collapse text-left', layout === 'fixed' ? 'table-fixed' : ''), children: [caption ? (0, jsx_runtime_1.jsx)("caption", { className: 'sr-only', children: caption }) : null, (0, jsx_runtime_1.jsx)("thead", { className: 'bg-mist/70 text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-ink/45', children: (0, jsx_runtime_1.jsxs)("tr", { children: [isSelectable ? ((0, jsx_runtime_1.jsx)("th", { className: 'w-10 pl-4 pr-0', scope: 'col', children: (0, jsx_runtime_1.jsx)(ps_input_components_1.PsCheckbox, { isIndeterminate: !isPageSelected && pageIds.some((rowId) => selectedIdSet.has(rowId)), isSelected: isPageSelected, label: 'Select all rows on this page', onChange: togglePage }) })) : null, visibleColumns.map((column) => {
                                                 const align = column.align !== null && column.align !== undefined ? column.align : 'left';
                                                 const isSorted = sort !== null && sort.columnId === column.id;
                                                 return ((0, jsx_runtime_1.jsx)("th", { "aria-sort": isSorted
@@ -202,7 +260,7 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
                                                         : column.sortValue && isQueryable
                                                             ? 'none'
                                                             : undefined, className: ps_design_system_1.PallasoftClassNameService.merge(densityClassNames[density].head, alignClassNames[align], 'whitespace-nowrap'), scope: 'col', style: columnStyle(column), children: column.sortValue && isQueryable ? ((0, jsx_runtime_1.jsx)(ps_table_sort_header_1.PsTableSortHeader, { align: align, columnId: column.id, label: column.label, onSort: updateSort, sort: sort })) : (column.label) }, column.id));
-                                            })] }) }), (0, jsx_runtime_1.jsxs)("tbody", { className: 'divide-y divide-line', children: [visibleRows.length === 0 && isQueried ? ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsxs)("td", { className: 'px-4 py-12 text-center', colSpan: columnCount, children: [(0, jsx_runtime_1.jsx)("p", { className: 'text-sm font-semibold text-ink', children: table_config_1.PsTableConfig.noMatchesTitle }), (0, jsx_runtime_1.jsx)("p", { className: 'mt-1 text-sm text-ink/55', children: table_config_1.PsTableConfig.noMatchesDescription }), (0, jsx_runtime_1.jsx)("button", { className: 'ps-focus-ring mt-3 rounded-full px-3 py-1.5 text-sm font-semibold text-primary hover:underline', onClick: clearFilters, type: 'button', children: "Clear search and filters" })] }) })) : null, grouping
+                                            })] }) }), (0, jsx_runtime_1.jsxs)("tbody", { className: 'divide-y divide-line', ref: bodyRef, children: [visibleRows.length === 0 && isQueried ? ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsxs)("td", { className: 'px-4 py-12 text-center', colSpan: columnCount, children: [(0, jsx_runtime_1.jsx)("p", { className: 'text-sm font-semibold text-ink', children: table_config_1.PsTableConfig.noMatchesTitle }), (0, jsx_runtime_1.jsx)("p", { className: 'mt-1 text-sm text-ink/55', children: table_config_1.PsTableConfig.noMatchesDescription }), (0, jsx_runtime_1.jsx)("button", { className: 'ps-focus-ring mt-3 rounded-full px-3 py-1.5 text-sm font-semibold text-primary hover:underline', onClick: clearFilters, type: 'button', children: "Clear search and filters" })] }) })) : null, grouping
                                             ? groups.map((group, groupIndex) => {
                                                 const isExpanded = isGroupExpanded(group.key, groupIndex);
                                                 return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { className: 'p-0', colSpan: columnCount, children: (0, jsx_runtime_1.jsx)(ps_table_group_header_1.PsTableGroupHeader, { count: group.rows.length, isExpanded: isExpanded, label: grouping.getGroupLabel(group.key, group.rows), onToggle: () => toggleGroup(group.key, isExpanded), summary: grouping.renderGroupSummary
@@ -211,7 +269,13 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
                                                             ? group.rows.map((row, rowIndex) => renderRow(row, groupRowMotion(group.key, rowIndex)))
                                                             : null] }, `group-${group.key}`));
                                             })
-                                            : visibleRows.map((row) => renderRow(row))] }), hasFooter ? ((0, jsx_runtime_1.jsx)("tfoot", { className: 'border-t-2 border-line bg-mist/50 text-sm font-semibold text-ink', children: (0, jsx_runtime_1.jsxs)("tr", { children: [isSelectable ? (0, jsx_runtime_1.jsx)("td", {}) : null, visibleColumns.map((column) => ((0, jsx_runtime_1.jsx)("td", { className: ps_design_system_1.PallasoftClassNameService.merge(densityClassNames[density].cell, alignClassNames[column.align !== null && column.align !== undefined
+                                            : shouldVirtualize
+                                                ? [
+                                                    (0, jsx_runtime_1.jsx)("tr", { "aria-hidden": 'true', children: (0, jsx_runtime_1.jsx)("td", { className: 'p-0', colSpan: columnCount, style: { height: virtualTop } }) }, 'virtual-top'),
+                                                    ...virtualItems.map((item) => renderRow(visibleRows[item.index], undefined, item)),
+                                                    (0, jsx_runtime_1.jsx)("tr", { "aria-hidden": 'true', children: (0, jsx_runtime_1.jsx)("td", { className: 'p-0', colSpan: columnCount, style: { height: virtualBottom } }) }, 'virtual-bottom'),
+                                                ]
+                                                : visibleRows.map((row) => renderRow(row))] }), hasFooter ? ((0, jsx_runtime_1.jsx)("tfoot", { className: 'border-t-2 border-line bg-mist/50 text-sm font-semibold text-ink', children: (0, jsx_runtime_1.jsxs)("tr", { children: [isSelectable ? (0, jsx_runtime_1.jsx)("td", {}) : null, visibleColumns.map((column) => ((0, jsx_runtime_1.jsx)("td", { className: ps_design_system_1.PallasoftClassNameService.merge(densityClassNames[density].cell, alignClassNames[column.align !== null && column.align !== undefined
                                                     ? column.align
                                                     : 'left'], 'whitespace-nowrap'), children: column.footer }, column.id)))] }) })) : null] }) }), pageSize && (!grouping || isServerPaginated) ? ((0, jsx_runtime_1.jsx)(ps_table_pagination_1.PsTablePagination, { onPageChange: changePage, page: safePage, pageCount: pageCount, pageSize: pageSize, totalRows: rowCount })) : null] })] }));
 };

package/dist/constants/table-config.d.ts

@@ -1,10 +1,19 @@
 export declare const PsTableConfig: {
+    readonly cardBatch: 60;
     readonly groupCloseMs: 160;
     readonly groupOpenMs: 280;
     readonly groupRowStaggerMs: 16;
     readonly groupStaggerLimit: 12;
     readonly noMatchesDescription: "Try a different search or clear the filters.";
     readonly noMatchesTitle: "Nothing matches";
+    readonly rowEstimatePx: {
+        readonly compact: 37;
+        readonly normal: 57;
+    };
     readonly searchPlaceholder: "Search";
     readonly skeletonRows: 6;
+    readonly streamConcurrency: 3;
+    readonly streamFlushMs: 200;
+    readonly virtualOverscan: 12;
+    readonly virtualizeAfter: 100;
 };

package/dist/constants/table-config.js

@@ -2,12 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsTableConfig = void 0;
 exports.PsTableConfig = {
+    cardBatch: 60,
     groupCloseMs: 160,
     groupOpenMs: 280,
     groupRowStaggerMs: 16,
     groupStaggerLimit: 12,
     noMatchesDescription: 'Try a different search or clear the filters.',
     noMatchesTitle: 'Nothing matches',
+    rowEstimatePx: { compact: 37, normal: 57 },
     searchPlaceholder: 'Search',
     skeletonRows: 6,
+    streamConcurrency: 3,
+    streamFlushMs: 200,
+    virtualOverscan: 12,
+    virtualizeAfter: 100,
 };

package/dist/esm/components/ps-data-table.js

@@ -1,14 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Fragment, useMemo, useRef, useState } from 'react';
+import { Fragment, useDeferredValue, useEffect, useMemo, useRef, useState, } from 'react';
 import { PsSkeletonTable } from '@pallasoft/ps-core-components';
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
 import { PsCheckbox } from '@pallasoft/ps-input-components';
 import { PsCollapse } from '@pallasoft/ps-motion-components';
+import { useVirtualizer, useWindowVirtualizer } from '@tanstack/react-virtual';
 import { PsTableConfig } from '../constants/table-config';
+import { usePsIncrementalCount } from '../hooks/use-ps-incremental-count';
 import { PsTableCellTooltipService } from '../services/ps-table-cell-tooltip-service';
 import { PsTableColumnSizeService } from '../services/ps-table-column-size-service';
 import { PsTableGroupService } from '../services/ps-table-group-service';
 import { PsTableQueryService } from '../services/ps-table-query-service';
+import { PsTableScrollService } from '../services/ps-table-scroll-service';
 import { PsTableBulkBar } from './ps-table-bulk-bar';
 import { PsTableCardList } from './ps-table-card-list';
 import { PsTableColumnPicker } from './ps-table-column-picker';
@@ -61,9 +64,21 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
     const hasToolbar = isSearchable || hasFilters || Boolean(toolbarActions);
     const isSelectable = Boolean(getBulkActions);
     const columnCount = visibleColumns.length + (isSelectable ? 1 : 0);
+    const deferredRows = useDeferredValue(rows);
+    const deferredFilters = useDeferredValue(filters);
+    const deferredSearch = useDeferredValue(search);
+    const deferredSort = useDeferredValue(sort);
     const queriedRows = useMemo(() => isServerPaginated
-        ? rows
-        : PsTableQueryService.apply(rows, columns, filters, search, getSearchText, sort), [columns, filters, getSearchText, isServerPaginated, rows, search, sort]);
+        ? deferredRows
+        : PsTableQueryService.apply(deferredRows, columns, deferredFilters, deferredSearch, getSearchText, deferredSort), [
+        columns,
+        deferredFilters,
+        deferredRows,
+        deferredSearch,
+        deferredSort,
+        getSearchText,
+        isServerPaginated,
+    ]);
     const currentPage = page !== null && page !== undefined ? page : uncontrolledPage;
     const rowCount = isServerPaginated ? totalRows : queriedRows.length;
     const pageCount = pageSize ? Math.max(Math.ceil(rowCount / pageSize), 1) : 1;
@@ -146,19 +161,62 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
         updateQuery({ filters: {}, search: '' });
         resetPage();
     };
-    const selectedRows = queriedRows.filter((row) => selectedIds.includes(getRowId(row)));
+    const selectedIdSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+    const selectedRows = selectedIds.length === 0 ? [] : queriedRows.filter((row) => selectedIdSet.has(getRowId(row)));
     const pageIds = visibleRows.map((row) => getRowId(row));
-    const isPageSelected = pageIds.length > 0 && pageIds.every((rowId) => selectedIds.includes(rowId));
-    const togglePage = () => setSelectedIds((current) => isPageSelected
-        ? current.filter((rowId) => !pageIds.includes(rowId))
-        : [...new Set([...current, ...pageIds])]);
+    const isPageSelected = pageIds.length > 0 && pageIds.every((rowId) => selectedIdSet.has(rowId));
+    const togglePage = () => setSelectedIds((current) => {
+        const pageIdSet = new Set(pageIds);
+        return isPageSelected
+            ? current.filter((rowId) => !pageIdSet.has(rowId))
+            : [...new Set([...current, ...pageIds])];
+    });
+    const bodyRef = useRef(null);
+    const [scrollParent, setScrollParent] = useState(null);
+    const [scrollMargin, setScrollMargin] = useState(0);
+    const shouldVirtualize = !grouping && visibleRows.length > PsTableConfig.virtualizeAfter;
+    const virtualOptions = {
+        count: shouldVirtualize ? visibleRows.length : 0,
+        estimateSize: () => PsTableConfig.rowEstimatePx[density],
+        getItemKey: (index) => getRowId(visibleRows[index]),
+        initialRect: {
+            height: PsTableConfig.virtualizeAfter * PsTableConfig.rowEstimatePx[density],
+            width: 0,
+        },
+        overscan: PsTableConfig.virtualOverscan,
+        scrollMargin,
+    };
+    const elementVirtualizer = useVirtualizer({
+        ...virtualOptions,
+        count: scrollParent === null ? 0 : virtualOptions.count,
+        getScrollElement: () => scrollParent,
+    });
+    const windowVirtualizer = useWindowVirtualizer({
+        ...virtualOptions,
+        count: scrollParent === null ? virtualOptions.count : 0,
+    });
+    const virtualizer = scrollParent === null ? windowVirtualizer : elementVirtualizer;
+    const virtualItems = shouldVirtualize ? virtualizer.getVirtualItems() : [];
+    const virtualTop = virtualItems.length > 0 ? virtualItems[0].start - scrollMargin : 0;
+    const virtualBottom = virtualItems.length > 0
+        ? virtualizer.getTotalSize() - (virtualItems[virtualItems.length - 1].end - scrollMargin)
+        : 0;
+    const cards = usePsIncrementalCount(visibleRows.length, PsTableConfig.cardBatch);
+    useEffect(() => {
+        const body = bodyRef.current;
+        if (!shouldVirtualize || body === null)
+            return;
+        const parent = PsTableScrollService.parent(body);
+        setScrollParent(parent);
+        setScrollMargin(PsTableScrollService.offset(body, parent));
+    }, [shouldVirtualize, visibleRows.length]);
     const toggleRow = (rowId) => setSelectedIds((current) => current.includes(rowId) ? current.filter((id) => id !== rowId) : [...current, rowId]);
     const renderCardList = (cardRows, emptyContent) => (_jsx(PsTableCardList, { columns: visibleColumns, emptyContent: emptyContent, expandedRowIds: expandedRowIds, footerColumns: hasFooter ? visibleColumns.filter((column) => column.footer !== undefined) : [], getRowId: getRowId, getRowLabel: (row) => (getRowLabel ? getRowLabel(row) : getRowId(row)), isSelectable: isSelectable, onRowClick: onRowClick, onRowHover: onRowHover, onToggleRow: toggleRow, renderExpandedRow: renderExpandedRow, rows: cardRows, selectedIds: selectedIds }));
-    const renderRow = (row, motion) => {
+    const renderRow = (row, motion, virtualItem) => {
         const rowId = getRowId(row);
         const isExpanded = expandedRowIds ? expandedRowIds.includes(rowId) : false;
         const rowLabel = getRowLabel ? getRowLabel(row) : rowId;
-        return (_jsxs(Fragment, { children: [_jsxs("tr", { "aria-expanded": renderExpandedRow ? isExpanded : undefined, "aria-label": onRowClick ? rowLabel : undefined, className: PallasoftClassNameService.merge('align-middle transition-colors', motion ? motion.className : '', onRowClick ? 'ps-focus-ring cursor-pointer hover:bg-mist/60' : 'hover:bg-mist/40', isExpanded ? 'bg-mist/40' : ''), onClick: onRowClick ? () => onRowClick(row) : undefined, onFocus: onRowHover ? () => onRowHover(row) : undefined, onPointerEnter: onRowHover ? () => onRowHover(row) : undefined, onKeyDown: onRowClick
+        return (_jsxs(Fragment, { children: [_jsxs("tr", { "data-index": virtualItem ? virtualItem.index : undefined, ref: virtualItem ? virtualizer.measureElement : undefined, "aria-expanded": renderExpandedRow ? isExpanded : undefined, "aria-label": onRowClick ? rowLabel : undefined, className: PallasoftClassNameService.merge('align-middle transition-colors', motion ? motion.className : '', onRowClick ? 'ps-focus-ring cursor-pointer hover:bg-mist/60' : 'hover:bg-mist/40', isExpanded ? 'bg-mist/40' : ''), onClick: onRowClick ? () => onRowClick(row) : undefined, onFocus: onRowHover ? () => onRowHover(row) : undefined, onPointerEnter: onRowHover ? () => onRowHover(row) : undefined, onKeyDown: onRowClick
                         ? (event) => {
                             if (event.target !== event.currentTarget)
                                 return;
@@ -169,7 +227,7 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
                         }
                         : undefined, style: motion && motion.delayMs !== undefined
                         ? { animationDelay: `${motion.delayMs}ms` }
-                        : undefined, tabIndex: onRowClick ? 0 : undefined, children: [isSelectable ? (_jsx("td", { className: 'w-10 pl-4 pr-0', onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: _jsx(PsCheckbox, { isSelected: selectedIds.includes(rowId), label: `Select ${rowLabel}`, onChange: () => toggleRow(rowId) }) })) : null, visibleColumns.map((column) => (_jsx("td", { className: PallasoftClassNameService.merge(densityClassNames[density].cell, alignClassNames[column.align !== null && column.align !== undefined ? column.align : 'left'], column.wrap ? '' : 'whitespace-nowrap', (layout === 'fixed' && !column.wrap) ||
+                        : undefined, tabIndex: onRowClick ? 0 : undefined, children: [isSelectable ? (_jsx("td", { className: 'w-10 pl-4 pr-0', onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: _jsx(PsCheckbox, { isSelected: selectedIdSet.has(rowId), label: `Select ${rowLabel}`, onChange: () => toggleRow(rowId) }) })) : null, visibleColumns.map((column) => (_jsx("td", { className: PallasoftClassNameService.merge(densityClassNames[density].cell, alignClassNames[column.align !== null && column.align !== undefined ? column.align : 'left'], column.wrap ? '' : 'whitespace-nowrap', (layout === 'fixed' && !column.wrap) ||
                                 PsTableColumnSizeService.maxWidthOf(column) !== undefined
                                 ? 'truncate'
                                 : '', 'text-sm text-ink'), style: columnStyle(column), title: PsTableCellTooltipService.forCell(column, row), children: column.render(row) }, column.id)))] }), renderExpandedRow ? (_jsx("tr", { "aria-hidden": !isExpanded, className: isExpanded ? 'border-t-0' : 'border-0', children: _jsx("td", { className: 'p-0', colSpan: columnCount, children: _jsx(PsCollapse, { isOpen: isExpanded, children: _jsx("div", { className: 'w-0 min-w-full border-l-2 border-primary bg-mist/40 px-4 py-4', children: renderExpandedRow(row) }) }) }) })) : null] }, rowId));
@@ -184,14 +242,14 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
                 }, onSearchChange: (next) => {
                     updateQuery({ search: next });
                     resetPage();
-                }, rows: rows, search: search, searchPlaceholder: searchPlaceholder })) : null, _jsxs("div", { className: 'min-w-0 overflow-hidden rounded-[1.25rem] border border-line bg-surface', children: [mobileLayout === 'cards' ? (_jsx("div", { className: 'sm:hidden', children: grouping
-                            ? groups.map((group, groupIndex) => {
-                                const isExpanded = isGroupExpanded(group.key, groupIndex);
-                                return (_jsxs("div", { className: 'border-b border-line last:border-b-0', children: [_jsx(PsTableGroupHeader, { count: group.rows.length, isExpanded: isExpanded, label: grouping.getGroupLabel(group.key, group.rows), onToggle: () => toggleGroup(group.key, isExpanded), summary: grouping.renderGroupSummary
-                                                ? grouping.renderGroupSummary(group.rows)
-                                                : undefined }), _jsx(PsCollapse, { isOpen: isExpanded && !closingGroupKeys.includes(group.key), children: renderCardList(group.rows, null) })] }, `group-${group.key}`));
-                            })
-                            : renderCardList(visibleRows, visibleRows.length === 0 && isQueried ? (_jsxs("div", { className: 'px-4 py-10 text-center', children: [_jsx("p", { className: 'text-sm font-semibold text-ink', children: PsTableConfig.noMatchesTitle }), _jsx("button", { className: 'ps-focus-ring mt-2 rounded-full px-3 py-1.5 text-sm font-semibold text-primary', onClick: clearFilters, type: 'button', children: "Clear search and filters" })] })) : null) })) : null, _jsx("div", { className: PallasoftClassNameService.merge('ps-scrollbar overflow-x-auto overflow-y-hidden', mobileLayout === 'cards' ? 'hidden sm:block' : ''), children: _jsxs("table", { className: PallasoftClassNameService.merge('w-full border-collapse text-left', layout === 'fixed' ? 'table-fixed' : ''), children: [caption ? _jsx("caption", { className: 'sr-only', children: caption }) : null, _jsx("thead", { className: 'bg-mist/70 text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-ink/45', children: _jsxs("tr", { children: [isSelectable ? (_jsx("th", { className: 'w-10 pl-4 pr-0', scope: 'col', children: _jsx(PsCheckbox, { isIndeterminate: !isPageSelected && pageIds.some((rowId) => selectedIds.includes(rowId)), isSelected: isPageSelected, label: 'Select all rows on this page', onChange: togglePage }) })) : null, visibleColumns.map((column) => {
+                }, rows: rows, search: search, searchPlaceholder: searchPlaceholder })) : null, _jsxs("div", { className: 'min-w-0 overflow-hidden rounded-[1.25rem] border border-line bg-surface', children: [mobileLayout === 'cards' ? (_jsxs("div", { className: 'sm:hidden', children: [grouping
+                                ? groups.map((group, groupIndex) => {
+                                    const isExpanded = isGroupExpanded(group.key, groupIndex);
+                                    return (_jsxs("div", { className: 'border-b border-line last:border-b-0', children: [_jsx(PsTableGroupHeader, { count: group.rows.length, isExpanded: isExpanded, label: grouping.getGroupLabel(group.key, group.rows), onToggle: () => toggleGroup(group.key, isExpanded), summary: grouping.renderGroupSummary
+                                                    ? grouping.renderGroupSummary(group.rows)
+                                                    : undefined }), _jsx(PsCollapse, { isOpen: isExpanded && !closingGroupKeys.includes(group.key), children: renderCardList(group.rows, null) })] }, `group-${group.key}`));
+                                })
+                                : renderCardList(shouldVirtualize ? visibleRows.slice(0, cards.count) : visibleRows, visibleRows.length === 0 && isQueried ? (_jsxs("div", { className: 'px-4 py-10 text-center', children: [_jsx("p", { className: 'text-sm font-semibold text-ink', children: PsTableConfig.noMatchesTitle }), _jsx("button", { className: 'ps-focus-ring mt-2 rounded-full px-3 py-1.5 text-sm font-semibold text-primary', onClick: clearFilters, type: 'button', children: "Clear search and filters" })] })) : null), !grouping && shouldVirtualize && cards.count < visibleRows.length ? (_jsx("div", { "aria-hidden": 'true', className: 'h-px', ref: cards.sentinelRef })) : null] })) : null, _jsx("div", { className: PallasoftClassNameService.merge('ps-scrollbar overflow-x-auto overflow-y-hidden', mobileLayout === 'cards' ? 'hidden sm:block' : ''), children: _jsxs("table", { className: PallasoftClassNameService.merge('w-full border-collapse text-left', layout === 'fixed' ? 'table-fixed' : ''), children: [caption ? _jsx("caption", { className: 'sr-only', children: caption }) : null, _jsx("thead", { className: 'bg-mist/70 text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-ink/45', children: _jsxs("tr", { children: [isSelectable ? (_jsx("th", { className: 'w-10 pl-4 pr-0', scope: 'col', children: _jsx(PsCheckbox, { isIndeterminate: !isPageSelected && pageIds.some((rowId) => selectedIdSet.has(rowId)), isSelected: isPageSelected, label: 'Select all rows on this page', onChange: togglePage }) })) : null, visibleColumns.map((column) => {
                                                 const align = column.align !== null && column.align !== undefined ? column.align : 'left';
                                                 const isSorted = sort !== null && sort.columnId === column.id;
                                                 return (_jsx("th", { "aria-sort": isSorted
@@ -199,7 +257,7 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
                                                         : column.sortValue && isQueryable
                                                             ? 'none'
                                                             : undefined, className: PallasoftClassNameService.merge(densityClassNames[density].head, alignClassNames[align], 'whitespace-nowrap'), scope: 'col', style: columnStyle(column), children: column.sortValue && isQueryable ? (_jsx(PsTableSortHeader, { align: align, columnId: column.id, label: column.label, onSort: updateSort, sort: sort })) : (column.label) }, column.id));
-                                            })] }) }), _jsxs("tbody", { className: 'divide-y divide-line', children: [visibleRows.length === 0 && isQueried ? (_jsx("tr", { children: _jsxs("td", { className: 'px-4 py-12 text-center', colSpan: columnCount, children: [_jsx("p", { className: 'text-sm font-semibold text-ink', children: PsTableConfig.noMatchesTitle }), _jsx("p", { className: 'mt-1 text-sm text-ink/55', children: PsTableConfig.noMatchesDescription }), _jsx("button", { className: 'ps-focus-ring mt-3 rounded-full px-3 py-1.5 text-sm font-semibold text-primary hover:underline', onClick: clearFilters, type: 'button', children: "Clear search and filters" })] }) })) : null, grouping
+                                            })] }) }), _jsxs("tbody", { className: 'divide-y divide-line', ref: bodyRef, children: [visibleRows.length === 0 && isQueried ? (_jsx("tr", { children: _jsxs("td", { className: 'px-4 py-12 text-center', colSpan: columnCount, children: [_jsx("p", { className: 'text-sm font-semibold text-ink', children: PsTableConfig.noMatchesTitle }), _jsx("p", { className: 'mt-1 text-sm text-ink/55', children: PsTableConfig.noMatchesDescription }), _jsx("button", { className: 'ps-focus-ring mt-3 rounded-full px-3 py-1.5 text-sm font-semibold text-primary hover:underline', onClick: clearFilters, type: 'button', children: "Clear search and filters" })] }) })) : null, grouping
                                             ? groups.map((group, groupIndex) => {
                                                 const isExpanded = isGroupExpanded(group.key, groupIndex);
                                                 return (_jsxs(Fragment, { children: [_jsx("tr", { children: _jsx("td", { className: 'p-0', colSpan: columnCount, children: _jsx(PsTableGroupHeader, { count: group.rows.length, isExpanded: isExpanded, label: grouping.getGroupLabel(group.key, group.rows), onToggle: () => toggleGroup(group.key, isExpanded), summary: grouping.renderGroupSummary
@@ -208,7 +266,13 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
                                                             ? group.rows.map((row, rowIndex) => renderRow(row, groupRowMotion(group.key, rowIndex)))
                                                             : null] }, `group-${group.key}`));
                                             })
-                                            : visibleRows.map((row) => renderRow(row))] }), hasFooter ? (_jsx("tfoot", { className: 'border-t-2 border-line bg-mist/50 text-sm font-semibold text-ink', children: _jsxs("tr", { children: [isSelectable ? _jsx("td", {}) : null, visibleColumns.map((column) => (_jsx("td", { className: PallasoftClassNameService.merge(densityClassNames[density].cell, alignClassNames[column.align !== null && column.align !== undefined
+                                            : shouldVirtualize
+                                                ? [
+                                                    _jsx("tr", { "aria-hidden": 'true', children: _jsx("td", { className: 'p-0', colSpan: columnCount, style: { height: virtualTop } }) }, 'virtual-top'),
+                                                    ...virtualItems.map((item) => renderRow(visibleRows[item.index], undefined, item)),
+                                                    _jsx("tr", { "aria-hidden": 'true', children: _jsx("td", { className: 'p-0', colSpan: columnCount, style: { height: virtualBottom } }) }, 'virtual-bottom'),
+                                                ]
+                                                : visibleRows.map((row) => renderRow(row))] }), hasFooter ? (_jsx("tfoot", { className: 'border-t-2 border-line bg-mist/50 text-sm font-semibold text-ink', children: _jsxs("tr", { children: [isSelectable ? _jsx("td", {}) : null, visibleColumns.map((column) => (_jsx("td", { className: PallasoftClassNameService.merge(densityClassNames[density].cell, alignClassNames[column.align !== null && column.align !== undefined
                                                     ? column.align
                                                     : 'left'], 'whitespace-nowrap'), children: column.footer }, column.id)))] }) })) : null] }) }), pageSize && (!grouping || isServerPaginated) ? (_jsx(PsTablePagination, { onPageChange: changePage, page: safePage, pageCount: pageCount, pageSize: pageSize, totalRows: rowCount })) : null] })] }));
 };

package/dist/esm/constants/table-config.js

@@ -1,10 +1,16 @@
 export const PsTableConfig = {
+    cardBatch: 60,
     groupCloseMs: 160,
     groupOpenMs: 280,
     groupRowStaggerMs: 16,
     groupStaggerLimit: 12,
     noMatchesDescription: 'Try a different search or clear the filters.',
     noMatchesTitle: 'Nothing matches',
+    rowEstimatePx: { compact: 37, normal: 57 },
     searchPlaceholder: 'Search',
     skeletonRows: 6,
+    streamConcurrency: 3,
+    streamFlushMs: 200,
+    virtualOverscan: 12,
+    virtualizeAfter: 100,
 };

package/dist/esm/hooks/use-ps-incremental-count.js

@@ -0,0 +1,17 @@
+import { useEffect, useRef, useState } from 'react';
+export const usePsIncrementalCount = (total, batch) => {
+    const [count, setCount] = useState(batch);
+    const sentinelRef = useRef(null);
+    useEffect(() => {
+        const sentinel = sentinelRef.current;
+        if (sentinel === null || count >= total)
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            if (entries.some((entry) => entry.isIntersecting))
+                setCount((current) => Math.min(current + batch, total));
+        });
+        observer.observe(sentinel);
+        return () => observer.disconnect();
+    }, [batch, count, total]);
+    return { count: Math.min(count, total), sentinelRef };
+};

package/dist/esm/hooks/use-ps-streamed-rows.js

@@ -1,41 +1,84 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { startTransition, useEffect, useMemo, useRef, useState } from 'react';
+import { PsTableConfig } from '../constants/table-config';
 import { PsTableStreamService } from '../services/ps-table-stream-service';
 export const usePsStreamedRows = ({ first, getRowId, loadPage, pageSize, scope, total, }) => {
     const [stream, setStream] = useState({
         first,
         hasFailed: false,
+        isDone: first.length >= total,
         previous: [],
         rows: first,
         scope,
     });
     const rowId = useRef(getRowId);
     const load = useRef(loadPage);
-    const requested = useRef(null);
     rowId.current = getRowId;
     load.current = loadPage;
     if (stream.first !== first)
         setStream({
             first,
             hasFailed: false,
+            isDone: first.length >= total,
             previous: PsTableStreamService.carried(stream.rows, stream.previous, getRowId, total, stream.scope === scope),
             rows: first,
             scope,
         });
-    const nextPage = stream.hasFailed
-        ? null
-        : PsTableStreamService.nextPage(stream.rows.length, total, pageSize);
     useEffect(() => {
-        if (nextPage === null || requested.current === stream.rows)
+        const pages = PsTableStreamService.pages(first.length, total, pageSize);
+        if (pages.length === 0)
             return;
-        const base = stream.rows;
-        requested.current = base;
-        load.current(nextPage).then((page) => setStream((current) => current.rows !== base
-            ? current
-            : page.length === 0
-                ? { ...current, hasFailed: true }
-                : { ...current, rows: PsTableStreamService.append(current.rows, page, rowId.current) }), () => setStream((current) => (current.rows !== base ? current : { ...current, hasFailed: true })));
-    }, [nextPage, stream.rows]);
-    const isStreaming = nextPage !== null;
+        const seen = new Set(first.map((row) => rowId.current(row)));
+        const loaded = new Map();
+        let isCancelled = false;
+        let nextIndex = 0;
+        let nextToAppend = pages[0];
+        let pending = [];
+        let timer = null;
+        const commit = (patch) => {
+            const added = pending;
+            pending = [];
+            timer = null;
+            startTransition(() => setStream((current) => current.first !== first
+                ? current
+                : {
+                    ...current,
+                    ...patch,
+                    rows: added.length === 0 ? current.rows : current.rows.concat(added),
+                }));
+        };
+        const work = async () => {
+            while (!isCancelled && nextIndex < pages.length) {
+                const page = pages[nextIndex];
+                nextIndex += 1;
+                loaded.set(page, await load.current(page));
+                if (isCancelled)
+                    return;
+                for (let ready = loaded.get(nextToAppend); ready !== undefined;) {
+                    pending = pending.concat(PsTableStreamService.unseen(ready, seen, rowId.current));
+                    loaded.delete(nextToAppend);
+                    nextToAppend += 1;
+                    ready = loaded.get(nextToAppend);
+                }
+                if (timer === null)
+                    timer = setTimeout(() => commit({ hasFailed: false, isDone: false }), PsTableConfig.streamFlushMs);
+            }
+        };
+        const finish = (hasFailed) => {
+            if (isCancelled)
+                return;
+            if (timer !== null)
+                clearTimeout(timer);
+            isCancelled = true;
+            commit({ hasFailed, isDone: !hasFailed });
+        };
+        void Promise.all(Array.from({ length: Math.min(PsTableConfig.streamConcurrency, pages.length) }, work)).then(() => finish(false), () => finish(true));
+        return () => {
+            isCancelled = true;
+            if (timer !== null)
+                clearTimeout(timer);
+        };
+    }, [first, pageSize, total]);
+    const isStreaming = !stream.hasFailed && !stream.isDone;
     const rows = useMemo(() => isStreaming
         ? PsTableStreamService.merge(stream.rows, stream.previous, rowId.current, total)
         : stream.rows, [isStreaming, stream.previous, stream.rows, total]);

package/dist/esm/index.js

@@ -18,6 +18,7 @@ export * from './interfaces/table-sort';
 export * from './interfaces/table-stream-input';
 export * from './interfaces/table-stream-result';
 export * from './interfaces/table-stream-status';
+export * from './hooks/use-ps-incremental-count';
 export * from './hooks/use-ps-streamed-rows';
 export * from './hooks/use-ps-table-stream-status';
 export * from './services/ps-table-cell-tooltip-service';
@@ -25,6 +26,7 @@ export * from './services/ps-table-column-size-service';
 export * from './services/ps-table-group-service';
 export * from './services/ps-table-query-service';
 export * from './services/ps-table-search-service';
+export * from './services/ps-table-scroll-service';
 export * from './services/ps-table-stream-service';
 export * from './components/ps-table-export-button';
 export * from './constants/ps-table-download-config';

package/dist/esm/services/ps-table-query-service.js

@@ -37,26 +37,37 @@ export class PsTableQueryService {
         return true;
     }
     static apply(rows, columns, filters, search, getSearchText, sort) {
-        const filtered = rows.filter((row) => (!getSearchText || PsTableSearchService.matches(getSearchText(row), search)) &&
-            columns.every((column) => PsTableQueryService.matchesFilter(row, column, filters[column.id] ? filters[column.id] : {})));
+        const tokens = getSearchText ? PsTableSearchService.tokens(search) : [];
+        const activeColumns = columns.filter((column) => column.filter && PsTableQueryService.isActive(filters[column.id]));
+        const filtered = tokens.length === 0 && activeColumns.length === 0
+            ? rows
+            : rows.filter((row) => (tokens.length === 0 ||
+                (getSearchText !== undefined &&
+                    PsTableSearchService.matchesTokens(PsTableSearchService.haystack(row, getSearchText), tokens))) &&
+                activeColumns.every((column) => PsTableQueryService.matchesFilter(row, column, filters[column.id])));
         const sortColumn = sort ? columns.find((column) => column.id === sort.columnId) : undefined;
         if (!sort || !sortColumn || !sortColumn.sortValue)
             return filtered;
         const getValue = sortColumn.sortValue;
         const direction = sort.direction === 'ascending' ? 1 : -1;
-        return [...filtered].sort((left, right) => {
-            const a = getValue(left);
-            const b = getValue(right);
-            if (a === b)
-                return 0;
-            if (a === null)
+        return filtered
+            .map((row, index) => ({ index, row, value: getValue(row) }))
+            .sort((left, right) => {
+            if (left.value === null && right.value !== null)
                 return 1;
-            if (b === null)
+            if (right.value === null && left.value !== null)
                 return -1;
-            if (typeof a === 'number' && typeof b === 'number')
-                return (a - b) * direction;
-            return String(a).localeCompare(String(b), undefined, { numeric: true }) * direction;
-        });
+            const order = PsTableQueryService.compare(left.value, right.value);
+            return order === 0 ? left.index - right.index : order * direction;
+        })
+            .map((entry) => entry.row);
+    }
+    static compare(a, b) {
+        if (a === b || a === null || b === null)
+            return 0;
+        if (typeof a === 'number' && typeof b === 'number')
+            return a - b;
+        return PsTableQueryService.collator.compare(String(a), String(b));
     }
     static options(rows, column) {
         if (!column.filter)
@@ -91,3 +102,4 @@ export class PsTableQueryService {
         return null;
     }
 }
+PsTableQueryService.collator = new Intl.Collator(undefined, { numeric: true });

package/dist/esm/services/ps-table-scroll-service.js

@@ -0,0 +1,18 @@
+export class PsTableScrollService {
+    static parent(element) {
+        for (let node = element.parentElement; node !== null; node = node.parentElement) {
+            if (node === document.body || node === document.documentElement)
+                return null;
+            if (PsTableScrollService.scrollable.test(getComputedStyle(node).overflowY))
+                return node;
+        }
+        return null;
+    }
+    static offset(element, parent) {
+        const top = element.getBoundingClientRect().top;
+        return parent === null
+            ? top + window.scrollY
+            : top - parent.getBoundingClientRect().top + parent.scrollTop;
+    }
+}
+PsTableScrollService.scrollable = /(auto|scroll|overlay)/;

package/dist/esm/services/ps-table-search-service.js

@@ -15,10 +15,20 @@ export class PsTableSearchService {
         return normalised === '' ? [] : normalised.split(' ');
     }
     static matches(text, query) {
-        const tokens = PsTableSearchService.tokens(query);
-        if (tokens.length === 0)
-            return true;
-        const haystack = PsTableSearchService.normalise(text);
+        return PsTableSearchService.matchesTokens(PsTableSearchService.normalise(text), PsTableSearchService.tokens(query));
+    }
+    static matchesTokens(haystack, tokens) {
         return tokens.every((token) => haystack.includes(token));
     }
+    static haystack(row, getSearchText) {
+        if (typeof row !== 'object' || row === null)
+            return PsTableSearchService.normalise(getSearchText(row));
+        const cached = PsTableSearchService.haystacks.get(row);
+        if (cached !== undefined)
+            return cached;
+        const haystack = PsTableSearchService.normalise(getSearchText(row));
+        PsTableSearchService.haystacks.set(row, haystack);
+        return haystack;
+    }
 }
+PsTableSearchService.haystacks = new WeakMap();

package/dist/esm/services/ps-table-stream-service.js

@@ -2,7 +2,25 @@ export class PsTableStreamService {
     static nextPage(loaded, total, pageSize) {
         return loaded < total ? Math.floor(loaded / pageSize) + 1 : null;
     }
+    static pages(loaded, total, pageSize) {
+        const first = PsTableStreamService.nextPage(loaded, total, pageSize);
+        if (first === null)
+            return [];
+        const last = Math.ceil(total / pageSize);
+        return Array.from({ length: last - first + 1 }, (_, index) => first + index);
+    }
+    static unseen(page, seen, getRowId) {
+        return page.filter((row) => {
+            const rowId = getRowId(row);
+            if (seen.has(rowId))
+                return false;
+            seen.add(rowId);
+            return true;
+        });
+    }
     static merge(fresh, previous, getRowId, total) {
+        if (previous.length === 0)
+            return fresh.length > total ? fresh.slice(0, total) : fresh;
         const freshIds = new Set(fresh.map(getRowId));
         return [...fresh, ...previous.filter((row) => !freshIds.has(getRowId(row)))].slice(0, total);
     }

package/dist/hooks/use-ps-incremental-count.d.ts

@@ -0,0 +1,5 @@
+import { type RefObject } from 'react';
+export declare const usePsIncrementalCount: (total: number, batch: number) => {
+    count: number;
+    sentinelRef: RefObject<HTMLDivElement>;
+};

package/dist/hooks/use-ps-incremental-count.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsIncrementalCount = void 0;
+const react_1 = require("react");
+const usePsIncrementalCount = (total, batch) => {
+    const [count, setCount] = (0, react_1.useState)(batch);
+    const sentinelRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const sentinel = sentinelRef.current;
+        if (sentinel === null || count >= total)
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            if (entries.some((entry) => entry.isIntersecting))
+                setCount((current) => Math.min(current + batch, total));
+        });
+        observer.observe(sentinel);
+        return () => observer.disconnect();
+    }, [batch, count, total]);
+    return { count: Math.min(count, total), sentinelRef };
+};
+exports.usePsIncrementalCount = usePsIncrementalCount;

package/dist/hooks/use-ps-streamed-rows.js

@@ -2,43 +2,86 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePsStreamedRows = void 0;
 const react_1 = require("react");
+const table_config_1 = require("../constants/table-config");
 const ps_table_stream_service_1 = require("../services/ps-table-stream-service");
 const usePsStreamedRows = ({ first, getRowId, loadPage, pageSize, scope, total, }) => {
     const [stream, setStream] = (0, react_1.useState)({
         first,
         hasFailed: false,
+        isDone: first.length >= total,
         previous: [],
         rows: first,
         scope,
     });
     const rowId = (0, react_1.useRef)(getRowId);
     const load = (0, react_1.useRef)(loadPage);
-    const requested = (0, react_1.useRef)(null);
     rowId.current = getRowId;
     load.current = loadPage;
     if (stream.first !== first)
         setStream({
             first,
             hasFailed: false,
+            isDone: first.length >= total,
             previous: ps_table_stream_service_1.PsTableStreamService.carried(stream.rows, stream.previous, getRowId, total, stream.scope === scope),
             rows: first,
             scope,
         });
-    const nextPage = stream.hasFailed
-        ? null
-        : ps_table_stream_service_1.PsTableStreamService.nextPage(stream.rows.length, total, pageSize);
     (0, react_1.useEffect)(() => {
-        if (nextPage === null || requested.current === stream.rows)
+        const pages = ps_table_stream_service_1.PsTableStreamService.pages(first.length, total, pageSize);
+        if (pages.length === 0)
             return;
-        const base = stream.rows;
-        requested.current = base;
-        load.current(nextPage).then((page) => setStream((current) => current.rows !== base
-            ? current
-            : page.length === 0
-                ? { ...current, hasFailed: true }
-                : { ...current, rows: ps_table_stream_service_1.PsTableStreamService.append(current.rows, page, rowId.current) }), () => setStream((current) => (current.rows !== base ? current : { ...current, hasFailed: true })));
-    }, [nextPage, stream.rows]);
-    const isStreaming = nextPage !== null;
+        const seen = new Set(first.map((row) => rowId.current(row)));
+        const loaded = new Map();
+        let isCancelled = false;
+        let nextIndex = 0;
+        let nextToAppend = pages[0];
+        let pending = [];
+        let timer = null;
+        const commit = (patch) => {
+            const added = pending;
+            pending = [];
+            timer = null;
+            (0, react_1.startTransition)(() => setStream((current) => current.first !== first
+                ? current
+                : {
+                    ...current,
+                    ...patch,
+                    rows: added.length === 0 ? current.rows : current.rows.concat(added),
+                }));
+        };
+        const work = async () => {
+            while (!isCancelled && nextIndex < pages.length) {
+                const page = pages[nextIndex];
+                nextIndex += 1;
+                loaded.set(page, await load.current(page));
+                if (isCancelled)
+                    return;
+                for (let ready = loaded.get(nextToAppend); ready !== undefined;) {
+                    pending = pending.concat(ps_table_stream_service_1.PsTableStreamService.unseen(ready, seen, rowId.current));
+                    loaded.delete(nextToAppend);
+                    nextToAppend += 1;
+                    ready = loaded.get(nextToAppend);
+                }
+                if (timer === null)
+                    timer = setTimeout(() => commit({ hasFailed: false, isDone: false }), table_config_1.PsTableConfig.streamFlushMs);
+            }
+        };
+        const finish = (hasFailed) => {
+            if (isCancelled)
+                return;
+            if (timer !== null)
+                clearTimeout(timer);
+            isCancelled = true;
+            commit({ hasFailed, isDone: !hasFailed });
+        };
+        void Promise.all(Array.from({ length: Math.min(table_config_1.PsTableConfig.streamConcurrency, pages.length) }, work)).then(() => finish(false), () => finish(true));
+        return () => {
+            isCancelled = true;
+            if (timer !== null)
+                clearTimeout(timer);
+        };
+    }, [first, pageSize, total]);
+    const isStreaming = !stream.hasFailed && !stream.isDone;
     const rows = (0, react_1.useMemo)(() => isStreaming
         ? ps_table_stream_service_1.PsTableStreamService.merge(stream.rows, stream.previous, rowId.current, total)
         : stream.rows, [isStreaming, stream.previous, stream.rows, total]);

package/dist/index.d.ts

@@ -18,6 +18,7 @@ export * from './interfaces/table-sort';
 export * from './interfaces/table-stream-input';
 export * from './interfaces/table-stream-result';
 export * from './interfaces/table-stream-status';
+export * from './hooks/use-ps-incremental-count';
 export * from './hooks/use-ps-streamed-rows';
 export * from './hooks/use-ps-table-stream-status';
 export * from './services/ps-table-cell-tooltip-service';
@@ -25,6 +26,7 @@ export * from './services/ps-table-column-size-service';
 export * from './services/ps-table-group-service';
 export * from './services/ps-table-query-service';
 export * from './services/ps-table-search-service';
+export * from './services/ps-table-scroll-service';
 export * from './services/ps-table-stream-service';
 export * from './components/ps-table-export-button';
 export * from './constants/ps-table-download-config';

package/dist/index.js

@@ -34,6 +34,7 @@ __exportStar(require("./interfaces/table-sort"), exports);
 __exportStar(require("./interfaces/table-stream-input"), exports);
 __exportStar(require("./interfaces/table-stream-result"), exports);
 __exportStar(require("./interfaces/table-stream-status"), exports);
+__exportStar(require("./hooks/use-ps-incremental-count"), exports);
 __exportStar(require("./hooks/use-ps-streamed-rows"), exports);
 __exportStar(require("./hooks/use-ps-table-stream-status"), exports);
 __exportStar(require("./services/ps-table-cell-tooltip-service"), exports);
@@ -41,6 +42,7 @@ __exportStar(require("./services/ps-table-column-size-service"), exports);
 __exportStar(require("./services/ps-table-group-service"), exports);
 __exportStar(require("./services/ps-table-query-service"), exports);
 __exportStar(require("./services/ps-table-search-service"), exports);
+__exportStar(require("./services/ps-table-scroll-service"), exports);
 __exportStar(require("./services/ps-table-stream-service"), exports);
 __exportStar(require("./components/ps-table-export-button"), exports);
 __exportStar(require("./constants/ps-table-download-config"), exports);

package/dist/interfaces/table-stream-state.d.ts

@@ -1,6 +1,7 @@
 export interface PsTableStreamState<RowData> {
     first: RowData[];
     hasFailed: boolean;
+    isDone: boolean;
     previous: RowData[];
     rows: RowData[];
     scope: string | undefined;

package/dist/services/ps-table-query-service.d.ts

@@ -6,6 +6,8 @@ export declare class PsTableQueryService {
     static isActive(value: PsTableFilterValue | undefined): boolean;
     static matchesFilter<RowData>(row: RowData, column: PsTableColumn<RowData>, value: PsTableFilterValue): boolean;
     static apply<RowData>(rows: RowData[], columns: PsTableColumn<RowData>[], filters: Record<string, PsTableFilterValue>, search: string, getSearchText: ((row: RowData) => string) | undefined, sort: PsTableSort | null): RowData[];
+    private static compare;
+    private static readonly collator;
     static options<RowData>(rows: RowData[], column: PsTableColumn<RowData>): import("..").PsTableFilterOption[];
     static empty(sort: PsTableSort | null): PsTableQuery;
     static isEqual(left: PsTableQuery, right: PsTableQuery): boolean;

package/dist/services/ps-table-query-service.js

@@ -40,26 +40,37 @@ class PsTableQueryService {
         return true;
     }
     static apply(rows, columns, filters, search, getSearchText, sort) {
-        const filtered = rows.filter((row) => (!getSearchText || ps_table_search_service_1.PsTableSearchService.matches(getSearchText(row), search)) &&
-            columns.every((column) => PsTableQueryService.matchesFilter(row, column, filters[column.id] ? filters[column.id] : {})));
+        const tokens = getSearchText ? ps_table_search_service_1.PsTableSearchService.tokens(search) : [];
+        const activeColumns = columns.filter((column) => column.filter && PsTableQueryService.isActive(filters[column.id]));
+        const filtered = tokens.length === 0 && activeColumns.length === 0
+            ? rows
+            : rows.filter((row) => (tokens.length === 0 ||
+                (getSearchText !== undefined &&
+                    ps_table_search_service_1.PsTableSearchService.matchesTokens(ps_table_search_service_1.PsTableSearchService.haystack(row, getSearchText), tokens))) &&
+                activeColumns.every((column) => PsTableQueryService.matchesFilter(row, column, filters[column.id])));
         const sortColumn = sort ? columns.find((column) => column.id === sort.columnId) : undefined;
         if (!sort || !sortColumn || !sortColumn.sortValue)
             return filtered;
         const getValue = sortColumn.sortValue;
         const direction = sort.direction === 'ascending' ? 1 : -1;
-        return [...filtered].sort((left, right) => {
-            const a = getValue(left);
-            const b = getValue(right);
-            if (a === b)
-                return 0;
-            if (a === null)
+        return filtered
+            .map((row, index) => ({ index, row, value: getValue(row) }))
+            .sort((left, right) => {
+            if (left.value === null && right.value !== null)
                 return 1;
-            if (b === null)
+            if (right.value === null && left.value !== null)
                 return -1;
-            if (typeof a === 'number' && typeof b === 'number')
-                return (a - b) * direction;
-            return String(a).localeCompare(String(b), undefined, { numeric: true }) * direction;
-        });
+            const order = PsTableQueryService.compare(left.value, right.value);
+            return order === 0 ? left.index - right.index : order * direction;
+        })
+            .map((entry) => entry.row);
+    }
+    static compare(a, b) {
+        if (a === b || a === null || b === null)
+            return 0;
+        if (typeof a === 'number' && typeof b === 'number')
+            return a - b;
+        return PsTableQueryService.collator.compare(String(a), String(b));
     }
     static options(rows, column) {
         if (!column.filter)
@@ -95,3 +106,4 @@ class PsTableQueryService {
     }
 }
 exports.PsTableQueryService = PsTableQueryService;
+PsTableQueryService.collator = new Intl.Collator(undefined, { numeric: true });

package/dist/services/ps-table-scroll-service.d.ts

@@ -0,0 +1,5 @@
+export declare class PsTableScrollService {
+    private static readonly scrollable;
+    static parent(element: HTMLElement): HTMLElement | null;
+    static offset(element: HTMLElement, parent: HTMLElement | null): number;
+}

package/dist/services/ps-table-scroll-service.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTableScrollService = void 0;
+class PsTableScrollService {
+    static parent(element) {
+        for (let node = element.parentElement; node !== null; node = node.parentElement) {
+            if (node === document.body || node === document.documentElement)
+                return null;
+            if (PsTableScrollService.scrollable.test(getComputedStyle(node).overflowY))
+                return node;
+        }
+        return null;
+    }
+    static offset(element, parent) {
+        const top = element.getBoundingClientRect().top;
+        return parent === null
+            ? top + window.scrollY
+            : top - parent.getBoundingClientRect().top + parent.scrollTop;
+    }
+}
+exports.PsTableScrollService = PsTableScrollService;
+PsTableScrollService.scrollable = /(auto|scroll|overlay)/;

package/dist/services/ps-table-search-service.d.ts

@@ -1,5 +1,8 @@
 export declare class PsTableSearchService {
+    private static readonly haystacks;
     static normalise(value: string): string;
     static tokens(query: string): string[];
     static matches(text: string, query: string): boolean;
+    static matchesTokens(haystack: string, tokens: string[]): boolean;
+    static haystack<RowData>(row: RowData, getSearchText: (row: RowData) => string): string;
 }

package/dist/services/ps-table-search-service.js

@@ -18,11 +18,21 @@ class PsTableSearchService {
         return normalised === '' ? [] : normalised.split(' ');
     }
     static matches(text, query) {
-        const tokens = PsTableSearchService.tokens(query);
-        if (tokens.length === 0)
-            return true;
-        const haystack = PsTableSearchService.normalise(text);
+        return PsTableSearchService.matchesTokens(PsTableSearchService.normalise(text), PsTableSearchService.tokens(query));
+    }
+    static matchesTokens(haystack, tokens) {
         return tokens.every((token) => haystack.includes(token));
     }
+    static haystack(row, getSearchText) {
+        if (typeof row !== 'object' || row === null)
+            return PsTableSearchService.normalise(getSearchText(row));
+        const cached = PsTableSearchService.haystacks.get(row);
+        if (cached !== undefined)
+            return cached;
+        const haystack = PsTableSearchService.normalise(getSearchText(row));
+        PsTableSearchService.haystacks.set(row, haystack);
+        return haystack;
+    }
 }
 exports.PsTableSearchService = PsTableSearchService;
+PsTableSearchService.haystacks = new WeakMap();

package/dist/services/ps-table-stream-service.d.ts

@@ -1,5 +1,7 @@
 export declare class PsTableStreamService {
     static nextPage(loaded: number, total: number, pageSize: number): number | null;
+    static pages(loaded: number, total: number, pageSize: number): number[];
+    static unseen<RowData>(page: RowData[], seen: Set<string>, getRowId: (row: RowData) => string): RowData[];
     static merge<RowData>(fresh: RowData[], previous: RowData[], getRowId: (row: RowData) => string, total: number): RowData[];
     static carried<RowData>(rows: RowData[], previous: RowData[], getRowId: (row: RowData) => string, total: number, isSameScope: boolean): RowData[];
     static append<RowData>(rows: RowData[], page: RowData[], getRowId: (row: RowData) => string): RowData[];

package/dist/services/ps-table-stream-service.js

@@ -5,7 +5,25 @@ class PsTableStreamService {
     static nextPage(loaded, total, pageSize) {
         return loaded < total ? Math.floor(loaded / pageSize) + 1 : null;
     }
+    static pages(loaded, total, pageSize) {
+        const first = PsTableStreamService.nextPage(loaded, total, pageSize);
+        if (first === null)
+            return [];
+        const last = Math.ceil(total / pageSize);
+        return Array.from({ length: last - first + 1 }, (_, index) => first + index);
+    }
+    static unseen(page, seen, getRowId) {
+        return page.filter((row) => {
+            const rowId = getRowId(row);
+            if (seen.has(rowId))
+                return false;
+            seen.add(rowId);
+            return true;
+        });
+    }
     static merge(fresh, previous, getRowId, total) {
+        if (previous.length === 0)
+            return fresh.length > total ? fresh.slice(0, total) : fresh;
         const freshIds = new Set(fresh.map(getRowId));
         return [...fresh, ...previous.filter((row) => !freshIds.has(getRowId(row)))].slice(0, total);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-table-components",
-	"version": "1.18.1",
+	"version": "1.19.0",
 	"private": false,
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",
@@ -78,6 +78,7 @@
 		"@pallasoft/ps-icons": "^1.5.4",
 		"@pallasoft/ps-input-components": "^1.14.0",
 		"@pallasoft/ps-motion-components": "^1.2.0",
+		"@tanstack/react-virtual": "^3.14.13",
 		"react-aria-components": "^1.21.1"
 	}
 }