@isoftdata/svelte-table 2.10.2 → 2.10.4

package/dist/Table.svelte

@@ -859,25 +859,29 @@
 
 					<th
 						id="col-{tableId}-{column.property}"
+						class={[
+							'unselectable',
+							column.class,
+							{
+								'cursor-pointer': column.sortType !== false && !isArbitraryProperty(column.property),
+								'd-print-none': column.hideForPrint,
+								'text-left': !bs5 && column.align === 'left',
+								'text-start': column.align === 'start' || (bs5 && column.align === 'left'),
+								'text-right': !bs5 && (column.align === 'right' || column.numeric),
+								'text-end': column.align === 'end' || (bs5 && (column.align === 'right' || column.numeric)),
+								'text-center': column.align === 'center',
+								'text-truncate': doEllipsis,
+								'bg-white': !bs5 && stickyHeader,
+								'table-secondary': column.pinned,
+								'text-nowrap': !column.wrap,
+								pinned: column.pinned,
+							},
+						]}
 						title={column.title ?? column.name}
-						style:cursor={column.sortType !== false && !isArbitraryProperty(column.property) ? 'pointer' : ''}
 						style:width={column.userWidth ?? column.width}
 						style:min-width={column.minWidth}
-						style:position={column.pinned ? 'sticky' : undefined}
-						style:left={column.pinned ? columnInfo.getPinnedColumnOffset(column.property) : undefined}
-						style:z-index={column.pinned ? 5 : undefined}
+						style:--pinned-column-offset={column.pinned ? columnInfo.getPinnedColumnOffset(column.property) : undefined}
 						data-sort-specified={isSortColumn ? sortDirection : ''}
-						class:text-nowrap={!column.wrap}
-						class="unselectable {column.class ?? ''}"
-						class:d-print-none={column.hideForPrint}
-						class:text-left={!bs5 && column.align === 'left'}
-						class:text-start={column.align === 'start' || (bs5 && column.align === 'left')}
-						class:text-right={!bs5 && (column.align === 'right' || column.numeric)}
-						class:text-end={column.align === 'end' || (bs5 && (column.align === 'right' || column.numeric))}
-						class:text-center={column.align === 'center'}
-						class:text-truncate={doEllipsis}
-						class:bg-white={!bs5 && stickyHeader}
-						class:table-secondary={column.pinned}
 						onclick={() => columnClickHandler(column)}
 						oncontextmenu={event => contextMenuHandler(event, column.property)}
 					>
@@ -1144,4 +1148,14 @@
 	.table-layout-fixed {
 		table-layout: fixed;
 	}
+
+	th.pinned {
+		position: sticky;
+		z-index: 5 !important;
+		left: var(--pinned-column-offset, -1);
+	}
+
+	.cursor-pointer {
+		cursor: pointer;
+	}
 </style>

package/dist/Td.svelte

@@ -113,14 +113,18 @@
 {#if visible}
 	<svelte:element
 		this={tagName}
-		class={[classNames, alignClass]}
+		class={[
+			classNames,
+			alignClass,
+			{
+				pinned: thisColumnInfo?.pinned,
+			},
+		]}
 		{...rest}
 		style:font-variant-numeric={thisColumnInfo?.numeric ? 'tabular-nums' : undefined}
 		style:overflow={$columnResizingEnabled ? 'hidden' : undefined}
 		style:text-overflow={$columnResizingEnabled ? 'ellipsis' : undefined}
-		style:position={thisColumnInfo?.pinned ? 'sticky' : undefined}
-		style:left={thisColumnInfo?.pinned ? columnInfo.getPinnedColumnOffset(property) : undefined}
-		style:z-index={thisColumnInfo?.pinned ? 4 : undefined}
+		style:--pinned-column-offset={thisColumnInfo?.pinned ? columnInfo.getPinnedColumnOffset(property) : undefined}
 	>
 		<!--
 			Don't listen to events that the user hasn't turned on the features for.
@@ -158,4 +162,10 @@
 	td:where(.text-start, .text-center, .text-end) :global(.form-check-input) {
 		float: unset;
 	}
+
+	.pinned {
+		position: sticky;
+		z-index: 4 !important;
+		left: var(--pinned-column-offset, -1);
+	}
 </style>

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

@@ -71,20 +71,29 @@ export class ColumnInfoRunicStore {
         }
     }
     getPinnedColumnOffset(property) {
+        // When referenced in an effect, this function will re-run when pinnedColumns is updated
+        // Such as when a new columns is pinned, or a pinned column is hidden/resized or otherwise modified
         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(', ')}`);
+            console.warn(`Could not find columns "${property}" in list of pinned columns: ${this.pinnedColumns.join(', ')}`);
             return '0px';
         }
         else if (colIndex === 0) {
             return '-1px'; // Fix the gap on the left side of the first column
         }
         const offsetPx = this.pinnedColumns.slice(0, colIndex).reduce((acc, col) => {
-            if (col.userWidth && col.visible) {
-                acc += parseFloat(col.userWidth);
+            if (!col.visible) {
+                return acc;
             }
-            else {
-                console.warn(`Cannot make column ${property} pinned because it has no userWidth!`);
+            const px = col.userWidth?.match(pixelRegex)?.[1] ?? null;
+            if (col.userWidth && px) {
+                acc += parseFloat(px);
+            }
+            else if (!col.userWidth) {
+                console.warn(`Cannot make column "${property}" pinned because it has no userWidth!`);
+            }
+            else if (!px) {
+                console.warn(`Cannot make column "${property}" pinned because its userWidth "${col.userWidth}" is not in pixels!`);
             }
             return acc;
         }, 0);
@@ -133,3 +142,4 @@ export class ColumnInfoRunicStore {
         return derivedValue;
     }
 }
+const pixelRegex = /(\d+)px/;

package/package.json

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