fix: set _rows and _pageRows correctly

bryanmylee · May 13, 2022 · d009cc4 · d009cc4
1 parent addfecd
commit d009cc4
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/src/lib/useTable.ts b/src/lib/useTable.ts
@@ -20,7 +20,7 @@ export interface TableState<Item, Plugins extends AnyPlugins = AnyPlugins> {
 	visibleColumns: Readable<DataColumn<Item, Plugins>[]>;
 	originalRows: Readable<BodyRow<Item>[]>;
 	rows: Readable<BodyRow<Item>[]>;
-	page: Readable<BodyRow<Item>[]>;
+	pageRows: Readable<BodyRow<Item>[]>;
 }
 
 export const useTable = <Item, Plugins extends AnyPlugins = AnyPlugins>(
@@ -39,15 +39,15 @@ export const useTable = <Item, Plugins extends AnyPlugins = AnyPlugins>(
 	// _stores need to be defined first to pass into plugins for initialization.
 	const _visibleColumns = writable<DataColumn<Item, Plugins>[]>([]);
 	const _rows = writable<BodyRow<Item>[]>([]);
-	const _page = writable<BodyRow<Item>[]>([]);
+	const _pageRows = writable<BodyRow<Item>[]>([]);
 	const tableState: TableState<Item, Plugins> = {
 		data,
 		columns,
 		dataColumns,
 		visibleColumns: _visibleColumns,
 		originalRows,
 		rows: _rows,
-		page: _page,
+		pageRows: _pageRows,
 	};
 
 	const pluginInstances = Object.fromEntries(
@@ -136,7 +136,8 @@ export const useTable = <Item, Plugins extends AnyPlugins = AnyPlugins>(
 		.map((pluginInstance) => pluginInstance.derivePageRows)
 		.filter(nonUndefined);
 
-	let pageRows = rows;
+	// Must derive from `injectedRows` instead of `rows` to ensure that `_rows` is set.
+	let pageRows = injectedRows;
 	derivePageRowsFns.forEach((fn) => {
 		pageRows = fn(pageRows);
 	});
@@ -162,7 +163,7 @@ export const useTable = <Item, Plugins extends AnyPlugins = AnyPlugins>(
 				});
 			});
 		});
-		_rows.set($pageRows);
+		_pageRows.set($pageRows);
 		return $pageRows;
 	});
 

diff --git a/src/routes/index.svelte b/src/routes/index.svelte
@@ -57,7 +57,11 @@
 			},
 		}),
 		table.group({
-			header: ({ rows }) => derived(rows, (_rows) => `Name (${_rows.length} samples)`),
+			header: ({ rows, pageRows }) =>
+				derived(
+					[rows, pageRows],
+					([_rows, _pageRows]) => `Name (${_rows.length} records, ${_pageRows.length} in page)`
+				),
 			columns: [
 				table.column({
 					header: createRender(Italic, { text: 'First Name' }),