@pallasoft/ps-table-components 1.18.1 → 1.20.0

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

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

package/dist/esm/index.js

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

package/dist/esm/interfaces/table-scroll-anchor-target.js

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

package/dist/esm/interfaces/table-scroll-anchor.js

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

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

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

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

@@ -0,0 +1,17 @@
+export class PsTableScrollAnchorService {
+    static capture(items, rowIds, scrollOffset) {
+        const item = items.find((candidate) => candidate.start >= scrollOffset);
+        const anchored = item === undefined ? items[0] : item;
+        if (anchored === undefined || rowIds[anchored.index] === undefined)
+            return null;
+        return { distance: anchored.start - scrollOffset, id: rowIds[anchored.index] };
+    }
+    static movedTo(anchor, previousRowIds, rowIds) {
+        const previousIndex = previousRowIds.indexOf(anchor.id);
+        const index = rowIds.indexOf(anchor.id);
+        return index < 0 || previousIndex < 0 || index === previousIndex ? null : index;
+    }
+    static offset(rowStart, anchor) {
+        return Math.max(rowStart - anchor.distance, 0);
+    }
+}

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

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

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

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

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

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

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

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

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

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

package/dist/hooks/use-ps-scroll-anchor.d.ts

@@ -0,0 +1,2 @@
+import type { PsTableScrollAnchorTarget } from '../interfaces/table-scroll-anchor-target';
+export declare const usePsScrollAnchor: (target: PsTableScrollAnchorTarget, rowIds: string[], isActive: boolean) => void;

package/dist/hooks/use-ps-scroll-anchor.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsScrollAnchor = void 0;
+const react_1 = require("react");
+const ps_table_scroll_anchor_service_1 = require("../services/ps-table-scroll-anchor-service");
+const usePsScrollAnchor = (target, rowIds, isActive) => {
+    const anchor = (0, react_1.useRef)(null);
+    const previousRowIds = (0, react_1.useRef)(rowIds);
+    (0, react_1.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 = ps_table_scroll_anchor_service_1.PsTableScrollAnchorService.movedTo(previous, previousRowIds.current, rowIds);
+            const start = index === null ? undefined : target.getOffsetForIndex(index, 'start');
+            previousRowIds.current = rowIds;
+            if (start !== undefined) {
+                target.scrollToOffset(ps_table_scroll_anchor_service_1.PsTableScrollAnchorService.offset(start[0], previous));
+                return;
+            }
+        }
+        previousRowIds.current = rowIds;
+        anchor.current = ps_table_scroll_anchor_service_1.PsTableScrollAnchorService.capture(target.getVirtualItems(), rowIds, offset);
+    });
+};
+exports.usePsScrollAnchor = usePsScrollAnchor;

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

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

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/interfaces/table-scroll-anchor-target.d.ts

@@ -0,0 +1,10 @@
+export interface PsTableScrollAnchorItem {
+    index: number;
+    start: number;
+}
+export interface PsTableScrollAnchorTarget {
+    getOffsetForIndex: (index: number, align: 'start') => readonly [number, string] | undefined;
+    getVirtualItems: () => PsTableScrollAnchorItem[];
+    scrollOffset: number | null;
+    scrollToOffset: (offset: number) => void;
+}

package/dist/interfaces/table-scroll-anchor-target.js

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

package/dist/interfaces/table-scroll-anchor.d.ts

@@ -0,0 +1,4 @@
+export interface PsTableScrollAnchor {
+    distance: number;
+    id: string;
+}

package/dist/interfaces/table-scroll-anchor.js

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

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

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

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

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

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

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

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

@@ -0,0 +1,7 @@
+import type { PsTableScrollAnchor } from '../interfaces/table-scroll-anchor';
+import type { PsTableScrollAnchorItem } from '../interfaces/table-scroll-anchor-target';
+export declare class PsTableScrollAnchorService {
+    static capture(items: PsTableScrollAnchorItem[], rowIds: string[], scrollOffset: number): PsTableScrollAnchor | null;
+    static movedTo(anchor: PsTableScrollAnchor, previousRowIds: string[], rowIds: string[]): number | null;
+    static offset(rowStart: number, anchor: PsTableScrollAnchor): number;
+}

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTableScrollAnchorService = void 0;
+class PsTableScrollAnchorService {
+    static capture(items, rowIds, scrollOffset) {
+        const item = items.find((candidate) => candidate.start >= scrollOffset);
+        const anchored = item === undefined ? items[0] : item;
+        if (anchored === undefined || rowIds[anchored.index] === undefined)
+            return null;
+        return { distance: anchored.start - scrollOffset, id: rowIds[anchored.index] };
+    }
+    static movedTo(anchor, previousRowIds, rowIds) {
+        const previousIndex = previousRowIds.indexOf(anchor.id);
+        const index = rowIds.indexOf(anchor.id);
+        return index < 0 || previousIndex < 0 || index === previousIndex ? null : index;
+    }
+    static offset(rowStart, anchor) {
+        return Math.max(rowStart - anchor.distance, 0);
+    }
+}
+exports.PsTableScrollAnchorService = PsTableScrollAnchorService;

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

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

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

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