@svelte-lean/table 0.11.0 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @svelte-lean/table
 
+## 0.12.0
+
+### Minor Changes
+
+- dba6ebc: `DataTable` takes `measureKey`: change it when what the cells show changes without the rows changing (a masked value revealed in place, a value a cell fetched itself), and the grid measures every row on the page again when idle, so the column widens instead of the value running over the next column. A column only grows; the first value measures nothing extra.
+
 ## 0.11.0
 
 ### Minor Changes

package/dist/table/data-table.svelte

@@ -105,6 +105,7 @@
 		loading = false,
 		fetching = false,
 		skeletonRows,
+		measureKey,
 		error,
 		onRetry,
 		empty,
@@ -581,6 +582,22 @@
 			whenIdle(() => measure(true, first));
 		});
 	});
+	/**
+	 * A cell's content changed under the same rows (`measureKey`): every row on the page is
+	 * measured again when idle, so a value revealed in place widens its column instead of
+	 * running over the next one. Not on the first value: the rows are measured as they come.
+	 */
+	let lastMeasureKey: unknown = undefined;
+	let measureKeySeen = false;
+	$effect(() => {
+		const key = measureKey;
+		if (!grid) return;
+		untrack(() => {
+			if (measureKeySeen && key !== lastMeasureKey) whenIdle(() => measure(true, true, true));
+			measureKeySeen = true;
+			lastMeasureKey = key;
+		});
+	});
 	/**
 	 * What a body row stands, from the first section once its rows are drawn: the sections the
 	 * browser skips assume it, so the page is about as tall before they are drawn as after.
@@ -606,15 +623,15 @@
 	 * hidden table inside the root, laid out there with every cell at its max-content width
 	 * (`data-measuring`), read, and removed. The live rows are neither restyled nor laid out.
 	 */
-	function measure(whole: boolean, first = true) {
+	function measure(whole: boolean, first = true, every = false) {
 		const live = viewport?.firstElementChild as HTMLElement | null;
 		if (!live || !root) return;
 		const leaves = new Set(cols.map((col) => col.id));
 		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 = first ? rows.slice(0, MEASURE_ROWS) : [];
-		if (whole && rows.length > MEASURE_ROWS) {
+		const sample = every ? rows : first ? rows.slice(0, MEASURE_ROWS) : [];
+		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]!);
 		}

package/dist/types.d.ts

@@ -273,6 +273,12 @@ export interface TableProps<T> {
      * 25, when paginated (so nothing below the table moves when the rows arrive); otherwise 5.
      */
     skeletonRows?: number;
+    /**
+     * Changes when what the cells show changes without the rows changing — a masked value
+     * revealed in place, a value the cell fetched itself. On each change after the first the grid
+     * measures every row on the page again, when idle; a column only grows.
+     */
+    measureKey?: unknown;
     error?: string;
     onRetry?: () => void;
     empty?: Snippet<[EmptyContext]>;

package/package.json

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