@pallasoft/ps-table-components 1.26.0 → 1.27.0

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

@@ -1,5 +1,7 @@
 import { type ReactNode } from 'react';
 import { PsTablePaginationPosition } from '../constants/ps-table-pagination-position';
+import type { PsTableCursorPaging } from '../interfaces/ps-table-cursor-paging';
+import type { PsTableSelectAllMatching } from '../interfaces/ps-table-select-all-matching';
 import type { PsTableColumn } from '../interfaces/table-column';
 import type { PsTableGrouping } from '../interfaces/table-grouping';
 import type { PsTableQuery } from '../interfaces/table-query';
@@ -9,7 +11,9 @@ import type { PsTableSort } from '../interfaces/table-sort';
 export interface PsDataTableProps<RowData> {
     caption?: string;
     className?: string;
+    clearSelectionKey?: number | string;
     columns: PsTableColumn<RowData>[];
+    cursorPaging?: PsTableCursorPaging;
     defaultSort?: PsTableSort;
     density?: 'compact' | 'normal';
     expandedRowIds?: string[];
@@ -21,6 +25,7 @@ export interface PsDataTableProps<RowData> {
     grouping?: PsTableGrouping<RowData>;
     isLoading?: boolean;
     isPending?: boolean;
+    isRefreshing?: boolean;
     layout?: 'auto' | 'fixed';
     onPageChange?: (page: number) => void;
     onQueryChange?: (query: PsTableQuery) => void;
@@ -36,7 +41,9 @@ export interface PsDataTableProps<RowData> {
     rows: RowData[];
     searchingLabel?: string;
     searchPlaceholder?: string;
+    selectAllMatching?: PsTableSelectAllMatching;
+    stickyTop?: string;
     toolbarActions?: ReactNode;
     totalRows?: number;
 }
-export declare const PsDataTable: <RowData>({ caption, className, columns, defaultSort, density, expandedRowIds, mobileLayout, getBulkActions, getRowId, getRowLabel, getSearchText, grouping, isLoading, isPending, layout, onPageChange, onQueryChange, onRowClick, onRowHover, page, pageSize, paginationPosition, pinFirstColumn, query, renderExpandedRow, reorder, rows, searchingLabel, searchPlaceholder, toolbarActions, totalRows, }: PsDataTableProps<RowData>) => import("react").JSX.Element;
+export declare const PsDataTable: <RowData>({ caption, className, clearSelectionKey, columns, cursorPaging, defaultSort, density, expandedRowIds, mobileLayout, getBulkActions, getRowId, getRowLabel, getSearchText, grouping, isLoading, isPending, isRefreshing, layout, onPageChange, onQueryChange, onRowClick, onRowHover, page, pageSize, paginationPosition, pinFirstColumn, query, renderExpandedRow, reorder, rows, searchingLabel, searchPlaceholder, selectAllMatching, stickyTop, toolbarActions, totalRows, }: PsDataTableProps<RowData>) => import("react").JSX.Element;

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

@@ -56,6 +56,7 @@ const ps_table_pin_service_1 = require("../services/ps-table-pin-service");
 const ps_table_query_service_1 = require("../services/ps-table-query-service");
 const ps_table_reorder_service_1 = require("../services/ps-table-reorder-service");
 const ps_table_scroll_service_1 = require("../services/ps-table-scroll-service");
+const ps_select_all_matching_banner_1 = require("./ps-select-all-matching-banner");
 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");
@@ -85,7 +86,7 @@ const alignClassNames = {
     left: 'text-left',
     right: 'text-right tabular-nums',
 };
-const PsDataTable = ({ caption, className, columns, defaultSort, density = 'normal', expandedRowIds, mobileLayout = 'cards', getBulkActions, getRowId, getRowLabel, getSearchText, grouping, isLoading = false, isPending = false, layout = 'auto', onPageChange, onQueryChange, onRowClick, onRowHover, page, pageSize, paginationPosition = ps_table_pagination_position_1.PsTablePaginationPosition.bottom, pinFirstColumn = true, query, renderExpandedRow, reorder, rows, searchingLabel = table_config_1.PsTableConfig.searchingLabel, searchPlaceholder = table_config_1.PsTableConfig.searchPlaceholder, toolbarActions, totalRows, }) => {
+const PsDataTable = ({ caption, className, clearSelectionKey, columns, cursorPaging, defaultSort, density = 'normal', expandedRowIds, mobileLayout = 'cards', getBulkActions, getRowId, getRowLabel, getSearchText, grouping, isLoading = false, isPending = false, isRefreshing = false, layout = 'auto', onPageChange, onQueryChange, onRowClick, onRowHover, page, pageSize, paginationPosition = ps_table_pagination_position_1.PsTablePaginationPosition.bottom, pinFirstColumn = true, query, renderExpandedRow, reorder, rows, searchingLabel = table_config_1.PsTableConfig.searchingLabel, searchPlaceholder = table_config_1.PsTableConfig.searchPlaceholder, selectAllMatching, stickyTop, toolbarActions, totalRows, }) => {
     const containerRef = (0, react_1.useRef)(null);
     const [uncontrolledPage, setUncontrolledPage] = (0, react_1.useState)(1);
     const [uncontrolledQuery, setUncontrolledQuery] = (0, react_1.useState)(() => ps_table_query_service_1.PsTableQueryService.empty(defaultSort ? defaultSort : null));
@@ -93,7 +94,50 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
     const [toggledGroupKeys, setToggledGroupKeys] = (0, react_1.useState)([]);
     const [closingGroupKeys, setClosingGroupKeys] = (0, react_1.useState)([]);
     const [openedGroupKeys, setOpenedGroupKeys] = (0, react_1.useState)([]);
+    const [seenClearKey, setSeenClearKey] = (0, react_1.useState)(clearSelectionKey);
+    const stickyRegionRef = (0, react_1.useRef)(null);
+    const stickySentinelRef = (0, react_1.useRef)(null);
+    const [stickyHeight, setStickyHeight] = (0, react_1.useState)(0);
+    const [isStuck, setIsStuck] = (0, react_1.useState)(false);
     const currentQuery = query ? query : uncontrolledQuery;
+    if (seenClearKey !== clearSelectionKey) {
+        setSeenClearKey(clearSelectionKey);
+        setSelectedIds([]);
+    }
+    (0, react_1.useLayoutEffect)(() => {
+        const region = stickyRegionRef.current;
+        if (stickyTop === undefined || region === null)
+            return;
+        const measure = () => setStickyHeight(region.offsetHeight);
+        const observer = new ResizeObserver(measure);
+        measure();
+        observer.observe(region);
+        return () => observer.disconnect();
+    }, [stickyTop]);
+    (0, react_1.useEffect)(() => {
+        const region = stickyRegionRef.current;
+        const sentinel = stickySentinelRef.current;
+        if (stickyTop === undefined || region === null || sentinel === null)
+            return;
+        let frame = 0;
+        const check = () => {
+            frame = 0;
+            setIsStuck(sentinel.getBoundingClientRect().top < Number.parseFloat(getComputedStyle(region).top));
+        };
+        const schedule = () => {
+            if (frame === 0)
+                frame = window.requestAnimationFrame(check);
+        };
+        check();
+        window.addEventListener('scroll', schedule, { passive: true });
+        window.addEventListener('resize', schedule);
+        return () => {
+            window.removeEventListener('scroll', schedule);
+            window.removeEventListener('resize', schedule);
+            if (frame !== 0)
+                window.cancelAnimationFrame(frame);
+        };
+    }, [stickyTop]);
     const { filters, hiddenColumnIds, search, sort } = currentQuery;
     const visibleColumns = columns.filter((column) => !hiddenColumnIds.includes(column.id));
     const fittedWidths = (0, react_1.useMemo)(() => new Map(columns
@@ -235,7 +279,7 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
         })
         : [], [getRowId, getRowLabel, reorder, reorderKey, visibleRows]);
     const showsPagination = Boolean(pageSize) && (!grouping || isServerPaginated);
-    const renderPagination = (paginationClassName) => pageSize ? ((0, jsx_runtime_1.jsx)(ps_table_pagination_1.PsTablePagination, { className: paginationClassName, isPartial: isPartial, loadedPageCount: pageCountOf(loadedRowCount), onPageChange: changePage, page: safePage, pageCount: pageCount, pageSize: pageSize, totalRows: rowCount })) : null;
+    const renderPagination = (paginationClassName) => pageSize ? ((0, jsx_runtime_1.jsx)(ps_table_pagination_1.PsTablePagination, { className: paginationClassName, cursor: cursorPaging, isPartial: isPartial, loadedPageCount: pageCountOf(loadedRowCount), onPageChange: changePage, page: safePage, pageCount: pageCount, pageSize: pageSize, totalRows: rowCount })) : null;
     const renderOverlayRow = (rowId, size) => {
         const row = visibleRows.find((candidate) => getRowId(candidate) === rowId);
         return row === undefined ? null : ((0, jsx_runtime_1.jsxs)("table", { className: 'pointer-events-none w-full table-fixed border-collapse bg-surface text-left', style: size === null ? undefined : { width: size.width }, children: [size === null ? null : ((0, jsx_runtime_1.jsx)("colgroup", { children: size.columnWidths.map((width, index) => ((0, jsx_runtime_1.jsx)("col", { style: { width } }, index))) })), (0, jsx_runtime_1.jsx)("tbody", { children: renderRow(ps_table_reorder_service_1.PsTableReorderService.plain, row, undefined, undefined, true) })] }));
@@ -269,12 +313,16 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
     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) => 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 togglePage = () => {
+        if (isPageSelected && selectAllMatching !== undefined && selectAllMatching.isActive)
+            selectAllMatching.onDeactivate();
+        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);
@@ -352,7 +400,18 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
         : entries.map((entry) => renderRow(api, entry.row, entry.motion, entry.virtualItem));
     if (isLoading)
         return ((0, jsx_runtime_1.jsx)(ps_core_components_1.PsSkeletonTable, { className: className, columns: visibleColumns.length, hasToolbar: hasToolbar, rows: table_config_1.PsTableConfig.skeletonRows }));
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: ps_design_system_1.PallasoftClassNameService.merge('flex min-w-0 flex-col gap-3', className), children: [isSelectable && selectedRows.length > 0 && getBulkActions ? ((0, jsx_runtime_1.jsx)(ps_table_bulk_bar_1.PsTableBulkBar, { actions: getBulkActions(selectedRows), onClear: () => setSelectedIds([]), selectedCount: selectedRows.length })) : hasToolbar || columns.some((column) => column.canHide) ? ((0, jsx_runtime_1.jsx)(ps_table_toolbar_1.PsTableToolbar, { actions: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [toolbarActions, columns.some((column) => column.canHide) ? ((0, jsx_runtime_1.jsx)(ps_table_column_picker_1.PsTableColumnPicker, { columns: columns
+    const clearSelection = () => {
+        setSelectedIds([]);
+        if (selectAllMatching !== undefined && selectAllMatching.isActive)
+            selectAllMatching.onDeactivate();
+    };
+    const banner = selectAllMatching !== undefined &&
+        selectedRows.length > 0 &&
+        selectAllMatching.total > pageIds.length &&
+        (isPageSelected || selectAllMatching.isActive) ? ((0, jsx_runtime_1.jsx)(ps_select_all_matching_banner_1.PsSelectAllMatchingBanner, { isActive: selectAllMatching.isActive, noun: selectAllMatching.noun, onActivate: selectAllMatching.onActivate, onDeactivate: clearSelection, pageCount: pageIds.length, total: selectAllMatching.total })) : null;
+    const topContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isSelectable && selectedRows.length > 0 && getBulkActions ? ((0, jsx_runtime_1.jsx)(ps_table_bulk_bar_1.PsTableBulkBar, { actions: getBulkActions(selectedRows), onClear: clearSelection, selectedCount: selectAllMatching !== undefined && selectAllMatching.isActive
+                    ? selectAllMatching.total
+                    : selectedRows.length })) : hasToolbar || columns.some((column) => column.canHide) ? ((0, jsx_runtime_1.jsx)(ps_table_toolbar_1.PsTableToolbar, { actions: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [toolbarActions, columns.some((column) => column.canHide) ? ((0, jsx_runtime_1.jsx)(ps_table_column_picker_1.PsTableColumnPicker, { columns: columns
                                 .filter((column) => column.canHide)
                                 .map((column) => ({ id: column.id, label: column.label })), hiddenColumnIds: hiddenColumnIds, onChange: (nextHidden) => updateQuery({ hiddenColumnIds: nextHidden }) })) : null] }), columns: hasFilters ? columns : [], filters: filters, isSearchable: isSearchable, onClearFilters: clearFilters, onFilterChange: (columnId, value) => {
                     updateQuery({ filters: { ...filters, [columnId]: value } });
@@ -360,16 +419,23 @@ 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: [showsPagination && paginationPosition !== ps_table_pagination_position_1.PsTablePaginationPosition.bottom
+                }, rows: rows, search: search, searchPlaceholder: searchPlaceholder })) : null, banner] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: ps_design_system_1.PallasoftClassNameService.merge('flex min-w-0 flex-col gap-3', className), children: [stickyTop === undefined ? (topContent) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { "aria-hidden": 'true', className: '-mb-3 h-0', ref: stickySentinelRef }), (0, jsx_runtime_1.jsx)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('sticky z-sticky -mx-1 flex flex-col gap-3 bg-canvas px-1 pb-2 pt-1 transition-shadow', isStuck ? 'shadow-[0_8px_8px_-8px_rgb(var(--ps-color-ink-rgb,15_23_42)/0.18)]' : ''), ref: stickyRegionRef, style: { top: stickyTop }, children: topContent })] })), (0, jsx_runtime_1.jsxs)("div", { "aria-busy": isRefreshing, className: ps_design_system_1.PallasoftClassNameService.merge('min-w-0 rounded-[1.25rem] border border-line bg-surface', stickyTop === undefined ? 'overflow-hidden' : 'overflow-clip'), children: [showsPagination && paginationPosition !== ps_table_pagination_position_1.PsTablePaginationPosition.bottom
                         ? renderPagination('border-b border-t-0')
-                        : null, mobileLayout === 'cards' ? ((0, jsx_runtime_1.jsxs)("div", { className: 'sm:hidden', children: [reorder && reorder.cardsReason ? ((0, jsx_runtime_1.jsx)("p", { className: 'border-b border-line px-4 py-2 text-xs text-ink/55', children: reorder.cardsReason })) : null, grouping
+                        : null, mobileLayout === 'cards' ? ((0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('transition-opacity duration-150 sm:hidden', isRefreshing ? 'opacity-60' : ''), children: [reorder && reorder.cardsReason ? ((0, jsx_runtime_1.jsx)("p", { className: 'border-b border-line px-4 py-2 text-xs text-ink/55', children: reorder.cardsReason })) : null, 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 && isSearching ? ((0, jsx_runtime_1.jsx)(ps_table_searching_state_1.PsTableSearchingState, { label: searchingLabel, skeletonRows: table_config_1.PsTableConfig.searchingSkeletonRows })) : 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_design_system_1.PallasoftClassNameService.merge(ps_table_control_classes_1.PsTableControlClasses.textButton, 'mt-2 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 overscroll-x-contain', mobileLayout === 'cards' ? 'hidden sm:block' : ''), "data-overflow-end": overflow.edges.end, "data-overflow-start": overflow.edges.start, onScroll: overflow.update, ref: overflow.ref, children: renderReorder((api) => ((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: [reorder ? ((0, jsx_runtime_1.jsx)("th", { className: ps_design_system_1.PallasoftClassNameService.merge('w-9 min-w-9 pl-3 pr-0', pins.reorder), scope: 'col', children: reorder.enabled ? ((0, jsx_runtime_1.jsx)("span", { className: 'sr-only', children: reorder.columnLabel })) : reorder.disabledReason ? ((0, jsx_runtime_1.jsx)("span", { "aria-label": reorder.disabledReason, className: 'inline-flex cursor-help opacity-40', role: 'img', title: reorder.disabledReason, children: (0, jsx_runtime_1.jsx)(ps_core_components_1.PsDragGrip, {}) })) : null })) : null, isSelectable ? ((0, jsx_runtime_1.jsx)("th", { className: ps_design_system_1.PallasoftClassNameService.merge('w-10 min-w-10 pl-4 pr-0', pins.select), 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, columnIndex) => {
+                                : renderCardList(shouldVirtualize ? visibleRows.slice(0, cards.count) : visibleRows, visibleRows.length === 0 && isSearching ? ((0, jsx_runtime_1.jsx)(ps_table_searching_state_1.PsTableSearchingState, { label: searchingLabel, skeletonRows: table_config_1.PsTableConfig.searchingSkeletonRows })) : 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_design_system_1.PallasoftClassNameService.merge(ps_table_control_classes_1.PsTableControlClasses.textButton, 'mt-2 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(stickyTop === undefined
+                            ? 'ps-scrollbar overflow-x-auto overflow-y-hidden overscroll-x-contain'
+                            : 'overflow-x-clip', 'transition-opacity duration-150', isRefreshing ? 'opacity-60' : '', mobileLayout === 'cards' ? 'hidden sm:block' : ''), "data-overflow-end": overflow.edges.end, "data-overflow-start": overflow.edges.start, onScroll: overflow.update, ref: overflow.ref, children: renderReorder((api) => ((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: ps_design_system_1.PallasoftClassNameService.merge('bg-mist/70 text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-ink/45', stickyTop === undefined
+                                        ? ''
+                                        : 'sticky z-docked bg-surface [&_th]:border-b [&_th]:border-line [&>tr]:bg-mist/70'), style: stickyTop === undefined
+                                        ? undefined
+                                        : { top: `calc(${stickyTop} + ${stickyHeight}px)` }, children: (0, jsx_runtime_1.jsxs)("tr", { children: [reorder ? ((0, jsx_runtime_1.jsx)("th", { className: ps_design_system_1.PallasoftClassNameService.merge('w-9 min-w-9 pl-3 pr-0', pins.reorder), scope: 'col', children: reorder.enabled ? ((0, jsx_runtime_1.jsx)("span", { className: 'sr-only', children: reorder.columnLabel })) : reorder.disabledReason ? ((0, jsx_runtime_1.jsx)("span", { "aria-label": reorder.disabledReason, className: 'inline-flex cursor-help opacity-40', role: 'img', title: reorder.disabledReason, children: (0, jsx_runtime_1.jsx)(ps_core_components_1.PsDragGrip, {}) })) : null })) : null, isSelectable ? ((0, jsx_runtime_1.jsx)("th", { className: ps_design_system_1.PallasoftClassNameService.merge('w-10 min-w-10 pl-4 pr-0', pins.select), 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, columnIndex) => {
                                                 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

package/dist/components/ps-select-all-matching-banner.d.ts

@@ -0,0 +1,10 @@
+export interface PsSelectAllMatchingBannerProps {
+    className?: string;
+    isActive: boolean;
+    noun?: string;
+    onActivate: () => void;
+    onDeactivate: () => void;
+    pageCount: number;
+    total: number;
+}
+export declare const PsSelectAllMatchingBanner: ({ className, isActive, noun, onActivate, onDeactivate, pageCount, total, }: PsSelectAllMatchingBannerProps) => import("react").JSX.Element;

package/dist/components/ps-select-all-matching-banner.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsSelectAllMatchingBanner = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_table_control_classes_1 = require("../constants/ps-table-control-classes");
+const PsSelectAllMatchingBanner = ({ className, isActive, noun = 'rows', onActivate, onDeactivate, pageCount, total, }) => ((0, jsx_runtime_1.jsxs)("div", { "aria-live": 'polite', className: ps_design_system_1.PallasoftClassNameService.merge('flex flex-wrap items-center justify-center gap-x-2 gap-y-1 rounded-ps-control bg-primary/10 px-3 py-2 text-sm text-ink', className), role: 'status', children: [(0, jsx_runtime_1.jsx)("span", { children: isActive
+                ? `All ${total.toLocaleString()} ${noun} matching are selected.`
+                : `${pageCount.toLocaleString()} ${noun} on this page are selected.` }), (0, jsx_runtime_1.jsx)("button", { className: ps_design_system_1.PallasoftClassNameService.merge(ps_table_control_classes_1.PsTableControlClasses.textButton, 'text-primary'), onClick: isActive ? onDeactivate : onActivate, type: 'button', children: isActive ? 'Clear selection' : `Select all ${total.toLocaleString()} matching` })] }));
+exports.PsSelectAllMatchingBanner = PsSelectAllMatchingBanner;

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

@@ -1,5 +1,7 @@
+import type { PsTableCursorPaging } from '../interfaces/ps-table-cursor-paging';
 export interface PsTablePaginationProps {
     className?: string;
+    cursor?: PsTableCursorPaging;
     isPartial?: boolean;
     loadedPageCount?: number;
     onPageChange: (page: number) => void;
@@ -8,4 +10,4 @@ export interface PsTablePaginationProps {
     pageSize: number;
     totalRows: number;
 }
-export declare const PsTablePagination: ({ className, isPartial, loadedPageCount, onPageChange, page, pageCount, pageSize, totalRows, }: PsTablePaginationProps) => import("react").JSX.Element;
+export declare const PsTablePagination: ({ className, cursor, isPartial, loadedPageCount, onPageChange, page, pageCount, pageSize, totalRows, }: PsTablePaginationProps) => import("react").JSX.Element;

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

@@ -4,12 +4,20 @@ exports.PsTablePagination = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const ps_table_control_classes_1 = require("../constants/ps-table-control-classes");
-const PsTablePagination = ({ className, isPartial = false, loadedPageCount, onPageChange, page, pageCount, pageSize, totalRows, }) => {
+const PsTablePagination = ({ className, cursor, isPartial = false, loadedPageCount, onPageChange, page, pageCount, pageSize, totalRows, }) => {
     const firstRow = totalRows === 0 ? 0 : (page - 1) * pageSize + 1;
     const lastRow = Math.min(page * pageSize, totalRows);
+    const approximately = cursor !== undefined && cursor.isEstimate ? 'about ' : '';
+    const pageNumber = cursor === undefined ? Math.min(page, pageCount) : cursor.pageNumber;
+    const cursorFirst = cursor === undefined ? firstRow : (cursor.pageNumber - 1) * pageSize + 1;
+    const cursorLast = cursor === undefined ? lastRow : Math.min(cursor.pageNumber * pageSize, totalRows);
     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}${isPartial ? '+' : ''}` }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex items-center gap-2', children: [(0, jsx_runtime_1.jsx)("button", { className: ps_table_control_classes_1.PsTableControlClasses.paginationButton, 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: ps_table_control_classes_1.PsTableControlClasses.paginationButton, disabled: page >=
-                            (loadedPageCount === undefined ? pageCount : Math.min(loadedPageCount, pageCount)), onClick: () => onPageChange(page + 1), type: 'button', children: "Next" })] })] }));
+                    : cursor === undefined
+                        ? `${firstRow}–${lastRow} of ${totalRows}${isPartial ? '+' : ''}`
+                        : `${cursorFirst}–${cursorLast} of ${approximately}${totalRows.toLocaleString()}` }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex items-center gap-2', children: [cursor !== undefined && cursor.pageSizeOptions !== undefined && cursor.onPageSizeChange ? ((0, jsx_runtime_1.jsxs)("label", { className: 'flex items-center gap-2 text-sm text-ink/65', children: [(0, jsx_runtime_1.jsx)("span", { className: 'hidden sm:inline', children: "Rows per page" }), (0, jsx_runtime_1.jsx)("select", { "aria-label": 'Rows per page', className: 'ps-input-control ps-focus-ring ps-control ps-control-padding rounded-ps-control text-sm', onChange: (event) => cursor.onPageSizeChange?.(Number(event.target.value)), value: pageSize, children: cursor.pageSizeOptions.map((option) => ((0, jsx_runtime_1.jsx)("option", { value: option, children: option }, option))) })] })) : null, (0, jsx_runtime_1.jsx)("button", { className: ps_table_control_classes_1.PsTableControlClasses.paginationButton, disabled: cursor === undefined ? page <= 1 : !cursor.hasPrevious, onClick: () => (cursor === undefined ? onPageChange(page - 1) : cursor.onPrevious()), type: 'button', children: "Previous" }), (0, jsx_runtime_1.jsxs)("span", { className: 'hidden text-sm text-ink/65 sm:inline', children: ["Page ", pageNumber, " of ", approximately, pageCount] }), (0, jsx_runtime_1.jsx)("button", { className: ps_table_control_classes_1.PsTableControlClasses.paginationButton, disabled: cursor === undefined
+                            ? page >=
+                                (loadedPageCount === undefined ? pageCount : Math.min(loadedPageCount, pageCount))
+                            : !cursor.hasNext, onClick: () => (cursor === undefined ? onPageChange(page + 1) : cursor.onNext()), onFocus: cursor === undefined ? undefined : cursor.onNextIntent, onPointerEnter: cursor === undefined ? undefined : cursor.onNextIntent, type: 'button', children: "Next" })] })] }));
 };
 exports.PsTablePagination = PsTablePagination;

package/dist/constants/ps-server-rows-config.d.ts

@@ -0,0 +1,8 @@
+export declare const PsServerRowsConfig: {
+    readonly cacheSize: 8;
+    readonly debounceMs: 250;
+    readonly defaultPageSize: 100;
+    readonly idleFallbackMs: 200;
+    readonly idleTimeoutMs: 1000;
+    readonly pageSizes: readonly [50, 100, 200];
+};

package/dist/constants/ps-server-rows-config.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsServerRowsConfig = void 0;
+exports.PsServerRowsConfig = {
+    cacheSize: 8,
+    debounceMs: 250,
+    defaultPageSize: 100,
+    idleFallbackMs: 200,
+    idleTimeoutMs: 1000,
+    pageSizes: [50, 100, 200],
+};

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Fragment, Suspense, lazy, useCallback, useDeferredValue, useEffect, useMemo, useRef, useState, } from 'react';
+import { Fragment, Suspense, lazy, useCallback, useDeferredValue, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { PsDragGrip, PsSkeletonTable } from '@pallasoft/ps-core-components';
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
 import { PsCheckbox } from '@pallasoft/ps-input-components';
@@ -20,6 +20,7 @@ import { PsTablePinService } from '../services/ps-table-pin-service';
 import { PsTableQueryService } from '../services/ps-table-query-service';
 import { PsTableReorderService } from '../services/ps-table-reorder-service';
 import { PsTableScrollService } from '../services/ps-table-scroll-service';
+import { PsSelectAllMatchingBanner } from './ps-select-all-matching-banner';
 import { PsTableBulkBar } from './ps-table-bulk-bar';
 import { PsTableCardList } from './ps-table-card-list';
 import { PsTableColumnPicker } from './ps-table-column-picker';
@@ -49,7 +50,7 @@ const alignClassNames = {
     left: 'text-left',
     right: 'text-right tabular-nums',
 };
-export const PsDataTable = ({ caption, className, columns, defaultSort, density = 'normal', expandedRowIds, mobileLayout = 'cards', getBulkActions, getRowId, getRowLabel, getSearchText, grouping, isLoading = false, isPending = false, layout = 'auto', onPageChange, onQueryChange, onRowClick, onRowHover, page, pageSize, paginationPosition = PsTablePaginationPosition.bottom, pinFirstColumn = true, query, renderExpandedRow, reorder, rows, searchingLabel = PsTableConfig.searchingLabel, searchPlaceholder = PsTableConfig.searchPlaceholder, toolbarActions, totalRows, }) => {
+export const PsDataTable = ({ caption, className, clearSelectionKey, columns, cursorPaging, defaultSort, density = 'normal', expandedRowIds, mobileLayout = 'cards', getBulkActions, getRowId, getRowLabel, getSearchText, grouping, isLoading = false, isPending = false, isRefreshing = false, layout = 'auto', onPageChange, onQueryChange, onRowClick, onRowHover, page, pageSize, paginationPosition = PsTablePaginationPosition.bottom, pinFirstColumn = true, query, renderExpandedRow, reorder, rows, searchingLabel = PsTableConfig.searchingLabel, searchPlaceholder = PsTableConfig.searchPlaceholder, selectAllMatching, stickyTop, toolbarActions, totalRows, }) => {
     const containerRef = useRef(null);
     const [uncontrolledPage, setUncontrolledPage] = useState(1);
     const [uncontrolledQuery, setUncontrolledQuery] = useState(() => PsTableQueryService.empty(defaultSort ? defaultSort : null));
@@ -57,7 +58,50 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
     const [toggledGroupKeys, setToggledGroupKeys] = useState([]);
     const [closingGroupKeys, setClosingGroupKeys] = useState([]);
     const [openedGroupKeys, setOpenedGroupKeys] = useState([]);
+    const [seenClearKey, setSeenClearKey] = useState(clearSelectionKey);
+    const stickyRegionRef = useRef(null);
+    const stickySentinelRef = useRef(null);
+    const [stickyHeight, setStickyHeight] = useState(0);
+    const [isStuck, setIsStuck] = useState(false);
     const currentQuery = query ? query : uncontrolledQuery;
+    if (seenClearKey !== clearSelectionKey) {
+        setSeenClearKey(clearSelectionKey);
+        setSelectedIds([]);
+    }
+    useLayoutEffect(() => {
+        const region = stickyRegionRef.current;
+        if (stickyTop === undefined || region === null)
+            return;
+        const measure = () => setStickyHeight(region.offsetHeight);
+        const observer = new ResizeObserver(measure);
+        measure();
+        observer.observe(region);
+        return () => observer.disconnect();
+    }, [stickyTop]);
+    useEffect(() => {
+        const region = stickyRegionRef.current;
+        const sentinel = stickySentinelRef.current;
+        if (stickyTop === undefined || region === null || sentinel === null)
+            return;
+        let frame = 0;
+        const check = () => {
+            frame = 0;
+            setIsStuck(sentinel.getBoundingClientRect().top < Number.parseFloat(getComputedStyle(region).top));
+        };
+        const schedule = () => {
+            if (frame === 0)
+                frame = window.requestAnimationFrame(check);
+        };
+        check();
+        window.addEventListener('scroll', schedule, { passive: true });
+        window.addEventListener('resize', schedule);
+        return () => {
+            window.removeEventListener('scroll', schedule);
+            window.removeEventListener('resize', schedule);
+            if (frame !== 0)
+                window.cancelAnimationFrame(frame);
+        };
+    }, [stickyTop]);
     const { filters, hiddenColumnIds, search, sort } = currentQuery;
     const visibleColumns = columns.filter((column) => !hiddenColumnIds.includes(column.id));
     const fittedWidths = useMemo(() => new Map(columns
@@ -199,7 +243,7 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
         })
         : [], [getRowId, getRowLabel, reorder, reorderKey, visibleRows]);
     const showsPagination = Boolean(pageSize) && (!grouping || isServerPaginated);
-    const renderPagination = (paginationClassName) => pageSize ? (_jsx(PsTablePagination, { className: paginationClassName, isPartial: isPartial, loadedPageCount: pageCountOf(loadedRowCount), onPageChange: changePage, page: safePage, pageCount: pageCount, pageSize: pageSize, totalRows: rowCount })) : null;
+    const renderPagination = (paginationClassName) => pageSize ? (_jsx(PsTablePagination, { className: paginationClassName, cursor: cursorPaging, isPartial: isPartial, loadedPageCount: pageCountOf(loadedRowCount), onPageChange: changePage, page: safePage, pageCount: pageCount, pageSize: pageSize, totalRows: rowCount })) : null;
     const renderOverlayRow = (rowId, size) => {
         const row = visibleRows.find((candidate) => getRowId(candidate) === rowId);
         return row === undefined ? null : (_jsxs("table", { className: 'pointer-events-none w-full table-fixed border-collapse bg-surface text-left', style: size === null ? undefined : { width: size.width }, children: [size === null ? null : (_jsx("colgroup", { children: size.columnWidths.map((width, index) => (_jsx("col", { style: { width } }, index))) })), _jsx("tbody", { children: renderRow(PsTableReorderService.plain, row, undefined, undefined, true) })] }));
@@ -233,12 +277,16 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
     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) => 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 togglePage = () => {
+        if (isPageSelected && selectAllMatching !== undefined && selectAllMatching.isActive)
+            selectAllMatching.onDeactivate();
+        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);
@@ -316,7 +364,18 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
         : entries.map((entry) => renderRow(api, entry.row, entry.motion, entry.virtualItem));
     if (isLoading)
         return (_jsx(PsSkeletonTable, { className: className, columns: visibleColumns.length, hasToolbar: hasToolbar, rows: PsTableConfig.skeletonRows }));
-    return (_jsxs("div", { ref: containerRef, className: PallasoftClassNameService.merge('flex min-w-0 flex-col gap-3', className), children: [isSelectable && selectedRows.length > 0 && getBulkActions ? (_jsx(PsTableBulkBar, { actions: getBulkActions(selectedRows), onClear: () => setSelectedIds([]), selectedCount: selectedRows.length })) : hasToolbar || columns.some((column) => column.canHide) ? (_jsx(PsTableToolbar, { actions: _jsxs(_Fragment, { children: [toolbarActions, columns.some((column) => column.canHide) ? (_jsx(PsTableColumnPicker, { columns: columns
+    const clearSelection = () => {
+        setSelectedIds([]);
+        if (selectAllMatching !== undefined && selectAllMatching.isActive)
+            selectAllMatching.onDeactivate();
+    };
+    const banner = selectAllMatching !== undefined &&
+        selectedRows.length > 0 &&
+        selectAllMatching.total > pageIds.length &&
+        (isPageSelected || selectAllMatching.isActive) ? (_jsx(PsSelectAllMatchingBanner, { isActive: selectAllMatching.isActive, noun: selectAllMatching.noun, onActivate: selectAllMatching.onActivate, onDeactivate: clearSelection, pageCount: pageIds.length, total: selectAllMatching.total })) : null;
+    const topContent = (_jsxs(_Fragment, { children: [isSelectable && selectedRows.length > 0 && getBulkActions ? (_jsx(PsTableBulkBar, { actions: getBulkActions(selectedRows), onClear: clearSelection, selectedCount: selectAllMatching !== undefined && selectAllMatching.isActive
+                    ? selectAllMatching.total
+                    : selectedRows.length })) : hasToolbar || columns.some((column) => column.canHide) ? (_jsx(PsTableToolbar, { actions: _jsxs(_Fragment, { children: [toolbarActions, columns.some((column) => column.canHide) ? (_jsx(PsTableColumnPicker, { columns: columns
                                 .filter((column) => column.canHide)
                                 .map((column) => ({ id: column.id, label: column.label })), hiddenColumnIds: hiddenColumnIds, onChange: (nextHidden) => updateQuery({ hiddenColumnIds: nextHidden }) })) : null] }), columns: hasFilters ? columns : [], filters: filters, isSearchable: isSearchable, onClearFilters: clearFilters, onFilterChange: (columnId, value) => {
                     updateQuery({ filters: { ...filters, [columnId]: value } });
@@ -324,16 +383,23 @@ 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: [showsPagination && paginationPosition !== PsTablePaginationPosition.bottom
+                }, rows: rows, search: search, searchPlaceholder: searchPlaceholder })) : null, banner] }));
+    return (_jsxs("div", { ref: containerRef, className: PallasoftClassNameService.merge('flex min-w-0 flex-col gap-3', className), children: [stickyTop === undefined ? (topContent) : (_jsxs(_Fragment, { children: [_jsx("div", { "aria-hidden": 'true', className: '-mb-3 h-0', ref: stickySentinelRef }), _jsx("div", { className: PallasoftClassNameService.merge('sticky z-sticky -mx-1 flex flex-col gap-3 bg-canvas px-1 pb-2 pt-1 transition-shadow', isStuck ? 'shadow-[0_8px_8px_-8px_rgb(var(--ps-color-ink-rgb,15_23_42)/0.18)]' : ''), ref: stickyRegionRef, style: { top: stickyTop }, children: topContent })] })), _jsxs("div", { "aria-busy": isRefreshing, className: PallasoftClassNameService.merge('min-w-0 rounded-[1.25rem] border border-line bg-surface', stickyTop === undefined ? 'overflow-hidden' : 'overflow-clip'), children: [showsPagination && paginationPosition !== PsTablePaginationPosition.bottom
                         ? renderPagination('border-b border-t-0')
-                        : null, mobileLayout === 'cards' ? (_jsxs("div", { className: 'sm:hidden', children: [reorder && reorder.cardsReason ? (_jsx("p", { className: 'border-b border-line px-4 py-2 text-xs text-ink/55', children: reorder.cardsReason })) : null, grouping
+                        : null, mobileLayout === 'cards' ? (_jsxs("div", { className: PallasoftClassNameService.merge('transition-opacity duration-150 sm:hidden', isRefreshing ? 'opacity-60' : ''), children: [reorder && reorder.cardsReason ? (_jsx("p", { className: 'border-b border-line px-4 py-2 text-xs text-ink/55', children: reorder.cardsReason })) : null, 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 && isSearching ? (_jsx(PsTableSearchingState, { label: searchingLabel, skeletonRows: PsTableConfig.searchingSkeletonRows })) : 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: PallasoftClassNameService.merge(PsTableControlClasses.textButton, 'mt-2 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 overscroll-x-contain', mobileLayout === 'cards' ? 'hidden sm:block' : ''), "data-overflow-end": overflow.edges.end, "data-overflow-start": overflow.edges.start, onScroll: overflow.update, ref: overflow.ref, children: renderReorder((api) => (_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: [reorder ? (_jsx("th", { className: PallasoftClassNameService.merge('w-9 min-w-9 pl-3 pr-0', pins.reorder), scope: 'col', children: reorder.enabled ? (_jsx("span", { className: 'sr-only', children: reorder.columnLabel })) : reorder.disabledReason ? (_jsx("span", { "aria-label": reorder.disabledReason, className: 'inline-flex cursor-help opacity-40', role: 'img', title: reorder.disabledReason, children: _jsx(PsDragGrip, {}) })) : null })) : null, isSelectable ? (_jsx("th", { className: PallasoftClassNameService.merge('w-10 min-w-10 pl-4 pr-0', pins.select), 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, columnIndex) => {
+                                : renderCardList(shouldVirtualize ? visibleRows.slice(0, cards.count) : visibleRows, visibleRows.length === 0 && isSearching ? (_jsx(PsTableSearchingState, { label: searchingLabel, skeletonRows: PsTableConfig.searchingSkeletonRows })) : 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: PallasoftClassNameService.merge(PsTableControlClasses.textButton, 'mt-2 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(stickyTop === undefined
+                            ? 'ps-scrollbar overflow-x-auto overflow-y-hidden overscroll-x-contain'
+                            : 'overflow-x-clip', 'transition-opacity duration-150', isRefreshing ? 'opacity-60' : '', mobileLayout === 'cards' ? 'hidden sm:block' : ''), "data-overflow-end": overflow.edges.end, "data-overflow-start": overflow.edges.start, onScroll: overflow.update, ref: overflow.ref, children: renderReorder((api) => (_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: PallasoftClassNameService.merge('bg-mist/70 text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-ink/45', stickyTop === undefined
+                                        ? ''
+                                        : 'sticky z-docked bg-surface [&_th]:border-b [&_th]:border-line [&>tr]:bg-mist/70'), style: stickyTop === undefined
+                                        ? undefined
+                                        : { top: `calc(${stickyTop} + ${stickyHeight}px)` }, children: _jsxs("tr", { children: [reorder ? (_jsx("th", { className: PallasoftClassNameService.merge('w-9 min-w-9 pl-3 pr-0', pins.reorder), scope: 'col', children: reorder.enabled ? (_jsx("span", { className: 'sr-only', children: reorder.columnLabel })) : reorder.disabledReason ? (_jsx("span", { "aria-label": reorder.disabledReason, className: 'inline-flex cursor-help opacity-40', role: 'img', title: reorder.disabledReason, children: _jsx(PsDragGrip, {}) })) : null })) : null, isSelectable ? (_jsx("th", { className: PallasoftClassNameService.merge('w-10 min-w-10 pl-4 pr-0', pins.select), 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, columnIndex) => {
                                                 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

package/dist/esm/components/ps-select-all-matching-banner.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsTableControlClasses } from '../constants/ps-table-control-classes';
+export const PsSelectAllMatchingBanner = ({ className, isActive, noun = 'rows', onActivate, onDeactivate, pageCount, total, }) => (_jsxs("div", { "aria-live": 'polite', className: PallasoftClassNameService.merge('flex flex-wrap items-center justify-center gap-x-2 gap-y-1 rounded-ps-control bg-primary/10 px-3 py-2 text-sm text-ink', className), role: 'status', children: [_jsx("span", { children: isActive
+                ? `All ${total.toLocaleString()} ${noun} matching are selected.`
+                : `${pageCount.toLocaleString()} ${noun} on this page are selected.` }), _jsx("button", { className: PallasoftClassNameService.merge(PsTableControlClasses.textButton, 'text-primary'), onClick: isActive ? onDeactivate : onActivate, type: 'button', children: isActive ? 'Clear selection' : `Select all ${total.toLocaleString()} matching` })] }));

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

@@ -1,11 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
 import { PsTableControlClasses } from '../constants/ps-table-control-classes';
-export const PsTablePagination = ({ className, isPartial = false, loadedPageCount, onPageChange, page, pageCount, pageSize, totalRows, }) => {
+export const PsTablePagination = ({ className, cursor, isPartial = false, loadedPageCount, onPageChange, page, pageCount, pageSize, totalRows, }) => {
     const firstRow = totalRows === 0 ? 0 : (page - 1) * pageSize + 1;
     const lastRow = Math.min(page * pageSize, totalRows);
+    const approximately = cursor !== undefined && cursor.isEstimate ? 'about ' : '';
+    const pageNumber = cursor === undefined ? Math.min(page, pageCount) : cursor.pageNumber;
+    const cursorFirst = cursor === undefined ? firstRow : (cursor.pageNumber - 1) * pageSize + 1;
+    const cursorLast = cursor === undefined ? lastRow : Math.min(cursor.pageNumber * pageSize, totalRows);
     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}${isPartial ? '+' : ''}` }), _jsxs("div", { className: 'flex items-center gap-2', children: [_jsx("button", { className: PsTableControlClasses.paginationButton, 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: PsTableControlClasses.paginationButton, disabled: page >=
-                            (loadedPageCount === undefined ? pageCount : Math.min(loadedPageCount, pageCount)), onClick: () => onPageChange(page + 1), type: 'button', children: "Next" })] })] }));
+                    : cursor === undefined
+                        ? `${firstRow}–${lastRow} of ${totalRows}${isPartial ? '+' : ''}`
+                        : `${cursorFirst}–${cursorLast} of ${approximately}${totalRows.toLocaleString()}` }), _jsxs("div", { className: 'flex items-center gap-2', children: [cursor !== undefined && cursor.pageSizeOptions !== undefined && cursor.onPageSizeChange ? (_jsxs("label", { className: 'flex items-center gap-2 text-sm text-ink/65', children: [_jsx("span", { className: 'hidden sm:inline', children: "Rows per page" }), _jsx("select", { "aria-label": 'Rows per page', className: 'ps-input-control ps-focus-ring ps-control ps-control-padding rounded-ps-control text-sm', onChange: (event) => cursor.onPageSizeChange?.(Number(event.target.value)), value: pageSize, children: cursor.pageSizeOptions.map((option) => (_jsx("option", { value: option, children: option }, option))) })] })) : null, _jsx("button", { className: PsTableControlClasses.paginationButton, disabled: cursor === undefined ? page <= 1 : !cursor.hasPrevious, onClick: () => (cursor === undefined ? onPageChange(page - 1) : cursor.onPrevious()), type: 'button', children: "Previous" }), _jsxs("span", { className: 'hidden text-sm text-ink/65 sm:inline', children: ["Page ", pageNumber, " of ", approximately, pageCount] }), _jsx("button", { className: PsTableControlClasses.paginationButton, disabled: cursor === undefined
+                            ? page >=
+                                (loadedPageCount === undefined ? pageCount : Math.min(loadedPageCount, pageCount))
+                            : !cursor.hasNext, onClick: () => (cursor === undefined ? onPageChange(page + 1) : cursor.onNext()), onFocus: cursor === undefined ? undefined : cursor.onNextIntent, onPointerEnter: cursor === undefined ? undefined : cursor.onNextIntent, type: 'button', children: "Next" })] })] }));
 };

package/dist/esm/constants/ps-server-rows-config.js

@@ -0,0 +1,8 @@
+export const PsServerRowsConfig = {
+    cacheSize: 8,
+    debounceMs: 250,
+    defaultPageSize: 100,
+    idleFallbackMs: 200,
+    idleTimeoutMs: 1000,
+    pageSizes: [50, 100, 200],
+};

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

@@ -0,0 +1,209 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { PsServerRowsConfig } from '../constants/ps-server-rows-config';
+import { PsServerRowsService } from '../services/ps-server-rows-service';
+const scheduleIdle = (run) => {
+    if (typeof window.requestIdleCallback === 'function') {
+        const handle = window.requestIdleCallback(run, { timeout: PsServerRowsConfig.idleTimeoutMs });
+        return () => window.cancelIdleCallback(handle);
+    }
+    const timer = window.setTimeout(run, PsServerRowsConfig.idleFallbackMs);
+    return () => window.clearTimeout(timer);
+};
+export const usePsServerRows = ({ columns, debounceMs = PsServerRowsConfig.debounceMs, getSearchText, initialPage = null, initialQuery, isPrefetching = true, load, pageSize, }) => {
+    const [query, setQuery] = useState(initialQuery);
+    const [search, setSearch] = useState(initialQuery.search);
+    const [reloadToken, setReloadToken] = useState(0);
+    const [isLoading, setIsLoading] = useState(initialPage === null);
+    const [error, setError] = useState(null);
+    const queryKey = PsServerRowsService.queryKey(query, search, pageSize);
+    const [navigation, setNavigation] = useState({
+        cursor: null,
+        pageNumber: 1,
+        queryKey,
+    });
+    const [entry, setEntry] = useState(() => initialPage === null
+        ? null
+        : {
+            key: PsServerRowsService.cacheKey(queryKey, null),
+            page: initialPage,
+            queryKey,
+        });
+    const cache = useRef(new Map());
+    const inflight = useRef(new Map());
+    const loadRef = useRef(load);
+    const limitRef = useRef(pageSize);
+    const queryRef = useRef(query);
+    const searchRef = useRef(search);
+    const isPrimed = useRef(false);
+    loadRef.current = load;
+    limitRef.current = pageSize;
+    queryRef.current = query;
+    searchRef.current = search;
+    if (initialPage !== null && !isPrimed.current) {
+        isPrimed.current = true;
+        PsServerRowsService.remember(cache.current, PsServerRowsService.cacheKey(queryKey, null), initialPage);
+    }
+    if (navigation.queryKey !== queryKey)
+        setNavigation({ cursor: null, pageNumber: 1, queryKey });
+    useEffect(() => {
+        if (query.search === search)
+            return;
+        const timer = window.setTimeout(() => setSearch(query.search), debounceMs);
+        return () => window.clearTimeout(timer);
+    }, [debounceMs, query.search, search]);
+    const fetchPage = useCallback((cursor, signal, key) => {
+        const pending = inflight.current.get(key);
+        if (pending !== undefined)
+            return pending;
+        const request = loadRef.current({ ...queryRef.current, search: searchRef.current }, cursor, signal, limitRef.current);
+        const tracked = request.then((page) => {
+            inflight.current.delete(key);
+            if (!signal.aborted)
+                PsServerRowsService.remember(cache.current, key, page);
+            return page;
+        }, (failure) => {
+            inflight.current.delete(key);
+            throw failure;
+        });
+        inflight.current.set(key, tracked);
+        return tracked;
+    }, []);
+    const generation = useRef(null);
+    useEffect(() => {
+        const controller = new AbortController();
+        generation.current = controller;
+        return () => {
+            controller.abort();
+            inflight.current.clear();
+        };
+    }, [queryKey, reloadToken]);
+    useEffect(() => {
+        const controller = generation.current;
+        if (controller === null)
+            return;
+        const key = PsServerRowsService.cacheKey(queryKey, navigation.cursor);
+        const cached = PsServerRowsService.recall(cache.current, key);
+        let isStale = false;
+        if (cached !== undefined) {
+            setEntry({ key, page: cached, queryKey });
+            setIsLoading(false);
+            setError(null);
+            return;
+        }
+        setIsLoading(true);
+        setError(null);
+        fetchPage(navigation.cursor, controller.signal, key).then((page) => {
+            if (isStale || controller.signal.aborted)
+                return;
+            setEntry({ key, page, queryKey });
+            setIsLoading(false);
+        }, (failure) => {
+            if (isStale || controller.signal.aborted)
+                return;
+            setError(failure);
+            setIsLoading(false);
+        });
+        return () => {
+            isStale = true;
+        };
+    }, [fetchPage, navigation.cursor, queryKey, reloadToken]);
+    const nextCursor = entry !== null && entry.queryKey === queryKey ? entry.page.nextCursor : null;
+    const prefetch = useCallback(() => {
+        const controller = generation.current;
+        if (controller === null || controller.signal.aborted || nextCursor === null)
+            return;
+        const key = PsServerRowsService.cacheKey(queryKey, nextCursor);
+        if (cache.current.has(key) || inflight.current.has(key))
+            return;
+        fetchPage(nextCursor, controller.signal, key).catch(() => undefined);
+    }, [fetchPage, nextCursor, queryKey]);
+    useEffect(() => {
+        if (!isPrefetching || isLoading || nextCursor === null)
+            return;
+        return scheduleIdle(prefetch);
+    }, [isLoading, isPrefetching, nextCursor, prefetch]);
+    const onQueryChange = useCallback((next) => setQuery(next), []);
+    const goNext = useCallback(() => {
+        if (nextCursor === null)
+            return;
+        setNavigation((current) => ({
+            ...current,
+            cursor: nextCursor,
+            pageNumber: current.pageNumber + 1,
+        }));
+    }, [nextCursor]);
+    const previousCursor = entry !== null && entry.queryKey === queryKey ? entry.page.prevCursor : null;
+    const goPrevious = useCallback(() => {
+        if (previousCursor === null)
+            return;
+        setNavigation((current) => ({
+            ...current,
+            cursor: previousCursor,
+            pageNumber: Math.max(current.pageNumber - 1, 1),
+        }));
+    }, [previousCursor]);
+    const reload = useCallback(() => {
+        cache.current.clear();
+        setNavigation((current) => ({ ...current, cursor: null, pageNumber: 1 }));
+        setReloadToken((current) => current + 1);
+    }, []);
+    const retry = useCallback(() => setReloadToken((current) => current + 1), []);
+    const updateRows = useCallback((update, totalDelta = 0) => {
+        setEntry((current) => {
+            if (current === null)
+                return current;
+            const page = {
+                ...current.page,
+                rows: update(current.page.rows),
+                total: Math.max(current.page.total + totalDelta, 0),
+            };
+            cache.current.clear();
+            PsServerRowsService.remember(cache.current, current.key, page);
+            return { ...current, page };
+        });
+    }, []);
+    const isCurrent = entry !== null &&
+        entry.queryKey === queryKey &&
+        entry.key === PsServerRowsService.cacheKey(queryKey, navigation.cursor);
+    const baseRows = useMemo(() => (entry === null ? [] : entry.page.rows), [entry]);
+    const isSameQuery = entry !== null && entry.queryKey === queryKey;
+    const rows = useMemo(() => isSameQuery ? baseRows : PsServerRowsService.preview(baseRows, columns, query, getSearchText), [baseRows, columns, getSearchText, isSameQuery, query]);
+    const total = entry === null ? 0 : entry.page.total;
+    const totalIsEstimate = entry === null ? false : entry.page.totalIsEstimate;
+    const isPending = isLoading || query.search !== search || !isCurrent;
+    const cursorPaging = useMemo(() => ({
+        hasNext: nextCursor !== null,
+        hasPrevious: previousCursor !== null,
+        isEstimate: totalIsEstimate,
+        isPending,
+        onNext: goNext,
+        onNextIntent: prefetch,
+        onPrevious: goPrevious,
+        pageNumber: navigation.pageNumber,
+    }), [
+        goNext,
+        goPrevious,
+        isPending,
+        navigation.pageNumber,
+        nextCursor,
+        prefetch,
+        previousCursor,
+        totalIsEstimate,
+    ]);
+    return {
+        cursorPaging,
+        error,
+        hasFailed: error !== null,
+        isPending,
+        onQueryChange,
+        pageCount: PsServerRowsService.pageCount(total, pageSize),
+        pageNumber: navigation.pageNumber,
+        query,
+        reload,
+        retry,
+        rows,
+        total,
+        totalIsEstimate,
+        updateRows,
+    };
+};

package/dist/esm/index.js

@@ -49,3 +49,13 @@ export * from './constants/ps-table-drop-placement';
 export * from './services/ps-table-reorder-service';
 export * from './constants/ps-table-pagination-position';
 export * from './interfaces/table-drag-size';
+export * from './components/ps-select-all-matching-banner';
+export * from './constants/ps-server-rows-config';
+export * from './hooks/use-ps-server-rows';
+export * from './interfaces/ps-server-entry';
+export * from './interfaces/ps-server-page';
+export * from './interfaces/ps-server-rows-input';
+export * from './interfaces/ps-server-rows-result';
+export * from './interfaces/ps-table-cursor-paging';
+export * from './interfaces/ps-table-select-all-matching';
+export * from './services/ps-server-rows-service';

package/dist/esm/interfaces/ps-server-entry.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/interfaces/ps-server-page.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/interfaces/ps-server-rows-input.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/interfaces/ps-server-rows-result.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/interfaces/ps-table-cursor-paging.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/interfaces/ps-table-select-all-matching.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/services/ps-server-rows-service.js

@@ -0,0 +1,36 @@
+import { PsServerRowsConfig } from '../constants/ps-server-rows-config';
+import { PsTableQueryService } from './ps-table-query-service';
+export class PsServerRowsService {
+    static queryKey(query, search, pageSize) {
+        const filters = Object.entries(query.filters)
+            .filter(([, value]) => PsTableQueryService.isActive(value))
+            .sort(([left], [right]) => left.localeCompare(right));
+        return JSON.stringify([filters, search.trim(), query.sort, pageSize]);
+    }
+    static cacheKey(queryKey, cursor) {
+        return `${queryKey}|${cursor === null ? '' : cursor}`;
+    }
+    static remember(cache, key, page) {
+        cache.delete(key);
+        cache.set(key, page);
+        for (const oldest of cache.keys()) {
+            if (cache.size <= PsServerRowsConfig.cacheSize)
+                return;
+            cache.delete(oldest);
+        }
+    }
+    static recall(cache, key) {
+        const page = cache.get(key);
+        if (page === undefined)
+            return undefined;
+        cache.delete(key);
+        cache.set(key, page);
+        return page;
+    }
+    static preview(rows, columns, query, getSearchText) {
+        return PsTableQueryService.apply(rows, columns, query.filters, query.search, getSearchText, query.sort);
+    }
+    static pageCount(total, pageSize) {
+        return Math.max(Math.ceil(total / pageSize), 1);
+    }
+}

package/dist/hooks/use-ps-server-rows.d.ts

@@ -0,0 +1,3 @@
+import type { PsServerRowsInput } from '../interfaces/ps-server-rows-input';
+import type { PsServerRowsResult } from '../interfaces/ps-server-rows-result';
+export declare const usePsServerRows: <RowData>({ columns, debounceMs, getSearchText, initialPage, initialQuery, isPrefetching, load, pageSize, }: PsServerRowsInput<RowData>) => PsServerRowsResult<RowData>;

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

@@ -0,0 +1,213 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsServerRows = void 0;
+const react_1 = require("react");
+const ps_server_rows_config_1 = require("../constants/ps-server-rows-config");
+const ps_server_rows_service_1 = require("../services/ps-server-rows-service");
+const scheduleIdle = (run) => {
+    if (typeof window.requestIdleCallback === 'function') {
+        const handle = window.requestIdleCallback(run, { timeout: ps_server_rows_config_1.PsServerRowsConfig.idleTimeoutMs });
+        return () => window.cancelIdleCallback(handle);
+    }
+    const timer = window.setTimeout(run, ps_server_rows_config_1.PsServerRowsConfig.idleFallbackMs);
+    return () => window.clearTimeout(timer);
+};
+const usePsServerRows = ({ columns, debounceMs = ps_server_rows_config_1.PsServerRowsConfig.debounceMs, getSearchText, initialPage = null, initialQuery, isPrefetching = true, load, pageSize, }) => {
+    const [query, setQuery] = (0, react_1.useState)(initialQuery);
+    const [search, setSearch] = (0, react_1.useState)(initialQuery.search);
+    const [reloadToken, setReloadToken] = (0, react_1.useState)(0);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(initialPage === null);
+    const [error, setError] = (0, react_1.useState)(null);
+    const queryKey = ps_server_rows_service_1.PsServerRowsService.queryKey(query, search, pageSize);
+    const [navigation, setNavigation] = (0, react_1.useState)({
+        cursor: null,
+        pageNumber: 1,
+        queryKey,
+    });
+    const [entry, setEntry] = (0, react_1.useState)(() => initialPage === null
+        ? null
+        : {
+            key: ps_server_rows_service_1.PsServerRowsService.cacheKey(queryKey, null),
+            page: initialPage,
+            queryKey,
+        });
+    const cache = (0, react_1.useRef)(new Map());
+    const inflight = (0, react_1.useRef)(new Map());
+    const loadRef = (0, react_1.useRef)(load);
+    const limitRef = (0, react_1.useRef)(pageSize);
+    const queryRef = (0, react_1.useRef)(query);
+    const searchRef = (0, react_1.useRef)(search);
+    const isPrimed = (0, react_1.useRef)(false);
+    loadRef.current = load;
+    limitRef.current = pageSize;
+    queryRef.current = query;
+    searchRef.current = search;
+    if (initialPage !== null && !isPrimed.current) {
+        isPrimed.current = true;
+        ps_server_rows_service_1.PsServerRowsService.remember(cache.current, ps_server_rows_service_1.PsServerRowsService.cacheKey(queryKey, null), initialPage);
+    }
+    if (navigation.queryKey !== queryKey)
+        setNavigation({ cursor: null, pageNumber: 1, queryKey });
+    (0, react_1.useEffect)(() => {
+        if (query.search === search)
+            return;
+        const timer = window.setTimeout(() => setSearch(query.search), debounceMs);
+        return () => window.clearTimeout(timer);
+    }, [debounceMs, query.search, search]);
+    const fetchPage = (0, react_1.useCallback)((cursor, signal, key) => {
+        const pending = inflight.current.get(key);
+        if (pending !== undefined)
+            return pending;
+        const request = loadRef.current({ ...queryRef.current, search: searchRef.current }, cursor, signal, limitRef.current);
+        const tracked = request.then((page) => {
+            inflight.current.delete(key);
+            if (!signal.aborted)
+                ps_server_rows_service_1.PsServerRowsService.remember(cache.current, key, page);
+            return page;
+        }, (failure) => {
+            inflight.current.delete(key);
+            throw failure;
+        });
+        inflight.current.set(key, tracked);
+        return tracked;
+    }, []);
+    const generation = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const controller = new AbortController();
+        generation.current = controller;
+        return () => {
+            controller.abort();
+            inflight.current.clear();
+        };
+    }, [queryKey, reloadToken]);
+    (0, react_1.useEffect)(() => {
+        const controller = generation.current;
+        if (controller === null)
+            return;
+        const key = ps_server_rows_service_1.PsServerRowsService.cacheKey(queryKey, navigation.cursor);
+        const cached = ps_server_rows_service_1.PsServerRowsService.recall(cache.current, key);
+        let isStale = false;
+        if (cached !== undefined) {
+            setEntry({ key, page: cached, queryKey });
+            setIsLoading(false);
+            setError(null);
+            return;
+        }
+        setIsLoading(true);
+        setError(null);
+        fetchPage(navigation.cursor, controller.signal, key).then((page) => {
+            if (isStale || controller.signal.aborted)
+                return;
+            setEntry({ key, page, queryKey });
+            setIsLoading(false);
+        }, (failure) => {
+            if (isStale || controller.signal.aborted)
+                return;
+            setError(failure);
+            setIsLoading(false);
+        });
+        return () => {
+            isStale = true;
+        };
+    }, [fetchPage, navigation.cursor, queryKey, reloadToken]);
+    const nextCursor = entry !== null && entry.queryKey === queryKey ? entry.page.nextCursor : null;
+    const prefetch = (0, react_1.useCallback)(() => {
+        const controller = generation.current;
+        if (controller === null || controller.signal.aborted || nextCursor === null)
+            return;
+        const key = ps_server_rows_service_1.PsServerRowsService.cacheKey(queryKey, nextCursor);
+        if (cache.current.has(key) || inflight.current.has(key))
+            return;
+        fetchPage(nextCursor, controller.signal, key).catch(() => undefined);
+    }, [fetchPage, nextCursor, queryKey]);
+    (0, react_1.useEffect)(() => {
+        if (!isPrefetching || isLoading || nextCursor === null)
+            return;
+        return scheduleIdle(prefetch);
+    }, [isLoading, isPrefetching, nextCursor, prefetch]);
+    const onQueryChange = (0, react_1.useCallback)((next) => setQuery(next), []);
+    const goNext = (0, react_1.useCallback)(() => {
+        if (nextCursor === null)
+            return;
+        setNavigation((current) => ({
+            ...current,
+            cursor: nextCursor,
+            pageNumber: current.pageNumber + 1,
+        }));
+    }, [nextCursor]);
+    const previousCursor = entry !== null && entry.queryKey === queryKey ? entry.page.prevCursor : null;
+    const goPrevious = (0, react_1.useCallback)(() => {
+        if (previousCursor === null)
+            return;
+        setNavigation((current) => ({
+            ...current,
+            cursor: previousCursor,
+            pageNumber: Math.max(current.pageNumber - 1, 1),
+        }));
+    }, [previousCursor]);
+    const reload = (0, react_1.useCallback)(() => {
+        cache.current.clear();
+        setNavigation((current) => ({ ...current, cursor: null, pageNumber: 1 }));
+        setReloadToken((current) => current + 1);
+    }, []);
+    const retry = (0, react_1.useCallback)(() => setReloadToken((current) => current + 1), []);
+    const updateRows = (0, react_1.useCallback)((update, totalDelta = 0) => {
+        setEntry((current) => {
+            if (current === null)
+                return current;
+            const page = {
+                ...current.page,
+                rows: update(current.page.rows),
+                total: Math.max(current.page.total + totalDelta, 0),
+            };
+            cache.current.clear();
+            ps_server_rows_service_1.PsServerRowsService.remember(cache.current, current.key, page);
+            return { ...current, page };
+        });
+    }, []);
+    const isCurrent = entry !== null &&
+        entry.queryKey === queryKey &&
+        entry.key === ps_server_rows_service_1.PsServerRowsService.cacheKey(queryKey, navigation.cursor);
+    const baseRows = (0, react_1.useMemo)(() => (entry === null ? [] : entry.page.rows), [entry]);
+    const isSameQuery = entry !== null && entry.queryKey === queryKey;
+    const rows = (0, react_1.useMemo)(() => isSameQuery ? baseRows : ps_server_rows_service_1.PsServerRowsService.preview(baseRows, columns, query, getSearchText), [baseRows, columns, getSearchText, isSameQuery, query]);
+    const total = entry === null ? 0 : entry.page.total;
+    const totalIsEstimate = entry === null ? false : entry.page.totalIsEstimate;
+    const isPending = isLoading || query.search !== search || !isCurrent;
+    const cursorPaging = (0, react_1.useMemo)(() => ({
+        hasNext: nextCursor !== null,
+        hasPrevious: previousCursor !== null,
+        isEstimate: totalIsEstimate,
+        isPending,
+        onNext: goNext,
+        onNextIntent: prefetch,
+        onPrevious: goPrevious,
+        pageNumber: navigation.pageNumber,
+    }), [
+        goNext,
+        goPrevious,
+        isPending,
+        navigation.pageNumber,
+        nextCursor,
+        prefetch,
+        previousCursor,
+        totalIsEstimate,
+    ]);
+    return {
+        cursorPaging,
+        error,
+        hasFailed: error !== null,
+        isPending,
+        onQueryChange,
+        pageCount: ps_server_rows_service_1.PsServerRowsService.pageCount(total, pageSize),
+        pageNumber: navigation.pageNumber,
+        query,
+        reload,
+        retry,
+        rows,
+        total,
+        totalIsEstimate,
+        updateRows,
+    };
+};
+exports.usePsServerRows = usePsServerRows;

package/dist/index.d.ts

@@ -49,3 +49,13 @@ export * from './constants/ps-table-drop-placement';
 export * from './services/ps-table-reorder-service';
 export * from './constants/ps-table-pagination-position';
 export * from './interfaces/table-drag-size';
+export * from './components/ps-select-all-matching-banner';
+export * from './constants/ps-server-rows-config';
+export * from './hooks/use-ps-server-rows';
+export * from './interfaces/ps-server-entry';
+export * from './interfaces/ps-server-page';
+export * from './interfaces/ps-server-rows-input';
+export * from './interfaces/ps-server-rows-result';
+export * from './interfaces/ps-table-cursor-paging';
+export * from './interfaces/ps-table-select-all-matching';
+export * from './services/ps-server-rows-service';

package/dist/index.js

@@ -65,3 +65,13 @@ __exportStar(require("./constants/ps-table-drop-placement"), exports);
 __exportStar(require("./services/ps-table-reorder-service"), exports);
 __exportStar(require("./constants/ps-table-pagination-position"), exports);
 __exportStar(require("./interfaces/table-drag-size"), exports);
+__exportStar(require("./components/ps-select-all-matching-banner"), exports);
+__exportStar(require("./constants/ps-server-rows-config"), exports);
+__exportStar(require("./hooks/use-ps-server-rows"), exports);
+__exportStar(require("./interfaces/ps-server-entry"), exports);
+__exportStar(require("./interfaces/ps-server-page"), exports);
+__exportStar(require("./interfaces/ps-server-rows-input"), exports);
+__exportStar(require("./interfaces/ps-server-rows-result"), exports);
+__exportStar(require("./interfaces/ps-table-cursor-paging"), exports);
+__exportStar(require("./interfaces/ps-table-select-all-matching"), exports);
+__exportStar(require("./services/ps-server-rows-service"), exports);

package/dist/interfaces/ps-server-entry.d.ts

@@ -0,0 +1,6 @@
+import type { PsServerPage } from './ps-server-page';
+export interface PsServerEntry<RowData> {
+    key: string;
+    page: PsServerPage<RowData>;
+    queryKey: string;
+}

package/dist/interfaces/ps-server-entry.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/interfaces/ps-server-page.d.ts

@@ -0,0 +1,7 @@
+export interface PsServerPage<RowData> {
+    nextCursor: string | null;
+    prevCursor: string | null;
+    rows: RowData[];
+    total: number;
+    totalIsEstimate: boolean;
+}

package/dist/interfaces/ps-server-page.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/interfaces/ps-server-rows-input.d.ts

@@ -0,0 +1,13 @@
+import type { PsServerPage } from './ps-server-page';
+import type { PsTableColumn } from './table-column';
+import type { PsTableQuery } from './table-query';
+export interface PsServerRowsInput<RowData> {
+    columns: PsTableColumn<RowData>[];
+    debounceMs?: number;
+    getSearchText?: (row: RowData) => string;
+    initialPage?: PsServerPage<RowData> | null;
+    initialQuery: PsTableQuery;
+    isPrefetching?: boolean;
+    load: (query: PsTableQuery, cursor: string | null, signal: AbortSignal, limit: number) => Promise<PsServerPage<RowData>>;
+    pageSize: number;
+}

package/dist/interfaces/ps-server-rows-input.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/interfaces/ps-server-rows-result.d.ts

@@ -0,0 +1,18 @@
+import type { PsTableCursorPaging } from './ps-table-cursor-paging';
+import type { PsTableQuery } from './table-query';
+export interface PsServerRowsResult<RowData> {
+    cursorPaging: PsTableCursorPaging;
+    error: unknown;
+    hasFailed: boolean;
+    isPending: boolean;
+    onQueryChange: (query: PsTableQuery) => void;
+    pageCount: number;
+    pageNumber: number;
+    query: PsTableQuery;
+    reload: () => void;
+    retry: () => void;
+    rows: RowData[];
+    total: number;
+    totalIsEstimate: boolean;
+    updateRows: (update: (rows: RowData[]) => RowData[], totalDelta?: number) => void;
+}

package/dist/interfaces/ps-server-rows-result.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/interfaces/ps-table-cursor-paging.d.ts

@@ -0,0 +1,12 @@
+export interface PsTableCursorPaging {
+    hasNext: boolean;
+    hasPrevious: boolean;
+    isEstimate: boolean;
+    isPending?: boolean;
+    onNext: () => void;
+    onNextIntent?: () => void;
+    onPageSizeChange?: (pageSize: number) => void;
+    onPrevious: () => void;
+    pageNumber: number;
+    pageSizeOptions?: number[];
+}

package/dist/interfaces/ps-table-cursor-paging.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/interfaces/ps-table-select-all-matching.d.ts

@@ -0,0 +1,7 @@
+export interface PsTableSelectAllMatching {
+    isActive: boolean;
+    noun?: string;
+    onActivate: () => void;
+    onDeactivate: () => void;
+    total: number;
+}

package/dist/interfaces/ps-table-select-all-matching.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/services/ps-server-rows-service.d.ts

@@ -0,0 +1,11 @@
+import type { PsServerPage } from '../interfaces/ps-server-page';
+import type { PsTableColumn } from '../interfaces/table-column';
+import type { PsTableQuery } from '../interfaces/table-query';
+export declare class PsServerRowsService {
+    static queryKey(query: PsTableQuery, search: string, pageSize: number): string;
+    static cacheKey(queryKey: string, cursor: string | null): string;
+    static remember<RowData>(cache: Map<string, PsServerPage<RowData>>, key: string, page: PsServerPage<RowData>): void;
+    static recall<RowData>(cache: Map<string, PsServerPage<RowData>>, key: string): PsServerPage<RowData> | undefined;
+    static preview<RowData>(rows: RowData[], columns: PsTableColumn<RowData>[], query: PsTableQuery, getSearchText: ((row: RowData) => string) | undefined): RowData[];
+    static pageCount(total: number, pageSize: number): number;
+}

package/dist/services/ps-server-rows-service.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsServerRowsService = void 0;
+const ps_server_rows_config_1 = require("../constants/ps-server-rows-config");
+const ps_table_query_service_1 = require("./ps-table-query-service");
+class PsServerRowsService {
+    static queryKey(query, search, pageSize) {
+        const filters = Object.entries(query.filters)
+            .filter(([, value]) => ps_table_query_service_1.PsTableQueryService.isActive(value))
+            .sort(([left], [right]) => left.localeCompare(right));
+        return JSON.stringify([filters, search.trim(), query.sort, pageSize]);
+    }
+    static cacheKey(queryKey, cursor) {
+        return `${queryKey}|${cursor === null ? '' : cursor}`;
+    }
+    static remember(cache, key, page) {
+        cache.delete(key);
+        cache.set(key, page);
+        for (const oldest of cache.keys()) {
+            if (cache.size <= ps_server_rows_config_1.PsServerRowsConfig.cacheSize)
+                return;
+            cache.delete(oldest);
+        }
+    }
+    static recall(cache, key) {
+        const page = cache.get(key);
+        if (page === undefined)
+            return undefined;
+        cache.delete(key);
+        cache.set(key, page);
+        return page;
+    }
+    static preview(rows, columns, query, getSearchText) {
+        return ps_table_query_service_1.PsTableQueryService.apply(rows, columns, query.filters, query.search, getSearchText, query.sort);
+    }
+    static pageCount(total, pageSize) {
+        return Math.max(Math.ceil(total / pageSize), 1);
+    }
+}
+exports.PsServerRowsService = PsServerRowsService;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-table-components",
-	"version": "1.26.0",
+	"version": "1.27.0",
 	"private": false,
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",