@isoftdata/svelte-table 2.6.5 → 2.6.7

package/README.md

@@ -69,7 +69,7 @@ This component uses a generic type `R` to represent the type of a single row pas
 | rowSelectionIdProp | `K \| "uuid"` | The property to use as the unique identifier for each row in the row selection feature. | `"uuid"` |
 | rowSelectionRequiresModKey | `boolean` | Whether the row selection feature requires a modifier key or not. | `false` |
 | selectionEnabled | `boolean` | Whether the row selection feature is enabled or not. | `false` |
-| selectionMode | `"SINGLE" \| "RANGE" \| null` | The selection mode for the row selection feature. When `allowMultiSelect` is true, both selection modes will allow you to select multiple rows. | `null` |
+| selectionMode | `"SINGLE" \| "RANGE" \| null` | The selection mode for the row selection feature. When `multiSelectEnabled` is true, both selection modes will allow you to select multiple rows. | `null` |
 | showFilterLabel | `boolean` | Whether the filter label is shown or not. | `false` |
 | showFooter | `boolean` | Defines if a `<tfoot>` should be shown. See `footers` slot below. | `false` |
 | size | `"sm" \| ""` | The size of the table. | `"sm"` |

package/dist/Pagination.svelte

@@ -53,9 +53,9 @@
 	const buttonWidth = $derived.by(() => {
 		// keep all the buttons the same size, but make them big enough to fit large page #s
 		if (mobileSize) {
-			return lastPageNumber >= 100 ? 51 : lastPageNumber >= 10 ? 40 : 34
+			return lastPageNumber >= 100 ? 51 : lastPageNumber >= 10 ? 40 : 36
 		} else {
-			return lastPageNumber >= 100 ? 40 : lastPageNumber >= 10 ? 34 : 28
+			return lastPageNumber >= 100 ? 40 : lastPageNumber >= 10 ? 36 : 28
 		}
 	})
 

package/dist/Table.svelte

@@ -216,6 +216,7 @@
 		setContext('expandedRows', expandedRows)
 	}
 
+	// TODO: bad things will happen if we update any of our apps to use Runes for the store if we don't account for that here
 	const session = getContext<Writable<{ userAccountId?: number }> | undefined>('session')
 	// This will be accessible on the component instance, ie `const columnInfo = $derived(table?.columnInfo)` if you need it
 	export const columnInfo = new ColumnInfoRunicStore<R>(() => columns, {
@@ -546,9 +547,12 @@
 
 		try {
 			untrack(() => {
-				columnProperties.forEach(column => {
-					columnInfo.updateColumn(column, { visible })
-				})
+				columnInfo.updateColumns(
+					columnProperties.map((property): { property: RowProperties<R>; visible: boolean } => ({
+						property,
+						visible,
+					})),
+				)
 			})
 		} catch (err) {
 			console.error(`Error setting column visibility for columns ${JSON.stringify(columnProperties)}`, err)
@@ -638,20 +642,28 @@
 		useFixedLayout = false
 		await tick()
 		if (columnResizingEnabled) {
-			columns.forEach((column, index) => {
-				const th = tableParent?.querySelector<HTMLTableCellElement>(`#col-${tableId}-${CSS.escape(column.property)}`)
-				if (th) {
+			columnInfo.updateColumns(
+				columns.map((column): { property: RowProperties<R>; userWidth: string } => {
 					const thisColumnInfo = columnInfo.current[column.property]
 					const prevUserWidth = thisColumnInfo?.userWidth
 					// Minimum width will be inherited from the layout on reset, but this won't, so re-set it here if needed
 					const explicitWidth = thisColumnInfo?.width
-					const userWidth = prevUserWidth ?? explicitWidth ?? `${th.offsetWidth}px`
-					columnInfo.updateColumn(column.property, { userWidth })
-				}
-			})
+
+					return {
+						property: column.property,
+						userWidth: prevUserWidth ?? explicitWidth ?? getColumnThWidth(column.property),
+					}
+				}),
+			)
 			useFixedLayout = true
 		}
 	}
+
+	function getColumnThWidth(property: string) {
+		const thWidth =
+			tableParent?.querySelector<HTMLTableCellElement>(`#col-${tableId}-${CSS.escape(property)}`)?.offsetWidth ?? 25
+		return `${thWidth}px`
+	}
 	// #region Computed
 	$effect(() => {
 		selectedRowIdsStore.set(selectedRowIds)
@@ -955,10 +967,12 @@
 		<DropdownItem
 			icon="broom"
 			onclick={() => {
-				for (const property in columnInfo.current) {
-					// @ts-expect-error
-					columnInfo.updateColumn(property, { userWidth: undefined })
-				}
+				columnInfo.updateColumns(
+					computedColumns.map(col => ({
+						property: col.property,
+						userWidth: undefined,
+					})),
+				)
 				setDefaultColumnWidths()
 			}}>{translate('common:tableResetColumnSizes', 'Reset Column Sizes')}</DropdownItem
 		>

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

@@ -56,7 +56,10 @@ export declare class ColumnInfoRunicStore<R extends UuidRowProps> {
         visible: boolean;
     }[];
     get current(): ColumnInfoObject<R>;
-    updateColumn: (property: RowProperties<R>, value: Partial<GenericColumnInfo<R>>) => void;
+    updateColumn(property: RowProperties<R>, value: Partial<GenericColumnInfo<R>>): void;
+    updateColumns(newColumnInfos: Array<Partial<GenericColumnInfo<R>> & {
+        property: RowProperties<R>;
+    }>): void;
     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

@@ -47,18 +47,28 @@ export class ColumnInfoRunicStore {
     get current() {
         return this.#value;
     }
-    updateColumn = (property, value) => {
-        if (!(property in this.#value)) {
-            console.error(`Column ${property} not found in column info store`);
-            return;
-        }
-        const info = this.#value[property];
-        this.#value[property] = { ...info, ...value };
+    updateColumn(property, value) {
+        this.updateColumns([
+            {
+                ...value,
+                property,
+            },
+        ]);
+    }
+    updateColumns(newColumnInfos) {
+        newColumnInfos.forEach(col => {
+            if (!(col.property in this.#value)) {
+                console.error(`Column ${col.property} not found in column info store`);
+                return;
+            }
+            // This gets run for every column in the table on render, so use Object.assign as it's faster
+            Object.assign(this.#value[col.property], col);
+        });
         this.#lastValue = this.#value;
         if (this.#persistedState) {
             this.#persistedState.current = this.makeDerived(this.#value);
         }
-    };
+    }
     getStoreValFromColumns(columns, storeValue) {
         const columnInfo = columns.reduce((acc, column) => {
             const storedColumn = storeValue

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@isoftdata/svelte-table",
-  "version": "2.6.5",
+  "version": "2.6.7",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",