@svelte-lean/table 0.1.1 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @svelte-lean/table
 
+## 0.2.0
+
+### Minor Changes
+
+- `layout="grid"` for long pages: the same elements laid out as CSS grid rows with explicit ARIA roles. Body rows stand in sections of 50 under `content-visibility: auto`, so the browser styles, lays out and paints only the sections near the screen; skipped sections assume the measured row height, and complete pages are laid out ahead in idle time. Column widths are measured once from hidden copies of the header and a sample of rows and kept; a declared `width` is a minimum and `maxWidth` (default 480) caps a measured width.
+  
+  `progressive: true` now makes the first batch one screenful, slices are sized from the measured cost of a row, and a table first rendered in the browser mounts progressively too (server output and its hydration stay complete).
+  
+  Rendering cost per row went down in both layouts: row nodes keep their identity across data updates with the same rows, body cells carry no per-cell `data-row` attribute or inline alignment style (alignment is `data-align`), row clicks, keys and drags are delegated to the table, and striping is a `data-even` attribute instead of a structural selector. Selectors that relied on `td[data-row]` should use `tr[data-row-id] > td[data-column]`.
+
+  A header in a region that scrolls sideways but not down (no `height`, a table wider than its container) is no longer `position: sticky`: it could never stick there, and a sticky box in a scroller made every row painted under it cost compositing work (about a tenth of a fast scroll through 1000 rows).
+
 ## 0.1.1
 
 ### Patch Changes

package/README.md

@@ -9,7 +9,7 @@ Svelte Lean Table: a data table for Svelte 5 that renders a native `<table>`, ke
 plain object and adds capabilities through separate entry points. Part of the
 [Svelte Lean](https://github.com/say16/svelte-lean) ecosystem.
 
-> Preview release (`0.1.0-next`).
+> Pre-1.0: minor versions may change the API; see the changelog.
 
 ## Install
 
@@ -45,6 +45,11 @@ pinning, resizing, visibility and ordering, inline editing, cell ranges, row reo
 empty and error states are props of `<DataTable />`. State is a serializable `TableState` object:
 pass `bind:state` or `onStateChange` to own it.
 
+Long pages: `progressive` mounts a large page in slices so the main thread never blocks on it, and
+`layout="grid"` lays rows out as CSS grid rows in sections the browser skips while off screen
+(`content-visibility: auto`), with column widths measured once from the content. Nothing is
+virtualized; every row stays in the document.
+
 Keyboard: with `onEdit` or `onCellRangeChange` the body is one Tab stop (roving `tabindex` over
 cells, arrow keys move, Enter/F2 edits, focus returns to the cell after an edit). Text direction
 follows the nearest `dir` attribute unless the `dir` prop is given. `selection: 'single'` needs an

package/dist/style.css

@@ -342,7 +342,9 @@
 	) {
 		border-start-end-radius: calc(var(--slean-table-radius) - 1px);
 	}
-	:where(.slean-table-scroll > table > tbody > tr:last-child > td) {
+	/* The last body row (`data-last`, set by the renderer) leaves the line to the region's border.
+	   An attribute, not \`:last-child\`: appending a row then restyles two rows, not every cell. */
+	:where(.slean-table-scroll > table > tbody > tr[data-last] > td) {
 		border-bottom: 0;
 	}
 	:where(.slean-table-heading) {
@@ -426,6 +428,14 @@
 		min-width: 3rem;
 		font-weight: 400;
 	}
+	/* Alignment is an attribute, not an inline style: an inline style per cell defeats the
+	   browser's style sharing between cells, which is most of the styling cost of a long table. */
+	:where(.slean-table-scroll > table > * > tr > td[data-align='end']) {
+		text-align: end;
+	}
+	:where(.slean-table-scroll > table > * > tr > td[data-align='center']) {
+		text-align: center;
+	}
 	:where(.slean-table-cell) {
 		display: flex;
 		align-items: center;
@@ -476,6 +486,28 @@
 	) {
 		color: var(--slean-table-fg);
 	}
+	/* The expand toggle of a plain grid row: the chevron is drawn by the button itself (two borders
+	   of a turned square), one element per row instead of an SVG. It points down when open, and the
+	   other way in right-to-left tables. */
+	:where(.slean-table-chevron)::before {
+		content: '';
+		display: block;
+		inline-size: 0.4375rem;
+		block-size: 0.4375rem;
+		margin: auto;
+		border: solid currentColor;
+		border-width: 0 1.5px 1.5px 0;
+		rotate: -45deg;
+		translate: -1px 0;
+	}
+	:where(.slean-table-chevron[aria-expanded='true'])::before {
+		rotate: 45deg;
+		translate: 0 -1px;
+	}
+	:where(.slean-table-chevron[aria-expanded='false']):dir(rtl)::before {
+		rotate: 135deg;
+		translate: 1px 0;
+	}
 	/* Keeps the text of rows without a toggle aligned with the rows that have one. */
 	:where(.slean-table-expand-spacer) {
 		inline-size: 1.5rem;
@@ -502,14 +534,9 @@
 	}
 
 	/* Row states write one variable on the row; cells paint it (pinned cells included). Stripes
-	   count data rows only, so an open detail row does not shift them. */
-	:where(
-		.slean-table[data-striped='true']
-			> .slean-table-scroll
-			> table
-			> tbody
-			> tr:nth-child(even of [data-row-id])
-	) {
+	   follow the row's position on the page (`data-even`, set by the renderer), so an open detail
+	   row does not shift them and inserting rows restyles nothing else. */
+	:where(.slean-table[data-striped='true'] > .slean-table-scroll > table > tbody > tr[data-even]) {
 		--slean-table-row-bg: var(--slean-table-row-stripe);
 	}
 	:where(
@@ -773,6 +800,184 @@
 		}
 	}
 	/* Print: inline sticky offsets and the scroll limit are inline styles, hence !important. */
+	/*
+	 * Grid layout (`layout="grid"`). The native elements stay, with explicit ARIA roles; every row
+	 * is a grid over the renderer's track list (`--slean-table-tracks`), and a body section off
+	 * screen is skipped by the browser (`content-visibility: auto`), so a long page costs the layout
+	 * and paint of what is on screen. `--slean-table-min-width` is the sum of the tracks' minimums:
+	 * below it the rows scroll sideways. `data-measuring` marks the hidden copy of a few rows the
+	 * renderer reads the content widths from, and removes before the frame ends.
+	 */
+	:where(.slean-table[data-layout='grid'] > .slean-table-scroll > table) {
+		display: block;
+		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)
+	) {
+		display: block;
+	}
+	:where(.slean-table[data-layout='grid'] > .slean-table-scroll > table > * > tr) {
+		display: grid;
+		grid-template-columns: var(--slean-table-tracks);
+	}
+	/* Each body row its own stacking context: sticky pinned cells then layerize per row, not per
+	   cell, which keeps compositing cheap while a long page scrolls. */
+	:where(.slean-table[data-layout='grid'] > .slean-table-scroll > table > tbody > tr) {
+		isolation: isolate;
+	}
+	: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));
+	}
+	/* A section whose rows are still being mounted holds the height they are expected to stand. */
+	:where(
+		.slean-table[data-layout='grid']
+			> .slean-table-scroll
+			> table
+			> tbody.slean-table-chunk[data-pending]
+	) {
+		min-block-size: calc(
+			var(--slean-table-chunk-rows, 50) * var(--slean-table-row-estimate, 2.75rem)
+		);
+	}
+	:where(.slean-table[data-layout='grid'] > .slean-table-scroll > table > * > tr > :is(th, td)) {
+		display: flex;
+		align-items: center;
+		min-width: 0;
+	}
+	:where(
+		.slean-table[data-layout='grid'] > .slean-table-scroll > table > * > tr > :is(th, td) > *
+	) {
+		flex: 1 1 auto;
+		min-width: 0;
+	}
+	:where(
+		.slean-table[data-layout='grid'] > .slean-table-scroll > table > * > tr > .slean-table-full
+	) {
+		grid-column: 1 / -1;
+		display: block;
+	}
+	:where(
+		.slean-table[data-layout='grid'] > .slean-table-scroll > table > tbody > tr > td[data-clip]
+	) {
+		overflow: hidden;
+	}
+	:where(
+		.slean-table[data-layout='grid']
+			> .slean-table-scroll
+			> table
+			> tbody
+			> tr
+			> td[data-clip]
+			> .slean-table-cell
+	) {
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		display: block;
+	}
+	:where(.slean-table-scroll > table[data-measuring]) {
+		display: block;
+		width: max-content;
+	}
+	:where(.slean-table-scroll > table[data-measuring] > *) {
+		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)) {
+		display: flex;
+		align-items: center;
+		position: static;
+	}
+	:where(.slean-table-scroll > table[data-measuring] > * > tr) {
+		grid-template-columns: none;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		width: max-content;
+	}
+	:where(.slean-table-scroll > table[data-measuring] > * > tr > :is(th, td) > *) {
+		flex: none;
+	}
+	:where(.slean-table-scroll > table[data-measuring] > thead > tr) {
+		grid-auto-columns: min-content;
+	}
+	/* A plain grid cell is its own content box: the td carries `slean-table-cell` (no wrapper). */
+	:where(
+		.slean-table[data-layout='grid']
+			> .slean-table-scroll
+			> table
+			> tbody
+			> tr
+			> td.slean-table-cell
+	) {
+		gap: 0.5rem;
+	}
+	:where(
+		.slean-table[data-layout='grid']
+			> .slean-table-scroll
+			> table
+			> tbody
+			> tr
+			> td.slean-table-cell[data-align='end']
+	) {
+		justify-content: flex-end;
+	}
+	:where(
+		.slean-table[data-layout='grid']
+			> .slean-table-scroll
+			> table
+			> tbody
+			> tr
+			> td.slean-table-cell[data-align='center']
+	) {
+		justify-content: center;
+	}
+	:where(
+		.slean-table[data-layout='grid']
+			> .slean-table-scroll
+			> table
+			> tbody
+			> tr
+			> td.slean-table-cell:is([data-clip], .slean-table-ellipsis)
+	) {
+		display: block;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		line-height: 1.5rem;
+	}
+	/* A grid body row paints its own ground once; its cells are transparent, except the sticky
+	   ones (pinned, selection, expand), which must stay opaque over what scrolls beneath them. */
+	:where(.slean-table[data-layout='grid'] > .slean-table-scroll > table > tbody > tr) {
+		background: var(--slean-table-row-bg, var(--slean-table-bg));
+	}
+	: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
+			> :is([data-pin], .slean-table-selection, .slean-table-expander)
+	) {
+		background: var(--slean-table-row-bg, var(--slean-table-bg));
+	}
+	/* Grid header labels wrap at word boundaries rather than widen their column. */
+	:where(.slean-table[data-layout='grid'] > .slean-table-scroll > table > thead > tr > th) {
+		white-space: normal;
+		overflow-wrap: normal;
+	}
 	@media print {
 		:where(
 			.slean-table-toolbar,