svelte-tably 1.1.0 → 1.1.2

package/dist/table/Table.svelte

@@ -200,9 +200,13 @@
 			elements.selects.scrollTop = target?.scrollTop
 		}
 
-		if (!elements.headers) return
-		elements.headers.scrollLeft = target.scrollLeft
-		elements.statusbar.scrollLeft = target.scrollLeft
+		if (elements.headers) {
+			elements.headers.scrollLeft = target.scrollLeft
+		}
+
+		if (elements.statusbar) {
+			elements.statusbar.scrollLeft = target.scrollLeft
+		}
 	}
 
 	// * --- CSV --- *

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

@@ -42,6 +42,22 @@ export class TableState {
         if (state instanceof ColumnState) {
             const key = state.id;
             this.columns[key] = state;
+            const insertBySavedOrder = (arr, item, savedOrder) => {
+                const idx = savedOrder.indexOf(item.id);
+                if (idx === -1) {
+                    arr.push(item);
+                    return;
+                }
+                let i = 0;
+                for (; i < arr.length; i++) {
+                    const otherIdx = savedOrder.indexOf(arr[i].id);
+                    if (otherIdx === -1)
+                        continue;
+                    if (otherIdx > idx)
+                        break;
+                }
+                arr.splice(i, 0, item);
+            };
             const clean = () => {
                 delete this.columns[key];
                 this.positions.fixed = this.positions.fixed.filter((column) => column !== state);
@@ -61,19 +77,19 @@ export class TableState {
             const isSaved = Object.values(saved).some(v => v);
             if ((!isSaved && state.options.fixed)
                 || saved.fixed) {
-                this.positions.fixed.push(state);
+                insertBySavedOrder(this.positions.fixed, state, this.#positions.fixed);
                 return clean;
             }
             if ((!isSaved && state.defaults.show === false)
                 || saved.hidden) {
-                this.positions.hidden.push(state);
+                insertBySavedOrder(this.positions.hidden, state, this.#positions.hidden);
             }
             if ((!isSaved && state.defaults.sticky)
                 || saved.sticky) {
-                this.positions.sticky.push(state);
+                insertBySavedOrder(this.positions.sticky, state, this.#positions.sticky);
             }
             else {
-                this.positions.scroll.push(state);
+                insertBySavedOrder(this.positions.scroll, state, this.#positions.scroll);
             }
             return clean;
         }
@@ -152,7 +168,8 @@ export class TableState {
         }
         $effect(() => {
             Object.keys(this.columnWidths);
-            Object.values(this.positions).map(v => v.length);
+            // Track order changes by observing the id sequences
+            Object.values(this.positions).map(arr => arr.map(c => c.id).join('|'));
             this.dataState.sortby;
             this.dataState.sortReverse;
             this.#scheduleSave();

package/package.json

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