@svelte-lean/table 0.15.2 → 0.15.3

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @svelte-lean/table
 
+## 0.15.3
+
+### Patch Changes
+
+- b526e70: A header that follows the page keeps its travel to itself: `--slean-table-travel` is set on the
+  `<thead>`, not on the scroll region. On the region every row inherited it, and each section a fast
+  scroll drew for the first time changed the table's height, so the travel, so every row already
+  drawn was styled again. An admin list of 1000 bets at 4x CPU blocked for 8.2 s in its first fast
+  scroll and 2.2 s with the travel on the header (`apps/playground/tests/bench/head-travel.bench.spec.ts`).
+
 ## 0.15.2
 
 ### Patch Changes

package/dist/table/data-table.svelte

@@ -840,6 +840,7 @@
 	let fits = $state(false);
 	let scrollsY = $state(true);
 	let travel = $state(0);
+	const headFollows = $derived(stickyHeader && !height && !fits && !scrollsY);
 	$effect(() => {
 		if (!stickyHeader || height || typeof ResizeObserver === 'undefined') {
 			fits = false;
@@ -1722,13 +1723,10 @@
 		bind:this={viewport}
 		class="slean-table-scroll"
 		data-page-sticky={fits || undefined}
-		data-head-follows={(stickyHeader && !height && !fits && !scrollsY) || undefined}
+		data-head-follows={headFollows || undefined}
 		data-pinned={pinning.edges.length > 0 || undefined}
 		data-overflows={overflows || undefined}
 		style:--slean-table-min-width={tracks?.min}
-		style:--slean-table-travel={stickyHeader && !height && !fits && !scrollsY
-			? `${travel}px`
-			: undefined}
 		style:max-height={height}
 		tabindex={height ? 0 : undefined}
 		role="region"
@@ -1764,7 +1762,12 @@
 							style:width={colWidth(col)}
 						/>{/each}</colgroup
 				>{/if}
-			{#if showHeader}<thead role={grid ? 'rowgroup' : undefined}>
+			{#if showHeader}<!-- The travel is the header's own: set on the region, every row under it
+				     inherited it, and each section a fast scroll drew changed the table's height,
+				     the travel, and so restyled every row already drawn. --><thead
+					role={grid ? 'rowgroup' : undefined}
+					style:--slean-table-travel={headFollows ? `${travel}px` : undefined}
+				>
 					{#each headerLevels as row, level}<tr
 							role={grid ? 'row' : undefined}
 							aria-rowindex={ariaRowCount === undefined ? undefined : level + 1}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svelte-lean/table",
-  "version": "0.15.2",
+  "version": "0.15.3",
   "description": "A Svelte-native table and data-grid engine that ships only the features you use.",
   "license": "MIT",
   "author": "Ömer Say",