@svelte-lean/table 0.10.0 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @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
+
+- 84e0055: A paginated `DataTable` loading without rows draws a page of placeholder rows by default (its page size, at most 25) instead of five, so the pager and whatever follows the table stand where they will be once the rows arrive. An unpaginated table still draws five; `skeletonRows` still sets the number.
+
+### Patch Changes
+
+- 8ba61b8: A paginated `DataTable` on a page that no longer exists moves to the last page there is. The model already drew the last page, but the state kept the old index, so a manual table whose last page emptied (its last row approved or deleted) showed "page 23 of 23" while it kept asking the server for page 24 and drew it empty. Once the table is neither `loading` nor `fetching`, `state.pageIndex` now follows and `onStateChange` fires.
+
 ## 0.10.0
 
 No changes in this release.

package/dist/table/data-table.svelte

@@ -104,7 +104,8 @@
 		onExpandedRowsChange,
 		loading = false,
 		fetching = false,
-		skeletonRows = 5,
+		skeletonRows,
+		measureKey,
 		error,
 		onRetry,
 		empty,
@@ -180,6 +181,19 @@
 	const m = $derived({ ...en, ...messages });
 	const cols = $derived(table.visibleColumns);
 	const model = $derived(table.model);
+	/**
+	 * A page that no longer exists is left for the last one there is. When the rows of the last
+	 * page go — a filter elsewhere, the last row on it approved, the total of a manual table
+	 * shrinking — the model draws the last page that remains, and the state follows it, so a
+	 * manual table's `onStateChange` asks for that page instead of drawing the empty one it asked
+	 * for. Not while the table loads or fetches: a page count read before the answer arrives is
+	 * not the data's.
+	 */
+	$effect(() => {
+		if (loading || fetching || !pagination) return;
+		const last = model.pageIndex;
+		if (last < s.pageIndex) untrack(() => table.setPage(last));
+	});
 	/** The expand toggle has a column of its own when asked for and when anything can expand. */
 	const expander = $derived(expandColumn && (!!rowDetails || !!getSubRows));
 	/** Every column of a full-width row: the leading control columns and the data columns. */
@@ -510,6 +524,8 @@
 	const GRID_MAX = 480;
 	const GRID_MIN = 48;
 	const MEASURE_ROWS = 30;
+	/** The most placeholder rows a loading page draws when `skeletonRows` is not given. */
+	const MAX_PLACEHOLDERS = 25;
 	const grid = $derived(layout === 'grid');
 	let measured = $state<Record<string, number>>({});
 	function gridWidth(col: Column<T>): number {
@@ -566,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.
@@ -591,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]!);
 		}
@@ -873,9 +905,17 @@
 		manual && rowCount !== undefined ? rowCount + headerRowCount : undefined
 	);
 	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
+	 * the pager and whatever follows the table stand where they will be once the rows arrive; five
+	 * stood in for a page of twenty, and everything below moved when it came.
+	 */
+	const skeletonCount = $derived(
+		skeletonRows ?? (pagination && s.pageSize > 0 ? Math.min(s.pageSize, MAX_PLACEHOLDERS) : 5)
+	);
 	const skeleton = $derived(
 		loading && !model.rows.length
-			? Array.from({ length: Math.max(0, skeletonRows) }, (_, i) => i)
+			? Array.from({ length: Math.max(0, skeletonCount) }, (_, i) => i)
 			: []
 	);
 	const emptyContext = $derived({

package/dist/types.d.ts

@@ -268,8 +268,17 @@ export interface TableProps<T> {
     onExpandedRowsChange?: (rows: RowId[]) => void;
     loading?: boolean;
     fetching?: boolean;
-    /** Skeleton rows drawn while `loading` and no row is present. */
+    /**
+     * Skeleton rows drawn while `loading` and no row is present. Default: the page size, at most
+     * 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.10.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",