@isoftdata/svelte-table 2.6.6 → 2.7.0

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/Table.svelte

@@ -547,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)
@@ -639,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)
@@ -897,7 +908,10 @@
 						{@render footerRow({ footers })}
 					{:else}
 						{#each footers as { property, value } (property)}
-							<Td {property}>{value ?? ''}</Td>
+							<Td
+								{property}
+								tagName="TH">{value ?? ''}</Td
+							>
 						{/each}
 					{/if}
 				</tr>
@@ -956,10 +970,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/Td.svelte

@@ -27,6 +27,7 @@
 		enterGoesDown?: boolean | ((ctx: { event: KeyboardEvent; tr: HTMLTableRowElement }) => void)
 		/** If enabled, keypress (enter only) and click events on the Td's contents will have `stopPropagation`/`preventDefault` called on them. */
 		stopPropagation?: boolean
+		tagName?: 'TD' | 'TH'
 		children?: Snippet
 	}
 
@@ -37,6 +38,7 @@
 		align = $bindable(columnInfo.current[property]?.align),
 		enterGoesDown = false,
 		stopPropagation = false,
+		tagName = 'TD',
 		children,
 		...rest
 	}: Props = $props()
@@ -104,7 +106,8 @@
 </script>
 
 {#if visible}
-	<td
+	<svelte:element
+		this={tagName}
 		class={[classNames, alignClass]}
 		{...rest}
 		style:font-variant-numeric={thisColumnInfo?.numeric ? 'tabular-nums' : undefined}
@@ -126,7 +129,7 @@
 		{:else}
 			{@render children?.()}
 		{/if}
-	</td>
+	</svelte:element>
 {/if}
 
 <style>

package/dist/Td.svelte.d.ts

@@ -20,6 +20,7 @@ interface Props extends Omit<HTMLTdAttributes, 'align'> {
     }) => void);
     /** If enabled, keypress (enter only) and click events on the Td's contents will have `stopPropagation`/`preventDefault` called on them. */
     stopPropagation?: boolean;
+    tagName?: 'TD' | 'TH';
     children?: Snippet;
 }
 declare const Td: import("svelte").Component<Props, {}, "align">;

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 than spreading
+            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.6",
+  "version": "2.7.0",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",