@pallasoft/ps-table-components 1.18.1 → 1.20.0

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

@@ -7,11 +7,16 @@ 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 use_ps_scroll_anchor_1 = require("../hooks/use-ps-scroll-anchor");
+const use_ps_table_stream_status_1 = require("../hooks/use-ps-table-stream-status");
 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,15 +69,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 deferredSearch = (0, react_1.useDeferredValue)(search);
     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]);
-    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;
-    const safePage = Math.min(Math.max(currentPage, 1), pageCount);
+        : ps_table_query_service_1.PsTableQueryService.apply(rows, columns, filters, deferredSearch, getSearchText, sort), [columns, filters, rows, deferredSearch, sort, getSearchText, isServerPaginated]);
+    const streamStatus = (0, use_ps_table_stream_status_1.usePsTableStreamStatus)();
     const isQueried = search.trim() !== '' ||
         Object.values(filters).some((value) => ps_table_query_service_1.PsTableQueryService.isActive(value));
+    const currentPage = page !== null && page !== undefined ? page : uncontrolledPage;
+    const loadedRowCount = isServerPaginated ? totalRows : queriedRows.length;
+    const rowCount = streamStatus !== null && !isServerPaginated && !isQueried
+        ? Math.max(streamStatus.total, loadedRowCount)
+        : loadedRowCount;
+    const pageCountOf = (count) => (pageSize ? Math.max(Math.ceil(count / pageSize), 1) : 1);
+    const pageCount = pageCountOf(rowCount);
+    const safePage = Math.min(Math.max(currentPage, 1), pageCountOf(loadedRowCount));
     const groups = (0, react_1.useMemo)(() => (grouping ? ps_table_group_service_1.PsTableGroupService.group(queriedRows, grouping.getGroupKey) : []), [grouping, queriedRows]);
     const initialExpandedCount = grouping && grouping.initialExpandedCount !== undefined ? grouping.initialExpandedCount : 1;
     const isGroupExpanded = (groupKey, groupIndex) => isQueried || groupIndex < initialExpandedCount !== toggledGroupKeys.includes(groupKey);
@@ -149,19 +160,64 @@ 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 visibleRowIds = (0, react_1.useMemo)(() => (shouldVirtualize ? visibleRows.map((row) => getRowId(row)) : []), [getRowId, shouldVirtualize, visibleRows]);
+    (0, use_ps_scroll_anchor_1.usePsScrollAnchor)(virtualizer, visibleRowIds, shouldVirtualize && streamStatus !== null);
+    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 +228,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 +243,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 +258,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,8 +267,14 @@ 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] })] }));
+                                                    : 'left'], 'whitespace-nowrap'), children: column.footer }, column.id)))] }) })) : null] }) }), pageSize && (!grouping || isServerPaginated) ? ((0, jsx_runtime_1.jsx)(ps_table_pagination_1.PsTablePagination, { loadedPageCount: pageCountOf(loadedRowCount), onPageChange: changePage, page: safePage, pageCount: pageCount, pageSize: pageSize, totalRows: rowCount })) : null] })] }));
 };
 exports.PsDataTable = PsDataTable;

package/dist/components/ps-table-pagination.d.ts

@@ -1,9 +1,10 @@
 export interface PsTablePaginationProps {
     className?: string;
+    loadedPageCount?: number;
     onPageChange: (page: number) => void;
     page: number;
     pageCount: number;
     pageSize: number;
     totalRows: number;
 }
-export declare const PsTablePagination: ({ className, onPageChange, page, pageCount, pageSize, totalRows, }: PsTablePaginationProps) => import("react").JSX.Element;
+export declare const PsTablePagination: ({ className, loadedPageCount, onPageChange, page, pageCount, pageSize, totalRows, }: PsTablePaginationProps) => import("react").JSX.Element;

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

@@ -3,10 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsTablePagination = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
-const PsTablePagination = ({ className, onPageChange, page, pageCount, pageSize, totalRows, }) => {
+const PsTablePagination = ({ className, loadedPageCount, onPageChange, page, pageCount, pageSize, totalRows, }) => {
     const firstRow = totalRows === 0 ? 0 : (page - 1) * pageSize + 1;
     const lastRow = Math.min(page * pageSize, totalRows);
     const buttonClassName = 'ps-focus-ring inline-flex min-h-9 items-center rounded-full border border-line px-3.5 text-sm font-semibold text-ink transition-colors disabled:cursor-not-allowed disabled:opacity-40 enabled:hover:border-primary/40';
-    return ((0, jsx_runtime_1.jsxs)("nav", { "aria-label": 'Pagination', className: ps_design_system_1.PallasoftClassNameService.merge('flex flex-wrap items-center justify-between gap-3 border-t border-line px-4 py-3', className), children: [(0, jsx_runtime_1.jsx)("p", { className: 'text-sm text-ink/55', children: totalRows === 0 ? 'No rows' : `${firstRow}–${lastRow} of ${totalRows}` }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex items-center gap-2', children: [(0, jsx_runtime_1.jsx)("button", { className: buttonClassName, disabled: page <= 1, onClick: () => onPageChange(page - 1), type: 'button', children: "Previous" }), (0, jsx_runtime_1.jsxs)("span", { className: 'hidden text-sm text-ink/65 sm:inline', children: ["Page ", Math.min(page, pageCount), " of ", pageCount] }), (0, jsx_runtime_1.jsx)("button", { className: buttonClassName, disabled: page >= pageCount, onClick: () => onPageChange(page + 1), type: 'button', children: "Next" })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("nav", { "aria-label": 'Pagination', className: ps_design_system_1.PallasoftClassNameService.merge('flex flex-wrap items-center justify-between gap-3 border-t border-line px-4 py-3', className), children: [(0, jsx_runtime_1.jsx)("p", { className: 'text-sm text-ink/55', children: totalRows === 0 ? 'No rows' : `${firstRow}–${lastRow} of ${totalRows}` }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex items-center gap-2', children: [(0, jsx_runtime_1.jsx)("button", { className: buttonClassName, disabled: page <= 1, onClick: () => onPageChange(page - 1), type: 'button', children: "Previous" }), (0, jsx_runtime_1.jsxs)("span", { className: 'hidden text-sm text-ink/65 sm:inline', children: ["Page ", Math.min(page, pageCount), " of ", pageCount] }), (0, jsx_runtime_1.jsx)("button", { className: buttonClassName, disabled: page >=
+                            (loadedPageCount === undefined ? pageCount : Math.min(loadedPageCount, pageCount)), onClick: () => onPageChange(page + 1), type: 'button', children: "Next" })] })] }));
 };
 exports.PsTablePagination = PsTablePagination;

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,19 @@
 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 { usePsScrollAnchor } from '../hooks/use-ps-scroll-anchor';
+import { usePsTableStreamStatus } from '../hooks/use-ps-table-stream-status';
 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,15 +66,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 deferredSearch = useDeferredValue(search);
     const queriedRows = useMemo(() => isServerPaginated
         ? rows
-        : PsTableQueryService.apply(rows, columns, filters, search, getSearchText, sort), [columns, filters, getSearchText, isServerPaginated, rows, search, sort]);
-    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;
-    const safePage = Math.min(Math.max(currentPage, 1), pageCount);
+        : PsTableQueryService.apply(rows, columns, filters, deferredSearch, getSearchText, sort), [columns, filters, rows, deferredSearch, sort, getSearchText, isServerPaginated]);
+    const streamStatus = usePsTableStreamStatus();
     const isQueried = search.trim() !== '' ||
         Object.values(filters).some((value) => PsTableQueryService.isActive(value));
+    const currentPage = page !== null && page !== undefined ? page : uncontrolledPage;
+    const loadedRowCount = isServerPaginated ? totalRows : queriedRows.length;
+    const rowCount = streamStatus !== null && !isServerPaginated && !isQueried
+        ? Math.max(streamStatus.total, loadedRowCount)
+        : loadedRowCount;
+    const pageCountOf = (count) => (pageSize ? Math.max(Math.ceil(count / pageSize), 1) : 1);
+    const pageCount = pageCountOf(rowCount);
+    const safePage = Math.min(Math.max(currentPage, 1), pageCountOf(loadedRowCount));
     const groups = useMemo(() => (grouping ? PsTableGroupService.group(queriedRows, grouping.getGroupKey) : []), [grouping, queriedRows]);
     const initialExpandedCount = grouping && grouping.initialExpandedCount !== undefined ? grouping.initialExpandedCount : 1;
     const isGroupExpanded = (groupKey, groupIndex) => isQueried || groupIndex < initialExpandedCount !== toggledGroupKeys.includes(groupKey);
@@ -146,19 +157,64 @@ 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 visibleRowIds = useMemo(() => (shouldVirtualize ? visibleRows.map((row) => getRowId(row)) : []), [getRowId, shouldVirtualize, visibleRows]);
+    usePsScrollAnchor(virtualizer, visibleRowIds, shouldVirtualize && streamStatus !== null);
+    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 +225,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 +240,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 +255,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 +264,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] })] }));
+                                                    : 'left'], 'whitespace-nowrap'), children: column.footer }, column.id)))] }) })) : null] }) }), pageSize && (!grouping || isServerPaginated) ? (_jsx(PsTablePagination, { loadedPageCount: pageCountOf(loadedRowCount), onPageChange: changePage, page: safePage, pageCount: pageCount, pageSize: pageSize, totalRows: rowCount })) : null] })] }));
 };

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

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
-export const PsTablePagination = ({ className, onPageChange, page, pageCount, pageSize, totalRows, }) => {
+export const PsTablePagination = ({ className, loadedPageCount, onPageChange, page, pageCount, pageSize, totalRows, }) => {
     const firstRow = totalRows === 0 ? 0 : (page - 1) * pageSize + 1;
     const lastRow = Math.min(page * pageSize, totalRows);
     const buttonClassName = 'ps-focus-ring inline-flex min-h-9 items-center rounded-full border border-line px-3.5 text-sm font-semibold text-ink transition-colors disabled:cursor-not-allowed disabled:opacity-40 enabled:hover:border-primary/40';
-    return (_jsxs("nav", { "aria-label": 'Pagination', className: PallasoftClassNameService.merge('flex flex-wrap items-center justify-between gap-3 border-t border-line px-4 py-3', className), children: [_jsx("p", { className: 'text-sm text-ink/55', children: totalRows === 0 ? 'No rows' : `${firstRow}–${lastRow} of ${totalRows}` }), _jsxs("div", { className: 'flex items-center gap-2', children: [_jsx("button", { className: buttonClassName, disabled: page <= 1, onClick: () => onPageChange(page - 1), type: 'button', children: "Previous" }), _jsxs("span", { className: 'hidden text-sm text-ink/65 sm:inline', children: ["Page ", Math.min(page, pageCount), " of ", pageCount] }), _jsx("button", { className: buttonClassName, disabled: page >= pageCount, onClick: () => onPageChange(page + 1), type: 'button', children: "Next" })] })] }));
+    return (_jsxs("nav", { "aria-label": 'Pagination', className: PallasoftClassNameService.merge('flex flex-wrap items-center justify-between gap-3 border-t border-line px-4 py-3', className), children: [_jsx("p", { className: 'text-sm text-ink/55', children: totalRows === 0 ? 'No rows' : `${firstRow}–${lastRow} of ${totalRows}` }), _jsxs("div", { className: 'flex items-center gap-2', children: [_jsx("button", { className: buttonClassName, disabled: page <= 1, onClick: () => onPageChange(page - 1), type: 'button', children: "Previous" }), _jsxs("span", { className: 'hidden text-sm text-ink/65 sm:inline', children: ["Page ", Math.min(page, pageCount), " of ", pageCount] }), _jsx("button", { className: buttonClassName, disabled: page >=
+                            (loadedPageCount === undefined ? pageCount : Math.min(loadedPageCount, pageCount)), onClick: () => onPageChange(page + 1), type: 'button', children: "Next" })] })] }));
 };

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-scroll-anchor.js

@@ -0,0 +1,26 @@
+import { useLayoutEffect, useRef } from 'react';
+import { PsTableScrollAnchorService } from '../services/ps-table-scroll-anchor-service';
+export const usePsScrollAnchor = (target, rowIds, isActive) => {
+    const anchor = useRef(null);
+    const previousRowIds = useRef(rowIds);
+    useLayoutEffect(() => {
+        const offset = target.scrollOffset;
+        if (!isActive || offset === null || offset <= 0) {
+            anchor.current = null;
+            previousRowIds.current = rowIds;
+            return;
+        }
+        const previous = anchor.current;
+        if (previous !== null && previousRowIds.current !== rowIds) {
+            const index = PsTableScrollAnchorService.movedTo(previous, previousRowIds.current, rowIds);
+            const start = index === null ? undefined : target.getOffsetForIndex(index, 'start');
+            previousRowIds.current = rowIds;
+            if (start !== undefined) {
+                target.scrollToOffset(PsTableScrollAnchorService.offset(start[0], previous));
+                return;
+            }
+        }
+        previousRowIds.current = rowIds;
+        anchor.current = PsTableScrollAnchorService.capture(target.getVirtualItems(), rowIds, offset);
+    });
+};