@svelte-lean/table 0.13.1 → 0.13.3

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @svelte-lean/table
 
+## 0.13.3
+
+### Patch Changes
+
+- d30fe0c: A table wider than its region keeps its header in view: without `height`, a region that scrolls sideways used to leave the header behind as the page scrolled. The header now follows the page (a scroll-driven animation on the region's view timeline, run by the compositor), from `--slean-table-sticky-top` down to the table's last row. Browsers without scroll-driven animations keep the old behaviour.
+
+## 0.13.2
+
+No changes in this release.
+
 ## 0.13.1
 
 No changes in this release.

package/dist/style.css

@@ -327,6 +327,32 @@
 	:where(.slean-table-scroll[data-page-sticky] > .slean-table-sticky > thead) {
 		top: var(--slean-table-sticky-top, 0px);
 	}
+	/* Sideways-only region: the header follows the page (data-table.svelte, `data-head-follows`). */
+	@supports (animation-timeline: view()) {
+		:where(.slean-table-scroll[data-head-follows]) {
+			view-timeline-name: --slean-table-region;
+			view-timeline-axis: block;
+			view-timeline-inset: var(--slean-table-sticky-top, 0px) 0px;
+		}
+		:where(.slean-table-scroll[data-head-follows] > table > thead) {
+			position: relative;
+			z-index: 5;
+			animation-name: slean-table-head-follow;
+			animation-duration: auto;
+			animation-timing-function: linear;
+			animation-fill-mode: both;
+			animation-timeline: --slean-table-region;
+			animation-range: exit-crossing 0px exit-crossing var(--slean-table-travel, 0px);
+		}
+	}
+	@keyframes slean-table-head-follow {
+		from {
+			translate: 0 0;
+		}
+		to {
+			translate: 0 var(--slean-table-travel, 0px);
+		}
+	}
 	:where(
 		.slean-table
 			> .slean-table-scroll[data-page-sticky]:first-child

package/dist/table/data-table.svelte

@@ -825,19 +825,26 @@
 	 * header without ever letting it stick; the header is then not sticky at all (`scrollsY`), since
 	 * a sticky box in a scroller is composited, and every row painted under it is weighed against it
 	 * (at 1000 rows about a tenth of a fast scroll's main-thread work).
+	 *
+	 * Such a header follows the page instead (`data-head-follows`, style.css): a scroll-driven
+	 * animation on the region's view timeline moves it down by as much as the region has passed
+	 * under the page's top, never past its last row (`--slean-table-travel`). The compositor runs
+	 * it; script only measures the travel when a size changes.
 	 */
 	let fits = $state(false);
 	let scrollsY = $state(true);
+	let travel = $state(0);
 	$effect(() => {
 		if (!stickyHeader || height || typeof ResizeObserver === 'undefined') {
 			fits = false;
 			scrollsY = true;
 			return;
 		}
-		const table = viewport.firstElementChild as HTMLElement;
+		const table = viewport.firstElementChild as HTMLTableElement;
 		const observer = new ResizeObserver(() => {
 			fits = table.offsetWidth <= viewport.clientWidth + 1;
 			scrollsY = viewport.scrollHeight > viewport.clientHeight + 1;
+			travel = Math.max(0, table.offsetHeight - (table.tHead?.offsetHeight ?? 0));
 		});
 		observer.observe(viewport);
 		observer.observe(table);
@@ -1683,6 +1690,10 @@
 		bind:this={viewport}
 		class="slean-table-scroll"
 		data-page-sticky={fits || undefined}
+		data-head-follows={(stickyHeader && !height && !fits && !scrollsY) || undefined}
+		style:--slean-table-travel={stickyHeader && !height && !fits && !scrollsY
+			? `${travel}px`
+			: undefined}
 		style:max-height={height}
 		tabindex={height ? 0 : undefined}
 		role="region"

package/package.json

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