@svelte-lean/table 0.10.0 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @svelte-lean/table
 
+## 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,7 @@
 		onExpandedRowsChange,
 		loading = false,
 		fetching = false,
-		skeletonRows = 5,
+		skeletonRows,
 		error,
 		onRetry,
 		empty,
@@ -180,6 +180,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 +523,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 {
@@ -873,9 +888,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,7 +268,10 @@ 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;
     error?: string;
     onRetry?: () => void;

package/package.json

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