@isoftdata/svelte-table 2.9.6 → 2.10.0-beta.0

package/dist/column-info-store.svelte.d.ts

@@ -14,13 +14,49 @@ export declare class ColumnInfoRunicStore<R extends UuidRowProps> {
     #private;
     serializableValuesAndDefaultsArr: Array<SerializableKey>;
     getSerializableFieldValues: {
+        readonly pinned: (column: Partial<GenericColumnInfo<R>> | undefined) => boolean | undefined;
         readonly visible: (column: Partial<GenericColumnInfo<R>> | undefined) => boolean;
         readonly userWidth: (column: Partial<GenericColumnInfo<R>> | undefined) => string | undefined;
     };
     lsKey: string | null;
     userAccountId: number;
-    constructor(getColumns: () => Array<Column<R>>, options: StoreOptions);
-    get columns(): {
+    columns: {
+        align?: "start" | "left" | "center" | "right" | "end" | undefined;
+        class?: string | undefined;
+        defaultSortColumn?: boolean | undefined;
+        defaultSortDirection?: import("./types").SortDirection | undefined;
+        ellipsis?: boolean | undefined;
+        footer?: {
+            fn: "COUNT" | "AVG" | "SUM";
+            altProperty?: RowProperties<R> | undefined;
+            formatCurrency?: boolean;
+            requiredValue?: unknown;
+        } | {
+            fn: (previousValue: import("./types").FooterReducerValue<R>, currentValue: import("./types").FooterReducerValue<R>) => import("./types").FooterReducerValue<R>;
+            initialValue: string | number;
+            altProperty?: RowProperties<R> | undefined;
+            formatCurrency?: boolean;
+            requiredValue?: unknown;
+        } | undefined;
+        formatter?: ((value: unknown) => unknown) | undefined;
+        hideForPrint?: boolean | undefined;
+        icon?: import("@fortawesome/fontawesome-common-types").IconName | undefined;
+        iconLeft?: boolean | undefined;
+        iconPrefix?: import("@fortawesome/fontawesome-common-types").IconPrefix | undefined;
+        minWidth?: string | undefined;
+        name?: string | undefined;
+        numeric?: boolean | undefined;
+        property: `_${string}` | RowProperties<R>;
+        sortType?: "ALPHA_NUM" | "STANDARD" | false | undefined;
+        pinned?: boolean | undefined;
+        title?: string | undefined;
+        unhidable?: boolean | undefined;
+        userWidth?: string | undefined;
+        width?: string | undefined;
+        wrap?: boolean | undefined;
+        visible: boolean;
+    }[];
+    pinnedColumns: {
         align?: "start" | "left" | "center" | "right" | "end" | undefined;
         class?: string | undefined;
         defaultSortColumn?: boolean | undefined;
@@ -48,6 +84,7 @@ export declare class ColumnInfoRunicStore<R extends UuidRowProps> {
         numeric?: boolean | undefined;
         property: `_${string}` | RowProperties<R>;
         sortType?: "ALPHA_NUM" | "STANDARD" | false | undefined;
+        pinned?: boolean | undefined;
         title?: string | undefined;
         unhidable?: boolean | undefined;
         userWidth?: string | undefined;
@@ -55,11 +92,13 @@ export declare class ColumnInfoRunicStore<R extends UuidRowProps> {
         wrap?: boolean | undefined;
         visible: boolean;
     }[];
+    constructor(getColumns: () => Array<Column<R>>, options: StoreOptions);
     get current(): ColumnInfoObject<R>;
     updateColumn(property: RowProperties<R> | ArbitraryProperty, value: Partial<GenericColumnInfo<R>>): void;
     updateColumns(newColumnInfos: Array<Partial<GenericColumnInfo<R>> & {
         property: RowProperties<R> | ArbitraryProperty;
     }>): void;
+    getPinnedColumnOffset(property: RowProperties<R> | ArbitraryProperty): string;
     private getStoreValFromColumns;
     /** Takes values from the given column, removes non-serializable values, and fills in with default serializable values */
     private getSerializableValuesWithDefaults;

package/dist/column-info-store.svelte.js

@@ -5,6 +5,7 @@ import { PersistedUserState } from '@isoftdata/svelte-store-user-local-writable'
 const serializableValuesAndDefaults = Object.freeze({
     visible: true,
     userWidth: undefined,
+    pinned: false,
 });
 function writableKlona(...args) {
     return klona(...args);
@@ -12,6 +13,7 @@ function writableKlona(...args) {
 export class ColumnInfoRunicStore {
     serializableValuesAndDefaultsArr = Object.keys(serializableValuesAndDefaults);
     getSerializableFieldValues = {
+        pinned: (column) => column?.pinned,
         visible: (column) => column?.visible ?? true,
         userWidth: (column) => column?.userWidth ?? column?.width ?? column?.minWidth,
     };
@@ -20,6 +22,8 @@ export class ColumnInfoRunicStore {
     #value = $state({});
     #persistedState = null;
     #lastValue = undefined;
+    columns = $derived(Object.values(this.#value));
+    pinnedColumns = $derived(this.columns.filter(c => c.pinned));
     constructor(getColumns, options) {
         this.lsKey = options.key ? `column-info-store-${options.key}` : null;
         this.userAccountId = options.userAccountId ?? -1;
@@ -41,9 +45,6 @@ export class ColumnInfoRunicStore {
             });
         });
     }
-    get columns() {
-        return Object.values(this.#value);
-    }
     get current() {
         return this.#value;
     }
@@ -69,6 +70,26 @@ export class ColumnInfoRunicStore {
             this.#persistedState.current = this.makeDerived(this.#value);
         }
     }
+    getPinnedColumnOffset(property) {
+        const colIndex = this.pinnedColumns.findIndex(c => c.property === property);
+        if (colIndex === -1) {
+            console.warn(`Could not find columns ${property} in list of pinned columns: ${this.pinnedColumns.join(', ')}`);
+            return '0px';
+        }
+        else if (colIndex === 0) {
+            return '0px';
+        }
+        const offsetPx = this.pinnedColumns.slice(0, colIndex).reduce((acc, col) => {
+            if (col.userWidth && col.visible) {
+                acc += parseFloat(col.userWidth);
+            }
+            else {
+                console.warn(`Cannot make column ${property} pinned because it has no userWidth!`);
+            }
+            return acc;
+        }, 0);
+        return `${offsetPx}px`;
+    }
     getStoreValFromColumns(columns, storeValue) {
         const columnInfo = columns.reduce((acc, column) => {
             const storedColumn = storeValue

package/dist/types.d.ts

@@ -55,6 +55,7 @@ export type Column<R extends UuidRowProps = any> = {
     numeric?: boolean;
     property: RowProperties<R> | ArbitraryProperty;
     sortType?: 'ALPHA_NUM' | 'STANDARD' | false;
+    pinned?: boolean;
     title?: string;
     unhidable?: boolean;
     /** The column's width set by column resizing. Separated from `width` to retain the default value after resizing */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@isoftdata/svelte-table",
-  "version": "2.9.6",
+  "version": "2.10.0-beta.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -24,7 +24,7 @@
     "@isoftdata/svelte-select": "^2.0.1",
     "@isoftdata/svelte-textarea": "^2.0.0",
     "@sveltejs/adapter-auto": "^3.3.1",
-    "@sveltejs/kit": "^2.18.0",
+    "@sveltejs/kit": "^2.53.2",
     "@sveltejs/package": "^2.3.10",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@types/natural-compare-lite": "^1.4.2",
@@ -37,7 +37,7 @@
     "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.3.3",
     "publint": "^0.1.16",
-    "svelte": "5.50.2",
+    "svelte": "5.53.5",
     "svelte-check": "^4.1.4",
     "tslib": "^2.8.1",
     "type-fest": "^4.41.0",
@@ -51,7 +51,8 @@
   "dependencies": {
     "@isoftdata/browser-event": "^2.3.2",
     "@isoftdata/svelte-button": "^2.1.0",
-    "@isoftdata/svelte-context-menu": "^2.0.0",
+    "@isoftdata/svelte-context-menu": "^2.0.4",
+    "@isoftdata/svelte-icon": "^2.1.0",
     "@isoftdata/svelte-input": "^2.1.1",
     "@isoftdata/svelte-store-user-local-writable": "^2.0.0",
     "@isoftdata/utility-bootstrap": "^2.2.1",