@svelte-lean/table 0.15.3 → 0.15.4

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @svelte-lean/table
 
+## 0.15.4
+
+### Patch Changes
+
+- cbb6e13: Faster long grid tables, measured on an admin list of 1000 rows and 17 columns:
+  
+  - The stylesheet's rules are keyed on an element, class or attribute (no `:where(a, b)` lists, no
+    `:is(th, td)` or bare `:has()` key, no `*`), so the browser no longer tries them against every
+    element of the page; the found-value rule is `td:has([data-slean-found])`.
+  - A sort, a page or any state change that leaves the visible columns as they were keeps their
+    array, the cells' attributes and the track list, so a manual table's sort click draws no cell
+    again.
+  - Body sections hold 20 rows instead of 50, and the idle warming lays out one section per idle
+    period that has room for it, by reading a box inside it (no second style pass), and remembers
+    which sections are laid out with which rows and tracks, so a sort, a refetch or a scroll does not
+    start it over.
+  - A progressive mount measures the page's longest rows (by their formatted values) with its first
+    rows, before the first frame, so a long value further down no longer widens its column later.
+  - A progressive slice grows at most twice from the last one, so a slice after a search is cleared
+    no longer draws 400 rows in one task; and rows arriving again while a progressive mount is under
+    way (a cached page, then the server's) no longer draw the rest of the page in one task.
+  - A row's `vertical-align` and `border-color` are set by the stylesheet instead of inherited (the
+    user agent's `inherit`), so a grid section skipped and drawn again in a scroll no longer restyles
+    its rows.
+  
+  `apps/playground/tests/bench/workload.bench.spec.ts` (1000 rows, 17 columns, 4x CPU, against the
+  published 0.15.3, median of 7): every row drawn 5151 -> 3737 ms, blocking while mounting 285 -> 102
+  ms, the longest idle task 53 -> 0 ms, a second fast scroll's style 168 -> 52 ms, a manual sort click
+  200 -> 104 ms, style per 1000 elements 14.2 -> 7.1 ms.
+  On the admin list it came from (1000 bets of staging data, 4x CPU, three alternating runs against
+  0.15.2): every row drawn 5140 -> 3744 ms, a first fast scroll's blocking time 2610 -> 239 ms, a sort
+  click 776 -> 176 ms, layout shift 0.016 -> 0.010.
+
 ## 0.15.3
 
 ### Patch Changes

package/dist/style.css

@@ -110,20 +110,19 @@
 	:where(.slean-table[data-density='spacious']) {
 		--slean-table-cell-padding-y: 0.875rem;
 	}
-	:where(
-		.slean-table-button,
-		.slean-table-input,
-		.slean-table-sort,
-		.slean-table-resize,
-		.slean-table-column-panel,
-		.slean-table-scroll,
-		.slean-table-scroll > table
-	) {
+	:where(.slean-table-button),
+	:where(.slean-table-input),
+	:where(.slean-table-sort),
+	:where(.slean-table-resize),
+	:where(.slean-table-column-panel),
+	:where(.slean-table-scroll),
+	:where(.slean-table-scroll > table) {
 		box-sizing: border-box;
 	}
 
 	/* Owned controls: 32px, outline, tokens. */
-	:where(.slean-table-button, .slean-table-columns > summary) {
+	:where(.slean-table-button),
+	:where(.slean-table-columns > summary) {
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
@@ -143,7 +142,8 @@
 		white-space: nowrap;
 		cursor: pointer;
 	}
-	:where(.slean-table-button:hover:not(:disabled), .slean-table-columns > summary:hover) {
+	:where(.slean-table-button:hover:not(:disabled)),
+	:where(.slean-table-columns > summary:hover) {
 		background: var(--slean-table-soft);
 	}
 	:where(.slean-table-button:disabled) {
@@ -171,15 +171,13 @@
 		outline: 2px solid transparent;
 		box-shadow: 0 0 0 3px color-mix(in oklab, var(--slean-table-focus) 22%, transparent);
 	}
-	:where(
-		.slean-table-button,
-		.slean-table-sort,
-		.slean-table-resize,
-		.slean-table-group-toggle,
-		.slean-table-columns > summary,
-		.slean-table-scroll,
-		.slean-table-check
-	):focus-visible {
+	:where(.slean-table-button):focus-visible,
+	:where(.slean-table-sort):focus-visible,
+	:where(.slean-table-resize):focus-visible,
+	:where(.slean-table-group-toggle):focus-visible,
+	:where(.slean-table-columns > summary):focus-visible,
+	:where(.slean-table-scroll):focus-visible,
+	:where(.slean-table-check):focus-visible {
 		outline: 2px solid var(--slean-table-focus);
 		outline-offset: 2px;
 	}
@@ -188,6 +186,14 @@
 		outline: 2px solid var(--slean-table-focus);
 		outline-offset: -2px;
 	}
+	/* The user agent gives a row `vertical-align: inherit` and `border-color: inherit`; an element
+	   that inherits explicitly is styled again with its parent, so each time a grid section was
+	   skipped or drawn again in a scroll, every row in it was too. Set here (the cells set their
+	   own alignment; a row draws no border), a section's rows stay as they are. */
+	:where(.slean-table-scroll > table > tbody > tr) {
+		vertical-align: middle;
+		border-color: currentColor;
+	}
 	:where(.slean-table-scroll > table > tbody > tr[data-clickable]) {
 		cursor: pointer;
 	}
@@ -295,14 +301,16 @@
 		padding: 0.75rem;
 		color: var(--slean-table-muted);
 	}
-	:where(.slean-table-scroll > table > * > tr > :is(th, td)) {
+	:where(.slean-table-scroll > table > * > tr > th),
+	:where(.slean-table-scroll > table > * > tr > td) {
 		padding: var(--slean-table-cell-padding-y) var(--slean-table-cell-padding-x);
 		border-bottom: 1px solid var(--slean-table-border);
 		background: var(--slean-table-row-bg, var(--slean-table-bg));
 		overflow-wrap: anywhere;
 		vertical-align: middle;
 	}
-	:where(.slean-table-scroll > table > thead > tr > :is(th, td)) {
+	:where(.slean-table-scroll > table > thead > tr > th),
+	:where(.slean-table-scroll > table > thead > tr > td) {
 		background: var(--slean-table-header-bg);
 		color: var(--slean-table-header-fg);
 		font-size: var(--slean-table-header-font-size);
@@ -364,7 +372,7 @@
 			> table
 			> thead
 			> tr:first-child
-			> :first-child
+			> th:first-child
 	) {
 		border-start-start-radius: calc(var(--slean-table-radius) - 1px);
 	}
@@ -374,7 +382,7 @@
 			> table
 			> thead
 			> tr:first-child
-			> :last-child
+			> th:last-child
 	) {
 		border-start-end-radius: calc(var(--slean-table-radius) - 1px);
 	}
@@ -455,7 +463,8 @@
 		cursor: col-resize;
 		touch-action: none;
 	}
-	:where(.slean-table-resize:hover, .slean-table-resize:focus-visible) {
+	:where(.slean-table-resize:hover),
+	:where(.slean-table-resize:focus-visible) {
 		background: linear-gradient(var(--slean-table-primary), var(--slean-table-primary)) center / 2px
 			100% no-repeat;
 	}
@@ -506,7 +515,9 @@
 	}
 
 	/* Row controls: 24px borderless icon buttons. */
-	:where(.slean-table-expand, .slean-table-edit, .slean-table-grip) {
+	:where(.slean-table-expand),
+	:where(.slean-table-edit),
+	:where(.slean-table-grip) {
 		min-inline-size: 1.5rem;
 		min-block-size: 1.5rem;
 		padding: 0;
@@ -515,12 +526,10 @@
 		color: var(--slean-table-muted);
 		flex-shrink: 0;
 	}
-	:where(
-		.slean-table-expand:hover,
-		.slean-table-edit:hover,
-		.slean-table-grip:hover,
-		.slean-table-grip:focus-visible
-	) {
+	:where(.slean-table-expand:hover),
+	:where(.slean-table-edit:hover),
+	:where(.slean-table-grip:hover),
+	:where(.slean-table-grip:focus-visible) {
 		color: var(--slean-table-fg);
 	}
 	/* The row grip (onRowMove): the dots are masked on a pseudo-element, so the focus ring stays. */
@@ -570,7 +579,8 @@
 		margin-inline-start: auto;
 		opacity: 0.4;
 	}
-	:where(td:hover > .slean-table-cell > .slean-table-edit, .slean-table-edit:focus-visible) {
+	:where(td:hover > .slean-table-cell > .slean-table-edit),
+	:where(.slean-table-edit:focus-visible) {
 		opacity: 1;
 	}
 	:where(.slean-table-ellipsis > .slean-table-cell) {
@@ -600,10 +610,14 @@
 	:where(.slean-table-scroll > table > tbody > tr[data-selected='true']) {
 		--slean-table-row-bg: var(--slean-table-row-selected);
 	}
-	:where(.slean-table[data-bordered='true'] > .slean-table-scroll > table > * > tr > :is(th, td)) {
+	:where(.slean-table[data-bordered='true'] > .slean-table-scroll > table > * > tr > th),
+	:where(.slean-table[data-bordered='true'] > .slean-table-scroll > table > * > tr > td) {
 		border-inline-end: 1px solid var(--slean-table-border);
 	}
-	:where(.slean-table[data-bordered='true'] > .slean-table-scroll > table > * > tr > :last-child) {
+	:where(.slean-table[data-bordered='true'] > .slean-table-scroll > table > * > tr > th:last-child),
+	:where(
+		.slean-table[data-bordered='true'] > .slean-table-scroll > table > * > tr > td:last-child
+	) {
 		border-inline-end: 0;
 	}
 
@@ -613,14 +627,19 @@
 		z-index: 2;
 	}
 	/* A cell holding a value the browser's find opened (a findable, `data-slean-found`) lets it
-	   stand past its edge, above the pinned cells beside it and below the sticky header. */
-	:where(.slean-table-scroll > table > tbody > tr > :has([data-slean-found])) {
+	   stand past its edge, above the pinned cells beside it and below the sticky header.
+	   Keyed on the cell element: a bare `:has()` was tried, with its walk of the subtree, against
+	   every element of the page. */
+	:where(.slean-table-scroll > table > tbody > tr > td:has([data-slean-found])),
+	:where(.slean-table-scroll > table > tbody > tr > th:has([data-slean-found])) {
 		overflow: visible;
 		z-index: 4;
 	}
 
 	/* Leading control columns (expand, grip, selection) and pinned columns. */
-	:where(.slean-table-mover, .slean-table-selection, .slean-table-expander) {
+	:where(.slean-table-mover),
+	:where(.slean-table-selection),
+	:where(.slean-table-expander) {
 		position: sticky;
 		inset-inline-start: 0;
 		z-index: 3;
@@ -638,7 +657,9 @@
 		width: var(--slean-table-expand-width, 40px);
 		padding-inline: 0;
 	}
-	:where(thead .slean-table-mover, thead .slean-table-selection, thead .slean-table-expander) {
+	:where(thead .slean-table-mover),
+	:where(thead .slean-table-selection),
+	:where(thead .slean-table-expander) {
 		z-index: 4;
 	}
 	/* Pinned edges: a line on the edge cells, one shade per side. */
@@ -656,7 +677,8 @@
 	:where(.slean-table[data-layout='grid'] > .slean-table-scroll[data-pinned]) {
 		grid-template-columns: max(100%, var(--slean-table-min-width, 0px));
 	}
-	:where(.slean-table-scroll[data-pinned] > *) {
+	:where(.slean-table-scroll[data-pinned] > table),
+	:where(.slean-table-scroll[data-pinned] > .slean-table-pin-shade) {
 		grid-area: 1 / 1;
 		isolation: isolate;
 	}
@@ -675,10 +697,8 @@
 		inset-inline: auto var(--slean-table-pin-inset);
 		margin-inline: 0 var(--slean-table-pin-inset);
 	}
-	:where(
-		.slean-table-pin-shade[data-pin='right']:dir(ltr),
-		.slean-table-pin-shade[data-pin='left']:dir(rtl)
-	) {
+	:where(.slean-table-pin-shade[data-pin='right']:dir(ltr)),
+	:where(.slean-table-pin-shade[data-pin='left']:dir(rtl)) {
 		scale: -1 1;
 	}
 	/* Shown while content lies past that side; without scroll-state, while rows overflow. */
@@ -721,7 +741,17 @@
 		user-select: none;
 		-webkit-user-select: none;
 	}
-	:where(.slean-table[data-row-dragging], .slean-table[data-row-dragging] *) {
+	/* The root's cursor reaches the rest by inheritance; only what draws a cursor of its own is
+	   named (a `*` here was tried against every element of the page). */
+	:where(.slean-table[data-row-dragging]),
+	:where(.slean-table[data-row-dragging] > .slean-table-scroll > table > tbody > tr),
+	:where(.slean-table[data-row-dragging] a),
+	:where(.slean-table[data-row-dragging] button),
+	:where(.slean-table[data-row-dragging] input),
+	:where(.slean-table[data-row-dragging] select),
+	:where(.slean-table[data-row-dragging] textarea),
+	:where(.slean-table[data-row-dragging] label),
+	:where(.slean-table[data-row-dragging] summary) {
 		cursor: grabbing;
 	}
 	:where(
@@ -730,7 +760,31 @@
 			> table
 			> tbody
 			> tr:not([data-lifted])
-			> :is([data-pin], .slean-table-mover, .slean-table-selection, .slean-table-expander)
+			> [data-pin]
+	),
+	:where(
+		.slean-table[data-row-dragging]
+			> .slean-table-scroll
+			> table
+			> tbody
+			> tr:not([data-lifted])
+			> .slean-table-mover
+	),
+	:where(
+		.slean-table[data-row-dragging]
+			> .slean-table-scroll
+			> table
+			> tbody
+			> tr:not([data-lifted])
+			> .slean-table-selection
+	),
+	:where(
+		.slean-table[data-row-dragging]
+			> .slean-table-scroll
+			> table
+			> tbody
+			> tr:not([data-lifted])
+			> .slean-table-expander
 	) {
 		z-index: 1;
 	}
@@ -865,7 +919,8 @@
 		min-inline-size: 4.75rem;
 		font-size: inherit;
 	}
-	:where(.slean-table-pager, .slean-table-pages) {
+	:where(.slean-table-pager),
+	:where(.slean-table-pages) {
 		display: flex;
 		align-items: center;
 		gap: 0.25rem;
@@ -890,16 +945,16 @@
 		color: var(--slean-table-muted);
 	}
 	/* Direction-bearing icons point the other way in right-to-left tables. */
-	:where(
-		.slean-table-pager .slean-table-icon,
-		[aria-expanded='false'] > .slean-table-icon,
-		.slean-table-column-panel .slean-table-icon
-	):dir(rtl) {
+	:where(.slean-table-pager .slean-table-icon):dir(rtl),
+	:where([aria-expanded='false'] > .slean-table-icon):dir(rtl),
+	:where(.slean-table-column-panel .slean-table-icon):dir(rtl) {
 		scale: -1 1;
 	}
 
 	@media (prefers-reduced-motion: no-preference) {
-		:where(.slean-table-button, .slean-table-input, .slean-table-columns > summary) {
+		:where(.slean-table-button),
+		:where(.slean-table-input),
+		:where(.slean-table-columns > summary) {
 			transition-property: background-color, border-color, box-shadow, color;
 			transition-duration: var(--slean-table-duration);
 		}
@@ -953,7 +1008,8 @@
 		:where(.slean-table-column-panel) {
 			min-inline-size: 18rem;
 		}
-		:where(.slean-table-page-size, .slean-table-pages) {
+		:where(.slean-table-page-size),
+		:where(.slean-table-pages) {
 			display: none;
 		}
 	}
@@ -999,12 +1055,10 @@
 		width: max(100%, var(--slean-table-min-width, 0px));
 		min-width: 0;
 	}
-	:where(
-		.slean-table[data-layout='grid']
-			> .slean-table-scroll
-			> table
-			> :is(thead, tbody, tfoot, caption)
-	) {
+	:where(.slean-table[data-layout='grid'] > .slean-table-scroll > table > thead),
+	:where(.slean-table[data-layout='grid'] > .slean-table-scroll > table > tbody),
+	:where(.slean-table[data-layout='grid'] > .slean-table-scroll > table > tfoot),
+	:where(.slean-table[data-layout='grid'] > .slean-table-scroll > table > caption) {
 		display: block;
 	}
 	:where(.slean-table[data-layout='grid'] > .slean-table-scroll > table > * > tr) {
@@ -1023,7 +1077,7 @@
 	:where(.slean-table[data-layout='grid'] > .slean-table-scroll > table > tbody.slean-table-chunk) {
 		content-visibility: auto;
 		contain-intrinsic-block-size: auto
-			calc(var(--slean-table-chunk-rows, 50) * var(--slean-table-row-estimate, 2.75rem));
+			calc(var(--slean-table-chunk-rows, 20) * var(--slean-table-row-estimate, 2.75rem));
 	}
 	/* A section whose rows are still being mounted holds the height they are expected to stand. */
 	:where(
@@ -1033,21 +1087,26 @@
 			> tbody.slean-table-chunk[data-pending]
 	) {
 		min-block-size: calc(
-			var(--slean-table-chunk-rows, 50) * var(--slean-table-row-estimate, 2.75rem)
+			var(--slean-table-chunk-rows, 20) * var(--slean-table-row-estimate, 2.75rem)
 		);
 	}
-	:where(.slean-table[data-layout='grid'] > .slean-table-scroll > table > * > tr > :is(th, td)) {
+	:where(.slean-table[data-layout='grid'] > .slean-table-scroll > table > * > tr > th),
+	:where(.slean-table[data-layout='grid'] > .slean-table-scroll > table > * > tr > td) {
 		display: flex;
 		align-items: center;
 		min-width: 0;
 	}
 	/* The renderer's own boxes in a cell fill it; content drawn straight into a cell (a badge, a
-	   chip, a link in a plain grid cell, a control) keeps its own width. */
+	   chip, a link in a plain grid cell, a control) keeps its own width (flex's initial value). */
 	:where(
-		.slean-table[data-layout='grid'] > .slean-table-scroll > table > * > tr > :is(th, td) > *
-	) {
-		flex: 0 1 auto;
-	}
+		.slean-table[data-layout='grid']
+			> .slean-table-scroll
+			> table
+			> *
+			> tr
+			> :is(th, td)
+			> .slean-table-cell
+	),
 	:where(
 		.slean-table[data-layout='grid']
 			> .slean-table-scroll
@@ -1055,19 +1114,29 @@
 			> *
 			> tr
 			> :is(th, td)
-			> :is(.slean-table-cell, .slean-table-heading, .slean-table-editor)
-	) {
-		flex: 1 1 auto;
-		min-width: 0;
-	}
-	/* The selection and expand columns center their one control. */
+			> .slean-table-heading
+	),
 	:where(
 		.slean-table[data-layout='grid']
 			> .slean-table-scroll
 			> table
 			> *
 			> tr
-			> :is(.slean-table-mover, .slean-table-selection, .slean-table-expander)
+			> :is(th, td)
+			> .slean-table-editor
+	) {
+		flex: 1 1 auto;
+		min-width: 0;
+	}
+	/* The selection and expand columns center their one control. */
+	:where(
+		.slean-table[data-layout='grid'] > .slean-table-scroll > table > * > tr > .slean-table-mover
+	),
+	:where(
+		.slean-table[data-layout='grid'] > .slean-table-scroll > table > * > tr > .slean-table-selection
+	),
+	:where(
+		.slean-table[data-layout='grid'] > .slean-table-scroll > table > * > tr > .slean-table-expander
 	) {
 		justify-content: center;
 	}
@@ -1100,14 +1169,16 @@
 		display: block;
 		width: max-content;
 	}
-	:where(.slean-table-scroll > table[data-measuring] > *) {
+	:where(.slean-table-scroll > table[data-measuring] > thead),
+	:where(.slean-table-scroll > table[data-measuring] > tbody) {
 		display: block;
 	}
 	:where(.slean-table-scroll > table[data-measuring] > * > tr) {
 		display: grid;
 		content-visibility: visible;
 	}
-	:where(.slean-table-scroll > table[data-measuring] > * > tr > :is(th, td)) {
+	:where(.slean-table-scroll > table[data-measuring] > * > tr > th),
+	:where(.slean-table-scroll > table[data-measuring] > * > tr > td) {
 		display: flex;
 		align-items: center;
 		position: static;
@@ -1118,9 +1189,8 @@
 		grid-auto-columns: max-content;
 		width: max-content;
 	}
-	:where(.slean-table-scroll > table[data-measuring] > * > tr > :is(th, td) > *) {
-		flex: none;
-	}
+	/* A measured cell's children keep their content width: set inline on the copies by the
+	   renderer (`measure()`), not by a `> *` rule every element of the page would be tried on. */
 	:where(.slean-table-scroll > table[data-measuring] > thead > tr) {
 		grid-auto-columns: min-content;
 	}
@@ -1161,7 +1231,15 @@
 			> table
 			> tbody
 			> tr
-			> td.slean-table-cell:is([data-clip], .slean-table-ellipsis)
+			> td.slean-table-cell[data-clip]
+	),
+	:where(
+		.slean-table[data-layout='grid']
+			> .slean-table-scroll
+			> table
+			> tbody
+			> tr
+			> td.slean-table-cell.slean-table-ellipsis
 	) {
 		display: block;
 		overflow: hidden;
@@ -1177,13 +1255,25 @@
 	:where(.slean-table[data-layout='grid'] > .slean-table-scroll > table > tbody > tr > td) {
 		background: none;
 	}
+	:where(.slean-table[data-layout='grid'] > .slean-table-scroll > table > tbody > tr > [data-pin]),
+	:where(
+		.slean-table[data-layout='grid'] > .slean-table-scroll > table > tbody > tr > .slean-table-mover
+	),
+	:where(
+		.slean-table[data-layout='grid']
+			> .slean-table-scroll
+			> table
+			> tbody
+			> tr
+			> .slean-table-selection
+	),
 	:where(
 		.slean-table[data-layout='grid']
 			> .slean-table-scroll
 			> table
 			> tbody
 			> tr
-			> :is([data-pin], .slean-table-mover, .slean-table-selection, .slean-table-expander)
+			> .slean-table-expander
 	) {
 		background: var(--slean-table-row-bg, var(--slean-table-bg));
 	}
@@ -1193,14 +1283,12 @@
 		overflow-wrap: normal;
 	}
 	@media print {
-		:where(
-			.slean-table-toolbar,
-			.slean-table-pagination,
-			.slean-table-resize,
-			.slean-table-edit,
-			.slean-table-grip,
-			.slean-table-pin-shade
-		) {
+		:where(.slean-table-toolbar),
+		:where(.slean-table-pagination),
+		:where(.slean-table-resize),
+		:where(.slean-table-edit),
+		:where(.slean-table-grip),
+		:where(.slean-table-pin-shade) {
 			display: none !important;
 		}
 		:where(.slean-table-scroll) {
@@ -1211,7 +1299,8 @@
 			min-width: 0;
 			width: 100%;
 		}
-		:where(.slean-table-scroll > table > * > tr > :is(th, td)) {
+		:where(.slean-table-scroll > table > * > tr > th),
+		:where(.slean-table-scroll > table > * > tr > td) {
 			position: static !important;
 			box-shadow: none;
 		}

package/dist/table/data-table.svelte

@@ -30,6 +30,15 @@
 	/** A click on one of these inside a cell belongs to the control, not to the row. */
 	const NOT_ROW_CLICK =
 		'button,a,input,select,textarea,label,summary,[contenteditable],[role="menuitem"],[data-action],[data-no-row-click]';
+	/**
+	 * `next`, or `previous` when it says the same (compared as JSON): what every row reads keeps its
+	 * object across a state change that does not change it.
+	 */
+	function same<V>(previous: V | undefined, next: V): V {
+		return previous !== undefined && JSON.stringify(previous) === JSON.stringify(next)
+			? previous
+			: next;
+	}
 	/** The inline-start inset of a sticky column: the widths of the columns before it, summed. */
 	function inset(...widths: (string | false)[]): string {
 		const parts = widths.filter(Boolean);
@@ -379,8 +388,11 @@
 			!SERVER && !hydrating && batch && model.rows.length > batch ? batch : Number.POSITIVE_INFINITY
 		)
 	);
-	/** Where each rendered row stood: its index, and so, in grid layout, its body section. */
-	let renderedAt: Map<RowId, number> | null = null;
+	/**
+	 * The rows of the last model; the first `limit` of them are drawn. A row drawn there keeps its
+	 * place (in grid layout, its body section) in the next model.
+	 */
+	let renderedRows: RowNode<T>[] | null = null;
 	let job = 0;
 	let rowsPerSlice = 10;
 	const shown = $derived(limit >= model.rows.length ? model.rows : model.rows.slice(0, limit));
@@ -391,8 +403,15 @@
 	 * section of the page stands from the start: one whose rows are not drawn yet holds their
 	 * expected height, so a progressive mount does not grow the page, and move what is below it,
 	 * with every slice.
+	 *
+	 * Twenty rows: a section the browser has not laid out yet is styled and laid out in one piece,
+	 * in the frame that scrolls it into view or in the idle task that warms it, and fifty rows of an
+	 * admin list (17 columns of spans) took about 70 ms at 4x CPU, a long task each; twenty take
+	 * about 30 ms. Ten would take 15 ms but spend more on every frame of a scroll (each section is a
+	 * box the browser checks, lays out and paints on its own: a fifth more main-thread work than at
+	 * twenty in the admin's fast scroll).
 	 */
-	const CHUNK = 50;
+	const CHUNK = 20;
 	let previousChunks: RowNode<T>[][] = [];
 	const chunks = $derived.by(() => {
 		if (!grid) return (previousChunks = []);
@@ -414,13 +433,19 @@
 		const rows = model.rows;
 		untrack(() => {
 			const size = batch;
-			const previous = renderedAt;
-			renderedAt = new Map(rows.map((n, i) => [n.id, i]));
+			const before = renderedRows;
+			renderedRows = rows;
 			job++;
-			if (!previous) {
+			if (!before) {
 				if (limit < rows.length) continueMount(job);
 				return;
 			}
+			// Only the rows drawn so far count as drawn: new data arriving while a progressive mount
+			// is under way (a cached page, then the server's) once drew the rest of the page in one
+			// task, its rows' ids being known though they were never drawn (800 ms at 4x CPU).
+			const previous = new Map(
+				before.slice(0, Math.min(limit, before.length)).map((n, i) => [n.id, i])
+			);
 			// Rows to draw: new ones, and in grid layout rows that changed section (a section's rows
 			// are drawn anew when they move to another one). Rows before the first of them stay.
 			let drawn = 0;
@@ -445,6 +470,8 @@
 		job++;
 	});
 	function continueMount(id: number) {
+		// A new mount starts from a modest slice and grows from what its own slices cost.
+		rowsPerSlice = Math.min(rowsPerSlice, 40);
 		const channel = new MessageChannel();
 		channel.port1.onmessage = () => {
 			if (id !== job) return channel.port1.close();
@@ -453,7 +480,13 @@
 			limit += count;
 			flushSync();
 			const cost = (performance.now() - start) / count;
-			rowsPerSlice = Math.max(5, Math.min(400, Math.floor(SLICE_MS / Math.max(cost, 0.05))));
+			// At most twice as many rows as the slice just measured: rows the prefix reaches that
+			// were drawn already cost nothing, and a slice of them alone once sized the next one at
+			// 400 new rows (a 400 ms task at 4x CPU after a search was cleared).
+			rowsPerSlice = Math.max(
+				5,
+				Math.min(400, count * 2, Math.floor(SLICE_MS / Math.max(cost, 0.05)))
+			);
 			if (id !== job || limit >= model.rows.length) {
 				if (id === job) limit = Number.POSITIVE_INFINITY;
 				return channel.port1.close();
@@ -470,7 +503,7 @@
 	 * What a plain body cell's attributes are, per column, computed once per column change: the
 	 * cell template reads them as plain properties, so a row adds no per-cell computations.
 	 */
-	const cellMeta = $derived(
+	const cellMetaNext = $derived(
 		Object.fromEntries(
 			cols.map((col) => {
 				const pin = pins.get(col.id);
@@ -489,6 +522,13 @@
 			})
 		)
 	);
+	/**
+	 * The cell attributes every row reads, the same object while they say the same: the pins are
+	 * derived from the state, which a sort or a page replaces, and a new object here would run
+	 * every cell's attribute update again.
+	 */
+	let shownMeta: typeof cellMetaNext | undefined;
+	const cellMeta = $derived((shownMeta = same(shownMeta, cellMetaNext)));
 	/**
 	 * The plain cells' contexts of one row, by column id: built once per row (a `{@const}` in the
 	 * row), again only when the row's node or the columns change. `index` is read through a getter,
@@ -578,6 +618,36 @@
 	let measuredColumns = '';
 	let measuredRows: Set<RowId> = new Set();
 	let measuredWhole = false;
+	/**
+	 * The probe: the page's longest rows that a progressive mount has not drawn yet, one per column
+	 * (judged by the length of the formatted value, which costs no layout), drawn once into a hidden
+	 * `display: none` copy of the table and measured with the first rows, before they are painted.
+	 * A long value further down the page then widens its column in the first frame, not seconds
+	 * later, when the whole page is measured, under the reader (a layout shift). `probedFirst` is the
+	 * first row of the page last probed.
+	 */
+	let probedFirst = $state<RowId | undefined>(undefined);
+	let probeRegion = $state<HTMLDivElement | undefined>(undefined);
+	const probe = $derived.by((): RowNode<T>[] => {
+		const rows = model.rows;
+		if (!grid || SERVER || limit >= rows.length || rows[0]?.id === probedFirst) return [];
+		const rest = rows.slice(limit);
+		const picked = new Set<RowNode<T>>();
+		for (const col of cols) {
+			let best: RowNode<T> | undefined;
+			let longest = 0;
+			for (const node of rest) {
+				if (node.data === undefined) continue;
+				const length = textOf(col, valueOf(node.data, col), node.data)?.length ?? 0;
+				if (length > longest) {
+					longest = length;
+					best = node;
+				}
+			}
+			if (best) picked.add(best);
+		}
+		return [...picked];
+	});
 	$effect(() => {
 		if (!grid) return;
 		const columns = cols.map((col) => col.id).join('\u0000');
@@ -591,11 +661,21 @@
 				measuredRows = new Set(rows.map((n) => n.id));
 				measuredWhole = complete;
 				measure(complete);
+				probedFirst = rows[0]!.id;
 				void tick().then(() => untrack(() => estimateRows()));
 				return;
 			}
-			// A progressive mount is measured once, when it completes.
-			if (!complete) return;
+			// A new page mounting progressively: its first rows and the probe, before they are
+			// painted; the rest of it once the mount completes.
+			if (!complete) {
+				if (probe.length && !measuredRows.has(rows[0]!.id)) {
+					measuredRows = new Set(rows.map((n) => n.id));
+					measuredWhole = false;
+					measure(false);
+					probedFirst = rows[0]!.id;
+				}
+				return;
+			}
 			const fresh = rows.some((n) => !measuredRows.has(n.id));
 			if (!fresh && measuredWhole) return;
 			// The first rows are measured again only on a new page (its first row is new); a page whose
@@ -654,7 +734,17 @@
 		const rows = [...ownRows()];
 		// The first rows and the header, and for a whole page twenty rows spread over the rest; a pass
 		// over a page whose first rows were measured already (`first` false) takes only the spread.
-		const sample = every ? rows : first ? rows.slice(0, MEASURE_ROWS) : [];
+		// With the first rows come the probe's: the page's longest rows not drawn yet.
+		const sample = every
+			? rows
+			: first
+				? [
+						...rows.slice(0, MEASURE_ROWS),
+						...(probeRegion?.querySelectorAll<HTMLTableRowElement>(
+							':scope > table > tbody > tr[data-row-id]'
+						) ?? [])
+					]
+				: [];
 		if (!every && whole && rows.length > MEASURE_ROWS) {
 			const step = Math.ceil((rows.length - MEASURE_ROWS) / 20);
 			for (let i = MEASURE_ROWS; i < rows.length; i += step) sample.push(rows[i]!);
@@ -673,6 +763,10 @@
 		const tbody = document.createElement('tbody');
 		for (const row of sample) tbody.append(row.cloneNode(true));
 		clone.append(thead, tbody);
+		// Every cell's content at its own width (no shrinking), written on the copies here rather
+		// than by a stylesheet rule keyed on `*`, which the browser would try on every element.
+		for (const cell of clone.querySelectorAll<HTMLElement>(':scope > * > tr > *'))
+			for (const child of cell.children) (child as HTMLElement).style.flex = 'none';
 		region.append(clone);
 		root.append(region);
 		const next = { ...measured };
@@ -689,60 +783,106 @@
 		region.remove();
 		if (changed) measured = next;
 	}
+	/**
+	 * What each section was last laid out with: its rows (the chunk array, which keeps its identity
+	 * while its rows do) and the track list. A section is warm while both still hold, whoever laid
+	 * it out: this warming, or the browser drawing it (`contentvisibilityautostatechange`). The
+	 * browser keeps the layout of a section it skips again, so a warm section stays warm off screen.
+	 */
+	const warmedWith = new WeakMap<Element, { rows: RowNode<T>[]; template: string }>();
+	function isWarm(section: Element, c: number): boolean {
+		const was = warmedWith.get(section);
+		return !!was && was.rows === chunks[c] && was.template === (tracks?.template ?? '');
+	}
+	function markWarm(section: Element, c: number) {
+		const rows = chunks[c];
+		if (rows) warmedWith.set(section, { rows, template: tracks?.template ?? '' });
+	}
+	/** The browser drew a section itself: it is laid out with the rows and tracks of now. */
+	function sectionShown(event: Event) {
+		const section = event.target as HTMLElement;
+		if (
+			(event as Event & { skipped?: boolean }).skipped === false &&
+			section.parentElement === tableElement &&
+			section.classList.contains('slean-table-chunk')
+		)
+			markWarm(section, chunkIndex(section));
+	}
+	/** A section's place among the sections (a placeholder body may stand before the first). */
+	function chunkIndex(section: HTMLElement): number {
+		const bodies = tableElement.tBodies;
+		const at = Array.prototype.indexOf.call(bodies, section);
+		return bodies[0]?.classList.contains('slean-table-chunk') ? at : at - 1;
+	}
+	/** This table's body sections, in order (grid layout). */
+	function chunkSections(): HTMLElement[] {
+		return [...tableElement.tBodies].filter((b) => b.classList.contains('slean-table-chunk'));
+	}
+	// The event does not bubble: one capturing listener on the table.
+	$effect(() => {
+		if (!grid) return;
+		const table = tableElement;
+		table.addEventListener('contentvisibilityautostatechange', sectionShown, true);
+		return () => table.removeEventListener('contentvisibilityautostatechange', sectionShown, true);
+	});
+	/** The idle time warming one section is expected to take, from the last one warmed. */
+	let warmCost = 0;
 	/**
 	 * Idle warming (grid layout). A section the browser has skipped (`content-visibility: auto`) is
 	 * styled and laid out in the frame that scrolls it into view; in a fast scroll through a long
 	 * page that is every frame. Once a page is fully rendered, sections are laid out ahead in idle
-	 * time, nearest the screen first, as many per idle period as it has room for, so a section that
-	 * arrives costs only its paint. Nothing is windowed: every row stays in the document; this only
-	 * does the browser's work early. New rows and new column widths make sections cold again.
+	 * time, nearest the screen first, one per idle period that has room for it, so a section that
+	 * arrives costs only its paint and no input waits behind more than one section. Nothing is
+	 * windowed: every row stays in the document; this only does the browser's work early. New rows
+	 * and new column widths make sections cold again.
 	 */
 	$effect(() => {
 		if (!grid || limit !== Number.POSITIVE_INFINITY || typeof requestIdleCallback !== 'function')
 			return;
+		// Rerun (and look for cold sections) when rows move between sections or the tracks change;
+		// a section whose rows and tracks held stays warm across reruns.
 		void chunks;
 		void tracks?.template;
-		const warm = new WeakSet<Element>();
 		let handle = 0;
-		let warmCost = 10;
 		const step = (deadline: IdleDeadline) => {
-			const view = viewport.getBoundingClientRect();
-			const cold = [
-				...tableElement.querySelectorAll<HTMLElement>(':scope > tbody.slean-table-chunk')
-			]
-				.filter((section) => !warm.has(section))
-				.map((section) => {
-					const box = section.getBoundingClientRect();
-					const distance =
-						box.bottom < view.top
-							? view.top - box.bottom
-							: Math.max(0, box.top - Math.min(view.bottom, innerHeight));
-					return { section, distance };
-				})
-				.sort((a, b) => a.distance - b.distance);
-			// As many sections as the idle period has room for, judged by what the last one cost (half
-			// of it may run past the period): warming a section is a layout of its rows, and a long
-			// idle callback is a long task all the same. A callback the browser ran late
-			// (`didTimeout`, a busy page) warms one.
-			let done = 0;
-			for (const { section } of cold) {
-				if (deadline.didTimeout ? done > 0 : deadline.timeRemaining() < Math.min(warmCost / 2, 40))
-					break;
-				warm.add(section);
-				// The section itself is never skipped, its rows are: a drawn first row means the
-				// browser has laid this section out already.
-				if (section.firstElementChild?.checkVisibility?.({ contentVisibilityAuto: true })) continue;
-				const start = performance.now();
-				section.style.contentVisibility = 'visible';
-				void section.offsetHeight;
-				section.style.contentVisibility = '';
-				warmCost = performance.now() - start;
-				done++;
+			const sections = chunkSections();
+			// One section per idle callback, and only when the period has room for what the last one
+			// took: a section's style and layout are one piece of work the browser cannot split, and
+			// input that arrives meanwhile waits for it. The first one is tried in a full period.
+			if (deadline.timeRemaining() < Math.min(Math.max(warmCost, 10), 45)) {
+				handle = requestIdleCallback(step);
+				return;
 			}
-			if (cold.some(({ section }) => !warm.has(section)))
-				handle = requestIdleCallback(step, { timeout: 2000 });
+			// Nearest the screen first: from the first section reaching the region's top, outwards.
+			const top = Math.max(0, viewport.getBoundingClientRect().top);
+			let low = 0;
+			let high = sections.length - 1;
+			while (low < high) {
+				const middle = (low + high) >> 1;
+				if (sections[middle]!.getBoundingClientRect().bottom < top) low = middle + 1;
+				else high = middle;
+			}
+			let target = -1;
+			for (let d = 0; d < sections.length * 2 && target < 0; d++) {
+				const c = d % 2 ? low - Math.ceil(d / 2) : low + d / 2;
+				const section = sections[c];
+				if (!section || isWarm(section, c)) continue;
+				// Drawn now: the browser has laid it out with the current rows.
+				if (section.firstElementChild?.checkVisibility?.({ contentVisibilityAuto: true }))
+					markWarm(section, c);
+				else target = c;
+			}
+			if (target < 0) return;
+			const section = sections[target]!;
+			const start = performance.now();
+			// Reading a box inside a skipped section lays the section out where it stands, without
+			// turning its skipping off and on (which costs a second style pass).
+			void section.lastElementChild?.getBoundingClientRect();
+			warmCost = performance.now() - start;
+			markWarm(section, target);
+			handle = requestIdleCallback(step);
 		};
-		handle = requestIdleCallback(step, { timeout: 2000 });
+		handle = requestIdleCallback(step);
 		return () => cancelIdleCallback(handle);
 	});
 	/**
@@ -753,7 +893,7 @@
 	 * not fit, the rows scroll sideways. Pinned and resized columns keep their exact width, which
 	 * the sticky offsets are computed from.
 	 */
-	const tracks = $derived.by(() => {
+	const tracksNext = $derived.by(() => {
 		if (!grid) return null;
 		const lead = leads;
 		const parts = [...lead];
@@ -774,6 +914,9 @@
 			min: lead.length ? `calc(${min}px + ${lead.join(' + ')})` : `${min}px`
 		};
 	});
+	/** The track list, the same object while it says the same (a sort or a page changes nothing). */
+	let shownTracks: { template: string; min: string } | null | undefined;
+	const tracks = $derived((shownTracks = same(shownTracks, tracksNext)));
 	/**
 	 * Header rows. In grid layout every row is a grid of its own, so a cell spanning rows sits in
 	 * the lowest row it spans, placed at its first column; the leading control headers sit there
@@ -963,6 +1106,10 @@
 	const ariaRowCount = $derived(
 		manual && rowCount !== undefined ? rowCount + headerRowCount : undefined
 	);
+	/** Where this page's rows start in `aria-rowindex`: one number every row reads, not the state. */
+	const rowIndexBase = $derived(
+		ariaRowCount === undefined ? undefined : headerRowCount + model.pageIndex * s.pageSize
+	);
 	const pageSizes = $derived([...new Set([...pageSizeOptions, s.pageSize])]);
 	/**
 	 * A paged table loading draws a page of placeholders (at most 25, a screenful and more), so
@@ -1324,29 +1471,31 @@
 	>{/snippet}
 
 <!-- One body row: a group row, or a data row and its detail row. -->
-<!-- A plain grid row (see `plainRows`): the row and its cells, with no per-row branches. -->
+<!-- A plain grid row (see `plainRows`): the row and its cells, with no per-row branches. The cells
+     read `meta`, the row's one read of `cellMeta`: a value every cell of the page reads directly
+     has one dependent per cell, and removing a thousand rows took them out one by one, each a
+     search through that list. -->
 {#snippet plainRow(node: RowNode<T>, index: number)}{@const row = node.data!}{@const contexts =
-		rowContexts(node, row, () => index)}<!-- svelte-ignore a11y_no_redundant_roles -->
+		rowContexts(node, row, () => index)}{@const meta =
+		cellMeta}<!-- svelte-ignore a11y_no_redundant_roles -->
 	<tr
 		class={rowClass?.(row, index) ?? ''}
 		data-row-id={String(node.id)}
 		role="row"
 		data-even={striped && index % 2 === 1 ? '' : undefined}
 		data-clickable={onRowClick ? true : undefined}
-		aria-rowindex={ariaRowCount === undefined
-			? undefined
-			: headerRowCount + model.pageIndex * s.pageSize + index + 1}
+		aria-rowindex={rowIndexBase === undefined ? undefined : rowIndexBase + index + 1}
 		tabindex={focusableRows ? 0 : undefined}
 		>{#if expander}{@render plainExpander(node, row)}{/if}{#each cols as col (col.id)}<td
 				data-cell
 				role="cell"
 				data-column={col.id}
-				data-align={cellMeta[col.id]!.align}
-				data-pin={cellMeta[col.id]!.pin}
-				data-pin-edge={cellMeta[col.id]!.edge}
-				data-clip={cellMeta[col.id]!.clip}
-				class={cellMeta[col.id]!.gridClass}
-				style={cellMeta[col.id]!.style}>{@render (col.cell ?? plainCell)(contexts[col.id]!)}</td
+				data-align={meta[col.id]!.align}
+				data-pin={meta[col.id]!.pin}
+				data-pin-edge={meta[col.id]!.edge}
+				data-clip={meta[col.id]!.clip}
+				class={meta[col.id]!.gridClass}
+				style={meta[col.id]!.style}>{@render (col.cell ?? plainCell)(contexts[col.id]!)}</td
 			>{/each}</tr
 	>{#if rowDetails && table.isExpanded(node.id) && rowExpandable(row)}<!-- svelte-ignore a11y_no_redundant_roles --><tr
 			class="slean-table-detail"
@@ -1392,7 +1541,7 @@
 		>
 	{:else if node.data !== undefined}{@const row = node.data}{@const open = table.isExpanded(
 			node.id
-		)}{@const contexts = rowContexts(node, row, () => index)}
+		)}{@const contexts = rowContexts(node, row, () => index)}{@const meta = cellMeta}
 		<tr
 			class={rowClass?.(row, index) ?? ''}
 			data-row-id={String(node.id)}
@@ -1403,9 +1552,7 @@
 			role={grid ? 'row' : undefined}
 			data-selected={table.isSelected(node.id)}
 			data-clickable={onRowClick ? true : undefined}
-			aria-rowindex={ariaRowCount === undefined
-				? undefined
-				: headerRowCount + model.pageIndex * s.pageSize + index + 1}
+			aria-rowindex={rowIndexBase === undefined ? undefined : rowIndexBase + index + 1}
 			tabindex={focusableRows ? 0 : undefined}
 		>
 			{#if expander}<td
@@ -1561,13 +1708,13 @@
 					{:else}<td
 							data-cell
 							role={grid ? 'cell' : undefined}
-							data-clip={cellMeta[col.id]!.clip}
+							data-clip={meta[col.id]!.clip}
 							data-column={col.id}
-							data-align={cellMeta[col.id]!.align}
-							data-pin={cellMeta[col.id]!.pin}
-							data-pin-edge={cellMeta[col.id]!.edge}
-							class={cellMeta[col.id]!.className}
-							style={cellMeta[col.id]!.style}
+							data-align={meta[col.id]!.align}
+							data-pin={meta[col.id]!.pin}
+							data-pin-edge={meta[col.id]!.edge}
+							class={meta[col.id]!.className}
+							style={meta[col.id]!.style}
 							><div class="slean-table-cell">
 								{@render (col.cell ?? plainCell)(contexts[col.id]!)}
 							</div></td
@@ -1575,20 +1722,20 @@
 						data-cell
 						role="cell"
 						data-column={col.id}
-						data-align={cellMeta[col.id]!.align}
-						data-pin={cellMeta[col.id]!.pin}
-						data-pin-edge={cellMeta[col.id]!.edge}
-						data-clip={cellMeta[col.id]!.clip}
-						class={cellMeta[col.id]!.gridClass}
-						style={cellMeta[col.id]!.style}>{@render (col.cell ?? plainCell)(contexts[col.id]!)}</td
+						data-align={meta[col.id]!.align}
+						data-pin={meta[col.id]!.pin}
+						data-pin-edge={meta[col.id]!.edge}
+						data-clip={meta[col.id]!.clip}
+						class={meta[col.id]!.gridClass}
+						style={meta[col.id]!.style}>{@render (col.cell ?? plainCell)(contexts[col.id]!)}</td
 					>{/each}{:else}{#each cols as col (col.id)}<td
 						data-cell
 						data-column={col.id}
-						data-align={cellMeta[col.id]!.align}
-						data-pin={cellMeta[col.id]!.pin}
-						data-pin-edge={cellMeta[col.id]!.edge}
-						class={cellMeta[col.id]!.className}
-						style={cellMeta[col.id]!.style}
+						data-align={meta[col.id]!.align}
+						data-pin={meta[col.id]!.pin}
+						data-pin-edge={meta[col.id]!.edge}
+						class={meta[col.id]!.className}
+						style={meta[col.id]!.style}
 						><div class="slean-table-cell">
 							{@render (col.cell ?? plainCell)(contexts[col.id]!)}
 						</div></td
@@ -1907,6 +2054,23 @@
 				style:--slean-table-pin-inset={inset}
 			></div>{/each}
 	</div>
+	<!-- The probe (see `probe`): never shown, never styled (display: none), removed once measured. -->
+	{#if probe.length}<div
+			bind:this={probeRegion}
+			class="slean-table-probe"
+			hidden
+			aria-hidden="true"
+			style="display:none"
+		>
+			<table data-measuring>
+				<tbody
+					>{#each probe as node (node.id)}{@render (plainRows ? plainRow : bodyRow)(
+							node,
+							model.rows.indexOf(node)
+						)}{/each}</tbody
+				>
+			</table>
+		</div>{/if}
 	{#if pagination}<div class="slean-table-pagination">
 			<span class="slean-table-page-status" aria-live="polite"
 				>{m.page(

package/dist/table.svelte.js

@@ -14,7 +14,18 @@ export function createTable(options) {
     const state = $derived(controlled ? defaultState(options.state()) : owned);
     const columns = $derived(resolve(options.columns));
     const leaves = $derived(leafColumns(columns));
-    const visible = $derived(visibleColumns(columns, state));
+    /**
+     * The visible columns keep their array while they stay the same columns in the same order: every
+     * state change (a sort, a page, a selection) builds a new state, and a new array here would hand
+     * every row of a renderer new columns to draw its cells again for.
+     */
+    let shownColumns = [];
+    const visible = $derived.by(() => {
+        const next = visibleColumns(columns, state);
+        if (next.length === shownColumns.length && next.every((col, i) => col === shownColumns[i]))
+            return shownColumns;
+        return (shownColumns = next);
+    });
     const headers = $derived(headerRows(columns, visible));
     const model = $derived.by(() => {
         const paginated = resolve(options.pagination) ?? true;

package/package.json

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