svelte-tably 1.1.2 → 1.3.0

package/dist/table/Table.svelte.d.ts

@@ -1,110 +1,39 @@
-import { SvelteComponent } from "svelte";
-import { type Snippet } from 'svelte';
+import type { Snippet } from 'svelte';
 import { TableState, type TableProps } from './table-state.svelte.js';
-import { type RowColumnCtx } from '../column/column-state.svelte.js';
+import Column from '../column/Column.svelte';
+import Panel from '../panel/Panel.svelte';
+import Expandable from '../expandable/Expandable.svelte';
+import Row from '../row/Row.svelte';
+type ConstructorReturnType<C extends new (...args: any[]) => any> = C extends new (...args: any[]) => infer K ? K : never;
+type ConstructorParams<C extends new (...args: any[]) => any> = C extends new (...args: infer K) => any ? K : never;
+export type ContentCtx<Item = any> = {
+    Column: {
+        new <V>(...args: ConstructorParams<typeof Column<Item, V>>): ConstructorReturnType<typeof Column<Item, V>>;
+        <V>(...args: Parameters<typeof Column<Item, V>>): ReturnType<typeof Column<Item, V>>;
+    };
+    Panel: typeof Panel<Item>;
+    Expandable: typeof Expandable<Item>;
+    Row: typeof Row<Item>;
+    readonly table: TableState<Item>;
+};
+export type ContentSnippet<Item = any> = Snippet<[context: ContentCtx<Item>]>;
 import type { CSVOptions } from './csv.js';
-declare class __sveltets_Render<T extends Record<PropertyKey, unknown>> {
+declare class __sveltets_Render<T> {
     props(): TableProps<T> & {
-        content?: Snippet<[context: {
-            Column: {
-                <V>(internal: unknown, props: {
-                    id: string;
-                    table?: TableState<T> | undefined;
-                    header?: string | Snippet<[ctx: import("../column/column-state.svelte.js").HeaderCtx<T>]> | undefined;
-                    row?: Snippet<[item: T, ctx: RowColumnCtx<T, V>]> | undefined;
-                    statusbar?: Snippet<[ctx: import("../column/column-state.svelte.js").StatusbarCtx<T>]> | undefined;
-                    sticky?: boolean | undefined;
-                    show?: boolean | undefined;
-                    sortby?: boolean | undefined;
-                    width?: number | undefined;
-                    fixed?: boolean | undefined;
-                    value?: ((item: T) => V) | undefined;
-                    sort?: boolean | ((a: V, b: V) => number) | undefined;
-                    resizeable?: boolean | undefined;
-                    filter?: ((value: V) => boolean) | undefined;
-                    style?: string | undefined;
-                    class?: string | undefined;
-                    onclick?: ((event: MouseEvent, rowColumnCtx: RowColumnCtx<T, V>) => void) | undefined;
-                    pad?: "row" | "header" | "both" | undefined;
-                }): {};
-                new <V>(options: import("svelte").ComponentConstructorOptions<{
-                    id: string;
-                    table?: TableState<T> | undefined;
-                    header?: string | Snippet<[ctx: import("../column/column-state.svelte.js").HeaderCtx<T>]> | undefined;
-                    row?: Snippet<[item: T, ctx: RowColumnCtx<T, V>]> | undefined;
-                    statusbar?: Snippet<[ctx: import("../column/column-state.svelte.js").StatusbarCtx<T>]> | undefined;
-                    sticky?: boolean | undefined;
-                    show?: boolean | undefined;
-                    sortby?: boolean | undefined;
-                    width?: number | undefined;
-                    fixed?: boolean | undefined;
-                    value?: ((item: T) => V) | undefined;
-                    sort?: boolean | ((a: V, b: V) => number) | undefined;
-                    resizeable?: boolean | undefined;
-                    filter?: ((value: V) => boolean) | undefined;
-                    style?: string | undefined;
-                    class?: string | undefined;
-                    onclick?: ((event: MouseEvent, rowColumnCtx: RowColumnCtx<T, V>) => void) | undefined;
-                    pad?: "row" | "header" | "both" | undefined;
-                }>): SvelteComponent<{
-                    id: string;
-                    table?: TableState<T> | undefined;
-                    header?: string | Snippet<[ctx: import("../column/column-state.svelte.js").HeaderCtx<T>]> | undefined;
-                    row?: Snippet<[item: T, ctx: RowColumnCtx<T, V>]> | undefined;
-                    statusbar?: Snippet<[ctx: import("../column/column-state.svelte.js").StatusbarCtx<T>]> | undefined;
-                    sticky?: boolean | undefined;
-                    show?: boolean | undefined;
-                    sortby?: boolean | undefined;
-                    width?: number | undefined;
-                    fixed?: boolean | undefined;
-                    value?: ((item: T) => V) | undefined;
-                    sort?: boolean | ((a: V, b: V) => number) | undefined;
-                    resizeable?: boolean | undefined;
-                    filter?: ((value: V) => boolean) | undefined;
-                    style?: string | undefined;
-                    class?: string | undefined;
-                    onclick?: ((event: MouseEvent, rowColumnCtx: RowColumnCtx<T, V>) => void) | undefined;
-                    pad?: "row" | "header" | "both" | undefined;
-                }, {}, {}> & {
-                    $$bindings?: ReturnType<() => "">;
-                } & {};
-            };
-            Panel: {
-                (internal: unknown, props: import("../index.js").PanelProps<T>): {};
-                new (options: import("svelte").ComponentConstructorOptions<import("../index.js").PanelProps<T>>): SvelteComponent<import("../index.js").PanelProps<T>, {}, {}> & {
-                    $$bindings?: ReturnType<() => "">;
-                };
-                z_$$bindings?: ReturnType<() => "">;
-            };
-            Expandable: {
-                (internal: unknown, props: import("../index.js").ExpandableProps<T>): {};
-                new (options: import("svelte").ComponentConstructorOptions<import("../index.js").ExpandableProps<T>>): SvelteComponent<import("../index.js").ExpandableProps<T>, {}, {}> & {
-                    $$bindings?: ReturnType<() => "">;
-                };
-                z_$$bindings?: ReturnType<() => "">;
-            };
-            Row: {
-                (internal: unknown, props: import("../index.js").RowProps<T>): {};
-                new (options: import("svelte").ComponentConstructorOptions<import("../index.js").RowProps<T>>): SvelteComponent<import("../index.js").RowProps<T>, {}, {}> & {
-                    $$bindings?: ReturnType<() => "">;
-                };
-                z_$$bindings?: ReturnType<() => "">;
-            };
-            readonly table: TableState<T>;
-        }]> | undefined;
+        content?: ContentSnippet<T> | undefined;
     };
     events(): {};
     slots(): {};
-    bindings(): "table" | "selected" | "panel" | "data";
+    bindings(): "table" | "data" | "selected" | "panel";
     exports(): {
         toCSV: (options?: CSVOptions<T>) => Promise<string>;
     };
 }
 interface $$IsomorphicComponent {
-    new <T extends Record<PropertyKey, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
     } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends Record<PropertyKey, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 /**
@@ -115,5 +44,5 @@ interface $$IsomorphicComponent {
  * <Component />
  */
 declare const Table: $$IsomorphicComponent;
-type Table<T extends Record<PropertyKey, unknown>> = InstanceType<typeof Table<T>>;
+type Table<T> = InstanceType<typeof Table<T>>;
 export default Table;

package/dist/table/data.svelte.js

@@ -51,7 +51,7 @@ export class Data {
     constructor(table, props) {
         this.#table = table;
         this.origin = props.data;
-        this.sorted = this.origin.toSorted();
+        this.sorted = [...this.origin];
         this.filtered = this.sorted;
         $effect(() => {
             this.origin = props.data;
@@ -67,15 +67,28 @@ export class Data {
             const table = this.#table;
             if (props.reorderable)
                 return;
-            const filters = [...props.filters ?? []];
+            // Track dependencies explicitly
+            props.filters;
+            this.sorted;
             for (const key in table.columns) {
-                const filter = table.columns[key].options.filter;
-                const valueOf = table.columns[key].options.value;
-                if (filter && valueOf) {
-                    filters.push((item) => filter(valueOf(item)));
-                }
+                table.columns[key].options.filter;
+                table.columns[key].options.value;
             }
-            this.filtered = filters.length === 0 ? this.sorted : this.sorted.filter((value) => filters.every((filter) => filter(value)));
+            const filters = untrack(() => {
+                const all = [...props.filters ?? []];
+                for (const key in table.columns) {
+                    const filter = table.columns[key].options.filter;
+                    const valueOf = table.columns[key].options.value;
+                    if (filter && valueOf) {
+                        all.push((item) => filter(valueOf(item)));
+                    }
+                }
+                return all;
+            });
+            this.filtered =
+                filters.length === 0 ?
+                    this.sorted
+                    : this.sorted.filter((value) => filters.every((filter) => filter(value)));
         });
     }
 }

package/dist/table/table-state.svelte.d.ts

@@ -5,7 +5,7 @@ import { Data } from './data.svelte.js';
 import type { ExpandableState } from '../expandable/expandable-state.svelte.js';
 import type { ItemState } from 'runic-reorder';
 import type { RowState } from '../row/row-state.svelte.js';
-import { CSVOptions } from "./csv.js";
+import type { CSVOptions } from './csv.js';
 export type HeaderSelectCtx<T = any> = {
     isSelected: boolean;
     /** The list of selected items */

package/dist/table/table-state.svelte.js

@@ -104,7 +104,23 @@ export class TableState {
     }
     /** Width of each column */
     columnWidths = $state({});
+    #storageKey() {
+        if (!this.id)
+            return null;
+        return `svelte-tably:${this.id}`;
+    }
+    #getStorage() {
+        try {
+            return localStorage;
+        }
+        catch {
+            return null;
+        }
+    }
     #save() {
+        const key = this.#storageKey();
+        if (!key)
+            return;
         const content = {
             columnWidths: this.columnWidths,
             positions: {
@@ -116,24 +132,56 @@ export class TableState {
             sortby: this.dataState.sortby,
             sortReverse: this.dataState.sortReverse
         };
-        localStorage.setItem(`svelte-tably:${this.id}`, JSON.stringify(content));
+        const storage = this.#getStorage();
+        if (!storage)
+            return;
+        try {
+            storage.setItem(key, JSON.stringify(content));
+        }
+        catch {
+            return;
+        }
     }
     #saving = false;
+    #saveTimeout = null;
     #scheduleSave() {
         if (this.#saving)
             return;
-        if (typeof localStorage === 'undefined')
+        if (!this.#storageKey())
+            return;
+        if (!this.#getStorage())
             return;
         this.#saving = true;
-        setTimeout(() => {
+        if (this.#saveTimeout)
+            clearTimeout(this.#saveTimeout);
+        this.#saveTimeout = setTimeout(() => {
             this.#saving = false;
             this.#save();
         }, 1000);
     }
     #load() {
-        if (typeof localStorage === 'undefined')
+        const key = this.#storageKey();
+        if (!key)
+            return null;
+        const storage = this.#getStorage();
+        if (!storage)
             return null;
-        const item = JSON.parse(localStorage.getItem(`svelte-tably:${this.id}`) || '{}');
+        let raw = null;
+        try {
+            raw = storage.getItem(key);
+        }
+        catch {
+            return null;
+        }
+        let item;
+        try {
+            item = JSON.parse(raw || '{}');
+        }
+        catch {
+            return null;
+        }
+        if (!item || typeof item !== 'object')
+            item = {};
         item.columnWidths ??= {};
         item.positions ??= {};
         item.positions.fixed ??= [];
@@ -163,9 +211,20 @@ export class TableState {
                 this.dataState.sortReverse = saved.sortReverse;
             }
         }
-        if (typeof window !== 'undefined') {
-            window.addEventListener('beforeunload', () => this.#save());
-        }
+        $effect(() => {
+            if (typeof window === 'undefined')
+                return;
+            const handler = () => this.#save();
+            window.addEventListener('beforeunload', handler);
+            return () => window.removeEventListener('beforeunload', handler);
+        });
+        $effect(() => {
+            return () => {
+                if (this.#saveTimeout)
+                    clearTimeout(this.#saveTimeout);
+                this.#saveTimeout = null;
+            };
+        });
         $effect(() => {
             Object.keys(this.columnWidths);
             // Track order changes by observing the id sequences

package/dist/table/virtualization.svelte.d.ts

@@ -1,10 +1,10 @@
 import type { TableState } from './table-state.svelte.js';
-export declare class Virtualization<T extends Record<PropertyKey, unknown>> {
+export declare class Virtualization<T extends any> {
     #private;
     scrollTop: number;
     viewport: {
         height: number;
-        element: HTMLDivElement | null;
+        element: HTMLElement | null;
     };
     get topIndex(): number;
     get virtualTop(): number;

package/dist/table/virtualization.svelte.js

@@ -1,4 +1,4 @@
-import { tick, untrack } from 'svelte';
+import { untrack } from 'svelte';
 export class Virtualization {
     scrollTop = $state(0);
     viewport = $state({
@@ -25,47 +25,86 @@ export class Virtualization {
                 requestAnimationFrame(() => ticked = true);
             });
         });
+        let measureRaf = 0;
+        let measureRun = 0;
         $effect(() => {
             if (!ticked)
                 return;
             table.dataState.current;
+            this.viewport.element;
+            this.viewport.height;
+            let aborted = false;
+            const run = ++measureRun;
             untrack(() => {
-                if (!this.viewport.element) {
+                const target = this.viewport.element;
+                if (!target) {
                     this.#heightPerItem = 8;
                     return;
                 }
-                tick().then(() => {
-                    const target = this.viewport.element;
-                    if (target.children.length === 0)
+                if (measureRaf)
+                    cancelAnimationFrame(measureRaf);
+                measureRaf = requestAnimationFrame(() => {
+                    if (aborted)
                         return;
-                    const firstRow = target.children[0]?.getBoundingClientRect().top;
-                    const lastRow = target.children[target.children.length - 1].getBoundingClientRect().bottom;
-                    this.#heightPerItem = (lastRow - firstRow) / this.#area.length;
+                    if (run !== measureRun)
+                        return;
+                    const el = this.viewport.element;
+                    if (!el)
+                        return;
+                    const rowEls = el.querySelectorAll(':scope > tr.row');
+                    const children = rowEls.length > 0 ? rowEls : el.children;
+                    const count = children.length;
+                    if (count === 0)
+                        return;
+                    const first = children[0]?.getBoundingClientRect().top;
+                    const last = children[count - 1]?.getBoundingClientRect().bottom;
+                    if (first === undefined || last === undefined)
+                        return;
+                    const height = (last - first) / count;
+                    if (!Number.isFinite(height) || height <= 0)
+                        return;
+                    // Avoid tiny oscillations causing endless updates.
+                    if (Math.abs(height - this.#heightPerItem) < 0.25)
+                        return;
+                    this.#heightPerItem = height;
                 });
             });
+            return () => {
+                aborted = true;
+                if (measureRaf)
+                    cancelAnimationFrame(measureRaf);
+            };
         });
-        let waitAnimationFrame = false;
+        let virtualRaf = 0;
         $effect(() => {
             if (!ticked)
                 return;
             this.scrollTop;
             this.#heightPerItem;
+            this.viewport.height;
             table.dataState.current.length;
-            table.dataState.current;
             untrack(() => {
-                if (!waitAnimationFrame) {
-                    setTimeout(() => {
-                        waitAnimationFrame = false;
-                        let virtualTop = Math.max(this.scrollTop - this.#spacing, 0);
-                        virtualTop -= virtualTop % this.#heightPerItem;
-                        this.#virtualTop = virtualTop;
-                        let virtualBottom = this.#heightPerItem * table.dataState.current.length - virtualTop - this.#spacing * 4;
-                        virtualBottom = Math.max(virtualBottom, 0);
-                        this.#virtualBottom = virtualBottom;
-                    }, 1000 / 60);
-                }
-                waitAnimationFrame = true;
+                if (virtualRaf)
+                    cancelAnimationFrame(virtualRaf);
+                virtualRaf = requestAnimationFrame(() => {
+                    virtualRaf = 0;
+                    const heightPerItem = this.#heightPerItem || 8;
+                    const spacing = this.#spacing;
+                    let virtualTop = Math.max(this.scrollTop - spacing, 0);
+                    if (heightPerItem > 0) {
+                        virtualTop -= virtualTop % heightPerItem;
+                    }
+                    this.#virtualTop = virtualTop;
+                    let virtualBottom = heightPerItem * table.dataState.current.length - virtualTop - spacing * 4;
+                    if (!Number.isFinite(virtualBottom))
+                        virtualBottom = 0;
+                    this.#virtualBottom = Math.max(virtualBottom, 0);
+                });
             });
+            return () => {
+                if (virtualRaf)
+                    cancelAnimationFrame(virtualRaf);
+            };
         });
         $effect(() => {
             if (!ticked)
@@ -74,10 +113,15 @@ export class Virtualization {
             table.dataState.sortby;
             this.#heightPerItem;
             this.#virtualTop;
+            this.viewport.height;
+            this.#renderItemLength;
             table.dataState.current.length;
             table.dataState.current;
             untrack(() => {
-                this.#topIndex = Math.round(this.#virtualTop / this.#heightPerItem || 0);
+                const heightPerItem = this.#heightPerItem || 8;
+                this.#topIndex = Math.round(this.#virtualTop / heightPerItem || 0);
+                if (this.#topIndex < 0)
+                    this.#topIndex = 0;
                 const end = this.#topIndex + this.#renderItemLength;
                 this.#area = table.dataState.current.slice(this.#topIndex, end);
             });

package/dist/utility.svelte.d.ts

@@ -1,4 +1,4 @@
-import { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 export type Simplify<T> = T extends infer V ? {
     [K in keyof V]: V[K];
 } : never;

package/dist/utility.svelte.js

@@ -4,7 +4,7 @@ export function pick(item, keys) {
 }
 export function boundPick(item, keys) {
     const obj = {};
-    for (const key in keys) {
+    for (const key of keys) {
         obj[key] = [() => item[key], (v) => item[key] = v];
     }
     return Object.defineProperties({}, withSetters(obj));
@@ -30,7 +30,7 @@ export function boundAssign(item, props = {}) {
             boundAssign(item[key], value);
             continue;
         }
-        Object.defineProperty(item, value, {
+        Object.defineProperty(item, key, {
             get() { return props[key]; },
             set(v) { props[key] = v; }
         });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelte-tably",
-    "version": "1.1.2",
+    "version": "1.3.0",
     "description": "A high performant dynamic table for Svelte 5",
     "license": "MIT",
     "repository": {