svelte-tably 1.0.2-next.1 → 1.1.0

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

@@ -2,6 +2,7 @@ import { SvelteComponent } 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 type { CSVOptions } from './csv.js';
 declare class __sveltets_Render<T extends Record<PropertyKey, unknown>> {
     props(): TableProps<T> & {
         content?: Snippet<[context: {
@@ -94,14 +95,9 @@ declare class __sveltets_Render<T extends Record<PropertyKey, unknown>> {
     };
     events(): {};
     slots(): {};
-    bindings(): "selected" | "panel" | "data";
+    bindings(): "table" | "selected" | "panel" | "data";
     exports(): {
-        toCSV: (opts?: {
-            /** Semi-colons as separator? */
-            semicolon?: boolean;
-            /** Only selected rows */
-            selected?: boolean;
-        }) => Promise<string>;
+        toCSV: (options?: CSVOptions<T>) => Promise<string>;
     };
 }
 interface $$IsomorphicComponent {

package/dist/table/csv.d.ts

@@ -0,0 +1,28 @@
+export interface CSVOptions<T> {
+    /**
+     * Semi-colons as separator?
+     * @default false
+    */
+    semicolon?: boolean;
+    /**
+     * Export only selected rows in the visible data
+     * @default false
+    */
+    selected?: boolean;
+    /**
+     * Filters to apply to the data.
+     * - `true` to apply current filters e.g. currently visible content
+     * - `false` to ignore filters, export all data
+     * - Array of functions to filter data manually
+     * @default true
+    */
+    filters?: true | false | ((item: T) => boolean)[];
+    /**
+     * Columns to export. By default exports all visible columns.
+     * - `true` to export all columns
+     * - `false` to export only visible columns
+     * - Array of column IDs to export specific columns
+     * @default false
+    */
+    columns?: true | false | string[];
+}

package/dist/table/csv.js

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

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

@@ -1,5 +1,5 @@
 import type { TableProps, TableState } from './table-state.svelte.js';
-export declare class Data<T extends Record<PropertyKey, unknown>> {
+export declare class Data<T> {
     #private;
     origin: T[];
     sorted: T[];

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

@@ -2,11 +2,11 @@ import { type Snippet } from 'svelte';
 import { ColumnState, type RowColumnCtx } from '../column/column-state.svelte.js';
 import { PanelState } from '../panel/panel-state.svelte.js';
 import { Data } from './data.svelte.js';
-import { type AnyRecord } from '../utility.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';
-export type HeaderSelectCtx<T extends AnyRecord = any> = {
+import { CSVOptions } from "./csv.js";
+export type HeaderSelectCtx<T = any> = {
     isSelected: boolean;
     /** The list of selected items */
     readonly selected: T[];
@@ -15,20 +15,20 @@ export type HeaderSelectCtx<T extends AnyRecord = any> = {
      */
     readonly indeterminate: boolean;
 };
-export type RowSelectCtx<T extends AnyRecord = any> = {
+export type RowSelectCtx<T extends any = any> = {
     readonly item: T;
     readonly row: RowColumnCtx<T, unknown>;
     data: T[];
     isSelected: boolean;
 };
-export interface RowCtx<T extends AnyRecord> {
+export interface RowCtx<T extends any> {
     readonly rowHovered: boolean;
     readonly index: number;
     readonly itemState: ItemState<T> | undefined;
     selected: boolean;
     expanded: boolean;
 }
-type SelectOptions<T extends AnyRecord> = {
+type SelectOptions<T extends any> = {
     /**
      * The style, in which the selection is shown
      *
@@ -49,8 +49,10 @@ type SelectOptions<T extends AnyRecord> = {
     headerSnippet?: Snippet<[context: HeaderSelectCtx]>;
     rowSnippet?: Snippet<[context: RowSelectCtx<T>]>;
 };
-export type TableProps<T extends AnyRecord> = {
+export type TableProps<T extends any> = {
     id?: string;
+    /** Bindable to TableState; `bind:table` */
+    table?: TableState<T>;
     data: T[];
     selected?: T[];
     /** Current visible panel */
@@ -72,9 +74,10 @@ export type TableProps<T extends AnyRecord> = {
     /** Create missing columns automatically. */
     auto?: boolean;
 };
-export declare class TableState<T extends AnyRecord> {
+export declare class TableState<T> {
     #private;
-    id: string;
+    id: string | undefined;
+    cssId: string;
     dataState: Data<T>;
     data: T[];
     columns: Record<string, ColumnState<T, any>>;
@@ -101,7 +104,10 @@ export declare class TableState<T extends AnyRecord> {
         auto: boolean;
     };
     add(state: ColumnState<T, any> | PanelState<T>): (() => void) | undefined;
-    static getContext<T extends AnyRecord>(): TableState<T> | undefined;
+    static getContext<T>(): TableState<T> | undefined;
+    /** Width of each column */
+    columnWidths: Record<string, number>;
+    toCSV(options?: CSVOptions<T>): Promise<string>;
     constructor(tableProps: TableProps<T>);
 }
 export {};

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

@@ -5,6 +5,7 @@ import { Data } from './data.svelte.js';
 export class TableState {
     #props = {};
     id = $state();
+    cssId = $state();
     dataState = $state({});
     data = $derived(this.dataState.current ?? []);
     columns = $state({});
@@ -14,6 +15,13 @@ export class TableState {
     /** Currently selected items */
     get selected() { return this.#props.selected ??= []; }
     set selected(items) { this.#props.selected = items; }
+    /** Saved positions */
+    #positions = $state({
+        fixed: [],
+        sticky: [],
+        hidden: [],
+        scroll: []
+    });
     /** Column positions based on column ids */
     positions = $state({
         fixed: [],
@@ -41,16 +49,27 @@ export class TableState {
                 this.positions.scroll = this.positions.scroll.filter((column) => column !== state);
                 this.positions.hidden = this.positions.hidden.filter((column) => column !== state);
             };
-            if (state.defaults.sortby)
+            if (state.defaults.sortby && !this.dataState.sortby) {
                 this.dataState.sortBy(key);
-            if (state.options.fixed) {
+            }
+            const saved = {
+                fixed: this.#positions.fixed.includes(key),
+                sticky: this.#positions.sticky.includes(key),
+                hidden: this.#positions.hidden.includes(key),
+                scroll: this.#positions.scroll.includes(key)
+            };
+            const isSaved = Object.values(saved).some(v => v);
+            if ((!isSaved && state.options.fixed)
+                || saved.fixed) {
                 this.positions.fixed.push(state);
                 return clean;
             }
-            if (state.defaults.show === false) {
+            if ((!isSaved && state.defaults.show === false)
+                || saved.hidden) {
                 this.positions.hidden.push(state);
             }
-            if (state.defaults.sticky) {
+            if ((!isSaved && state.defaults.sticky)
+                || saved.sticky) {
                 this.positions.sticky.push(state);
             }
             else {
@@ -67,10 +86,77 @@ export class TableState {
     static getContext() {
         return getContext('svelte-tably');
     }
+    /** Width of each column */
+    columnWidths = $state({});
+    #save() {
+        const content = {
+            columnWidths: this.columnWidths,
+            positions: {
+                fixed: this.positions.fixed.map(c => c.id),
+                sticky: this.positions.sticky.map(c => c.id),
+                hidden: this.positions.hidden.map(c => c.id),
+                scroll: this.positions.scroll.map(c => c.id)
+            },
+            sortby: this.dataState.sortby,
+            sortReverse: this.dataState.sortReverse
+        };
+        localStorage.setItem(`svelte-tably:${this.id}`, JSON.stringify(content));
+    }
+    #saving = false;
+    #scheduleSave() {
+        if (this.#saving)
+            return;
+        if (typeof localStorage === 'undefined')
+            return;
+        this.#saving = true;
+        setTimeout(() => {
+            this.#saving = false;
+            this.#save();
+        }, 1000);
+    }
+    #load() {
+        if (typeof localStorage === 'undefined')
+            return null;
+        const item = JSON.parse(localStorage.getItem(`svelte-tably:${this.id}`) || '{}');
+        item.columnWidths ??= {};
+        item.positions ??= {};
+        item.positions.fixed ??= [];
+        item.positions.sticky ??= [];
+        item.positions.hidden ??= [];
+        item.positions.scroll ??= [];
+        item.sortby ??= undefined;
+        item.sortReverse ??= false;
+        return item;
+    }
+    async toCSV(options = {}) {
+        options;
+        return '';
+    }
     constructor(tableProps) {
         this.#props = tableProps;
-        this.id = tableProps.id ?? Array.from({ length: 12 }, () => String.fromCharCode(Math.floor(Math.random() * 26) + 97)).join('');
+        this.id = tableProps.id;
+        this.cssId = Array.from({ length: 12 }, () => String.fromCharCode(Math.floor(Math.random() * 26) + 97)).join('');
         this.dataState = new Data(this, tableProps);
+        if (this.id) {
+            // fetch from localstorage
+            const saved = this.#load();
+            if (saved) {
+                this.columnWidths = saved.columnWidths;
+                this.#positions = saved.positions;
+                this.dataState.sortby = saved.sortby;
+                this.dataState.sortReverse = saved.sortReverse;
+            }
+        }
+        if (typeof window !== 'undefined') {
+            window.addEventListener('beforeunload', () => this.#save());
+        }
+        $effect(() => {
+            Object.keys(this.columnWidths);
+            Object.values(this.positions).map(v => v.length);
+            this.dataState.sortby;
+            this.dataState.sortReverse;
+            this.#scheduleSave();
+        });
         setContext('svelte-tably', this);
     }
 }

package/package.json

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