@rainlanguage/ui-components 0.0.1-alpha.196 → 0.0.1-alpha.200

package/dist/__mocks__/stores.d.ts

@@ -36,6 +36,11 @@ export declare const mockHideZeroBalanceVaultsStore: {
     set: (this: void, value: boolean) => void;
     mockSetSubscribeValue: (value: boolean) => void;
 };
+export declare const mockHideInactiveOrdersVaultsStore: {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<boolean>, invalidate?: import("svelte/store").Invalidator<boolean> | undefined) => import("svelte/store").Unsubscriber;
+    set: (this: void, value: boolean) => void;
+    mockSetSubscribeValue: (value: boolean) => void;
+};
 export declare const mockActiveNetworkRefStore: {
     subscribe: (this: void, run: import("svelte/store").Subscriber<string>, invalidate?: import("svelte/store").Invalidator<string> | undefined) => import("svelte/store").Unsubscriber;
     set: (this: void, value: string) => void;
@@ -137,4 +142,14 @@ export declare const mockPageStore: {
     mockSetSubscribeValue: (newValue: Partial<typeof initialPageState>) => void;
     reset: () => void;
 };
+export declare const mockActiveTokensStore: {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<string[]>, invalidate?: import("svelte/store").Invalidator<string[]> | undefined) => import("svelte/store").Unsubscriber;
+    set: (this: void, value: string[]) => void;
+    mockSetSubscribeValue: (value: string[]) => void;
+};
+export declare const mockActiveOrderbookAddressesStore: {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<string[]>, invalidate?: import("svelte/store").Invalidator<string[]> | undefined) => import("svelte/store").Unsubscriber;
+    set: (this: void, value: string[]) => void;
+    mockSetSubscribeValue: (value: string[]) => void;
+};
 export {};

package/dist/__mocks__/stores.js

@@ -29,6 +29,7 @@ const mockActiveAccountsItemsWritable = writable({});
 const mockShowInactiveOrdersWritable = writable(true);
 const mockOrderHashWritable = writable('');
 const mockHideZeroBalanceVaultsWritable = writable(false);
+const mockHideInactiveOrdersVaultsWritable = writable(false);
 const mockActiveNetworkRefWritable = writable('');
 const mockActiveOrderbookRefWritable = writable('');
 const mockActiveAccountsWritable = writable({});
@@ -38,6 +39,8 @@ const mockConnectedWritable = writable(true);
 const mockWagmiConfigWritable = writable(mockWeb3Config);
 const mockShowMyItemsOnlyWritable = writable(false);
 const mockSelectedChainIdsWritable = writable([]);
+const mockActiveTokensWritable = writable([]);
+const mockActiveOrderbookAddressesWritable = writable([]);
 export const mockActiveAccountsItemsStore = {
     subscribe: mockActiveAccountsItemsWritable.subscribe,
     set: mockActiveAccountsItemsWritable.set,
@@ -58,6 +61,11 @@ export const mockHideZeroBalanceVaultsStore = {
     set: mockHideZeroBalanceVaultsWritable.set,
     mockSetSubscribeValue: (value) => mockHideZeroBalanceVaultsWritable.set(value)
 };
+export const mockHideInactiveOrdersVaultsStore = {
+    subscribe: mockHideInactiveOrdersVaultsWritable.subscribe,
+    set: mockHideInactiveOrdersVaultsWritable.set,
+    mockSetSubscribeValue: (value) => mockHideInactiveOrdersVaultsWritable.set(value)
+};
 export const mockActiveNetworkRefStore = {
     subscribe: mockActiveNetworkRefWritable.subscribe,
     set: mockActiveNetworkRefWritable.set,
@@ -116,3 +124,13 @@ export const mockPageStore = {
     },
     reset: () => mockPageWritable.set(initialPageState)
 };
+export const mockActiveTokensStore = {
+    subscribe: mockActiveTokensWritable.subscribe,
+    set: mockActiveTokensWritable.set,
+    mockSetSubscribeValue: (value) => mockActiveTokensWritable.set(value)
+};
+export const mockActiveOrderbookAddressesStore = {
+    subscribe: mockActiveOrderbookAddressesWritable.subscribe,
+    set: mockActiveOrderbookAddressesWritable.set,
+    mockSetSubscribeValue: (value) => mockActiveOrderbookAddressesWritable.set(value)
+};

package/dist/components/CheckboxInactiveOrdersVault.svelte

@@ -0,0 +1,20 @@
+<script>import { Checkbox, Label } from "flowbite-svelte";
+export let hideInactiveOrdersVaults;
+function handleHideInactiveOrdersVaultsChange() {
+  $hideInactiveOrdersVaults = !$hideInactiveOrdersVaults;
+}
+</script>
+
+<div data-testid="inactive-orders-vault-checkbox" class="flex items-center gap-x-2">
+	<Label
+		for="hide-inactive-orders-vaults"
+		class="cursor-pointer whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-300"
+	>
+		Hide vaults without active orders
+	</Label>
+	<Checkbox
+		id="hide-inactive-orders-vaults"
+		checked={$hideInactiveOrdersVaults}
+		on:change={handleHideInactiveOrdersVaultsChange}
+	/>
+</div>

package/dist/components/CheckboxInactiveOrdersVault.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { AppStoresInterface } from '../types/appStores';
+declare const __propDef: {
+    props: {
+        hideInactiveOrdersVaults: AppStoresInterface["hideInactiveOrdersVaults"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type CheckboxInactiveOrdersVaultProps = typeof __propDef.props;
+export type CheckboxInactiveOrdersVaultEvents = typeof __propDef.events;
+export type CheckboxInactiveOrdersVaultSlots = typeof __propDef.slots;
+export default class CheckboxInactiveOrdersVault extends SvelteComponent<CheckboxInactiveOrdersVaultProps, CheckboxInactiveOrdersVaultEvents, CheckboxInactiveOrdersVaultSlots> {
+}
+export {};

package/dist/components/ListViewOrderbookFilters.svelte

@@ -7,11 +7,14 @@ import Tooltip from "./Tooltip.svelte";
 import CheckboxActiveOrders from "./checkbox/CheckboxActiveOrders.svelte";
 import DropdownOrderListAccounts from "./dropdown/DropdownOrderListAccounts.svelte";
 import DropdownTokensFilter from "./dropdown/DropdownTokensFilter.svelte";
+import DropdownOrderbooksFilter from "./dropdown/DropdownOrderbooksFilter.svelte";
 import InputOrderHash from "./input/InputOrderHash.svelte";
 import CheckboxZeroBalanceVault from "./CheckboxZeroBalanceVault.svelte";
+import CheckboxInactiveOrdersVault from "./CheckboxInactiveOrdersVault.svelte";
 import CheckboxMyItemsOnly from "./CheckboxMyItemsOnly.svelte";
 import { useAccount } from "../providers/wallet/useAccount";
 export let hideZeroBalanceVaults;
+export let hideInactiveOrdersVaults;
 export let activeAccountsItems;
 export let showMyItemsOnly;
 export let selectedChainIds;
@@ -20,6 +23,8 @@ export let orderHash;
 export let activeTokens;
 export let selectedTokens;
 export let tokensQuery;
+export let activeOrderbookAddresses;
+export let selectedOrderbookAddresses;
 $: isVaultsPage = $page.url.pathname === "/vaults";
 $: isOrdersPage = $page.url.pathname === "/orders";
 const { account } = useAccount();
@@ -49,6 +54,9 @@ $: accounts = raindexClient.getAllAccounts();
 			<div class="mt-4 w-full lg:w-auto">
 				<CheckboxZeroBalanceVault {hideZeroBalanceVaults} />
 			</div>
+			<div class="mt-4 w-full lg:w-auto">
+				<CheckboxInactiveOrdersVault {hideInactiveOrdersVaults} />
+			</div>
 		{/if}
 
 		{#if isOrdersPage}
@@ -61,6 +69,12 @@ $: accounts = raindexClient.getAllAccounts();
 			<DropdownOrderListAccounts {activeAccountsItems} />
 		{/if}
 		<DropdownTokensFilter {tokensQuery} {activeTokens} {selectedTokens} label="Tokens" />
+		<DropdownOrderbooksFilter
+			{activeOrderbookAddresses}
+			{selectedOrderbookAddresses}
+			selectedChainIds={$selectedChainIds}
+			label="Orderbooks"
+		/>
 		<DropdownActiveNetworks {selectedChainIds} />
 	{/if}
 </div>

package/dist/components/ListViewOrderbookFilters.svelte.d.ts

@@ -6,6 +6,7 @@ import type { AppStoresInterface } from '../types/appStores';
 declare const __propDef: {
     props: {
         hideZeroBalanceVaults: AppStoresInterface["hideZeroBalanceVaults"];
+        hideInactiveOrdersVaults: AppStoresInterface["hideInactiveOrdersVaults"];
         activeAccountsItems: AppStoresInterface["activeAccountsItems"];
         showMyItemsOnly: AppStoresInterface["showMyItemsOnly"];
         selectedChainIds: AppStoresInterface["selectedChainIds"];
@@ -14,6 +15,8 @@ declare const __propDef: {
         activeTokens: AppStoresInterface["activeTokens"];
         selectedTokens: Address[];
         tokensQuery: Readable<QueryObserverResult<RaindexVaultToken[], Error>>;
+        activeOrderbookAddresses: AppStoresInterface["activeOrderbookAddresses"];
+        selectedOrderbookAddresses: Address[];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/LocalDbStatusBadge.svelte

@@ -0,0 +1,27 @@
+<script>const STATUS_LABELS = {
+  active: "Active",
+  syncing: "Syncing",
+  failure: "Failure"
+};
+const DOT_CLASSES = {
+  active: "bg-emerald-400",
+  syncing: "bg-sky-400",
+  failure: "bg-red-500"
+};
+const TEXT_CLASSES = {
+  active: "text-emerald-400",
+  syncing: "text-sky-400",
+  failure: "text-red-400"
+};
+export let status = "active";
+</script>
+
+<span
+	class="inline-flex items-center gap-2 rounded-full border border-gray-200 bg-gray-100 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
+	data-testid="local-db-status"
+>
+	<span class={`h-2 w-2 rounded-full ${DOT_CLASSES[status]}`} aria-hidden="true" />
+	<span class={TEXT_CLASSES[status]}>
+		{STATUS_LABELS[status]}
+	</span>
+</span>

package/dist/components/LocalDbStatusBadge.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { LocalDbStatus } from '@rainlanguage/orderbook';
+declare const __propDef: {
+    props: {
+        status?: LocalDbStatus;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type LocalDbStatusBadgeProps = typeof __propDef.props;
+export type LocalDbStatusBadgeEvents = typeof __propDef.events;
+export type LocalDbStatusBadgeSlots = typeof __propDef.slots;
+export default class LocalDbStatusBadge extends SvelteComponent<LocalDbStatusBadgeProps, LocalDbStatusBadgeEvents, LocalDbStatusBadgeSlots> {
+}
+export {};

package/dist/components/LocalDbStatusCard.svelte

@@ -0,0 +1,40 @@
+<script>import LocalDbStatusBadge from "./LocalDbStatusBadge.svelte";
+import LocalDbStatusModal from "./LocalDbStatusModal.svelte";
+import { ChevronRightOutline } from "flowbite-svelte-icons";
+export let networkStatuses = /* @__PURE__ */ new Map();
+export let orderbookStatuses = /* @__PURE__ */ new Map();
+let modalOpen = false;
+$: networkList = Array.from(networkStatuses.values());
+$: hasNetworks = networkList.length > 0;
+$: hasFailure = networkList.some((s) => s.status === "failure");
+$: displayStatus = hasFailure ? "failure" : "active";
+function openModal() {
+  modalOpen = true;
+}
+</script>
+
+<div
+	class="rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900"
+	data-testid="local-db-status-card"
+>
+	<button
+		type="button"
+		class="flex w-full items-center justify-between px-3 py-3 text-left transition hover:bg-gray-50 dark:hover:bg-gray-800"
+		on:click={openModal}
+		data-testid="local-db-status-header"
+	>
+		<div class="flex items-center gap-2">
+			<span class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400"
+				>LocalDB</span
+			>
+		</div>
+		<div class="flex items-center gap-2">
+			<LocalDbStatusBadge status={displayStatus} />
+			{#if hasNetworks}
+				<ChevronRightOutline class="h-3 w-3 shrink-0" />
+			{/if}
+		</div>
+	</button>
+</div>
+
+<LocalDbStatusModal bind:open={modalOpen} {networkStatuses} {orderbookStatuses} />

package/dist/components/LocalDbStatusCard.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { NetworkSyncStatus, OrderbookSyncStatus } from '@rainlanguage/orderbook';
+declare const __propDef: {
+    props: {
+        networkStatuses?: Map<number, NetworkSyncStatus>;
+        orderbookStatuses?: Map<string, OrderbookSyncStatus>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type LocalDbStatusCardProps = typeof __propDef.props;
+export type LocalDbStatusCardEvents = typeof __propDef.events;
+export type LocalDbStatusCardSlots = typeof __propDef.slots;
+export default class LocalDbStatusCard extends SvelteComponent<LocalDbStatusCardProps, LocalDbStatusCardEvents, LocalDbStatusCardSlots> {
+}
+export {};

package/dist/components/LocalDbStatusModal.svelte

@@ -0,0 +1,103 @@
+<script>import { Modal } from "flowbite-svelte";
+import LocalDbStatusBadge from "./LocalDbStatusBadge.svelte";
+import { getNetworkName } from "../utils/getNetworkName";
+export let open = false;
+export let networkStatuses = /* @__PURE__ */ new Map();
+export let orderbookStatuses = /* @__PURE__ */ new Map();
+$: networkList = Array.from(networkStatuses.values());
+$: orderbookList = Array.from(orderbookStatuses.values());
+$: networkGroups = buildNetworkGroups(networkList, orderbookList);
+function buildNetworkGroups(networks, orderbooks) {
+  const groups = [];
+  for (const network of networks) {
+    const networkOrderbooks = orderbooks.filter((ob) => ob.obId.chainId === network.chainId);
+    groups.push({
+      chainId: network.chainId,
+      networkName: getNetworkName(network.chainId) ?? `Chain ${network.chainId}`,
+      status: network,
+      orderbooks: networkOrderbooks
+    });
+  }
+  return groups;
+}
+</script>
+
+<Modal
+	bind:open
+	size="lg"
+	class="dark:border dark:border-gray-700 dark:bg-gray-900"
+	dialogClass="fixed top-0 start-0 end-1 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex justify-center items-center h-full"
+	data-testid="local-db-status-modal"
+>
+	<div class="flex flex-col gap-4" slot="header">
+		<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Database Sync Status</h3>
+	</div>
+
+	<div class="max-h-[60vh] overflow-y-auto">
+		{#if networkList.length === 0}
+			<p class="text-sm text-gray-500 dark:text-gray-400">No networks are being synced.</p>
+		{:else}
+			<div class="space-y-4">
+				{#each networkGroups as group (group.chainId)}
+					<div
+						class="rounded-lg border border-gray-200 dark:border-gray-700"
+						data-testid="network-group-{group.chainId}"
+					>
+						<div
+							class="flex items-center justify-between border-b border-gray-200 bg-gray-50 px-4 py-3 dark:border-gray-700 dark:bg-gray-800"
+						>
+							<div class="flex items-center gap-2">
+								<span class="font-medium text-gray-900 dark:text-white">{group.networkName}</span>
+								{#if group.status.schedulerState === 'notLeader'}
+									<span
+										class="rounded bg-amber-100 px-1.5 py-0.5 text-[10px] font-medium uppercase text-amber-700 dark:bg-amber-900/30 dark:text-amber-400"
+									>
+										Observing
+									</span>
+								{/if}
+							</div>
+							<LocalDbStatusBadge status={group.status.status} />
+						</div>
+
+						{#if group.orderbooks.length > 0}
+							<ul class="divide-y divide-gray-100 dark:divide-gray-800">
+								{#each group.orderbooks as obStatus (obStatus.obId.orderbookAddress)}
+									<li class="px-4 py-3">
+										<div class="flex items-start justify-between gap-4">
+											<div class="min-w-0 flex-1">
+												<span
+													class="font-mono text-sm text-gray-700 dark:text-gray-300"
+													title={obStatus.obId.orderbookAddress}
+												>
+													{obStatus.obId.orderbookAddress}
+												</span>
+												{#if obStatus.status === 'syncing' && obStatus.phaseMessage && obStatus.schedulerState !== 'notLeader'}
+													<div class="mt-2 text-sm text-sky-600 dark:text-sky-400">
+														{obStatus.phaseMessage}
+													</div>
+												{/if}
+												{#if obStatus.status === 'failure' && obStatus.error}
+													<div class="mt-2 text-sm text-red-600 dark:text-red-400">
+														{obStatus.error}
+													</div>
+												{/if}
+											</div>
+										</div>
+									</li>
+								{/each}
+							</ul>
+						{/if}
+
+						{#if group.status.status === 'failure' && group.status.error}
+							<div class="border-t border-gray-200 px-4 py-3 dark:border-gray-700">
+								<div class="text-sm text-red-600 dark:text-red-400">
+									{group.status.error}
+								</div>
+							</div>
+						{/if}
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</Modal>

package/dist/components/LocalDbStatusModal.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import type { NetworkSyncStatus, OrderbookSyncStatus } from '@rainlanguage/orderbook';
+declare const __propDef: {
+    props: {
+        open?: boolean;
+        networkStatuses?: Map<number, NetworkSyncStatus>;
+        orderbookStatuses?: Map<string, OrderbookSyncStatus>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type LocalDbStatusModalProps = typeof __propDef.props;
+export type LocalDbStatusModalEvents = typeof __propDef.events;
+export type LocalDbStatusModalSlots = typeof __propDef.slots;
+export default class LocalDbStatusModal extends SvelteComponent<LocalDbStatusModalProps, LocalDbStatusModalEvents, LocalDbStatusModalSlots> {
+}
+export {};

package/dist/components/TanstackAppTable.svelte

@@ -1,8 +1,9 @@
 <script generics="DataItem, InputData = DataItem[]">import { invalidateTanstackQueries } from "../queries/queryClient";
 import Refresh from "./icon/Refresh.svelte";
 import { Button, Table, TableBody, TableBodyRow, TableHead } from "flowbite-svelte";
-import { createEventDispatcher } from "svelte";
+import { afterUpdate, createEventDispatcher, onDestroy, onMount } from "svelte";
 import { useQueryClient } from "@tanstack/svelte-query";
+import { createWindowVirtualizer } from "@tanstack/svelte-virtual";
 const queryClient = useQueryClient();
 const dispatch = createEventDispatcher();
 export let queryKey;
@@ -10,10 +11,128 @@ export let query;
 export let emptyMessage = "None found";
 export let rowHoverable = true;
 export let dataSelector = (pageData) => Array.isArray(pageData) ? pageData : [];
-$: data = $query.data ? {
-  ...$query.data,
-  pages: $query.data.pages.map((page) => dataSelector(page))
-} : void 0;
+export let virtualization = {};
+$: enableVirtualization = virtualization.enabled ?? true;
+$: estimatedRowHeight = virtualization.estimatedRowHeight ?? 56;
+$: virtualizationOverscan = virtualization.overscan ?? 8;
+let measuredRowHeight = null;
+$: rowHeight = measuredRowHeight ?? estimatedRowHeight;
+let transformedPages = [];
+let lastPagesRef;
+let lastSelector = dataSelector;
+$: {
+  const currentData = $query.data;
+  const currentPages = currentData?.pages;
+  const selectorChanged = lastSelector !== dataSelector;
+  if (!currentPages) {
+    transformedPages = [];
+    lastPagesRef = void 0;
+    lastSelector = dataSelector;
+  } else if (currentPages !== lastPagesRef || selectorChanged) {
+    transformedPages = currentPages.map((page) => dataSelector(page));
+    lastPagesRef = currentPages;
+    lastSelector = dataSelector;
+  }
+}
+$: flattenedRows = transformedPages.flat();
+$: totalRows = flattenedRows.length;
+$: hasData = totalRows > 0;
+const hasWindow = typeof window !== "undefined";
+let tableContainerElement = null;
+let tableOffsetTop = 0;
+let virtualizerStore = null;
+let virtualizer = null;
+let unsubscribeVirtualizer = null;
+let virtualizationActive = false;
+function updateTableOffset() {
+  if (!enableVirtualization || !hasWindow || !tableContainerElement) {
+    tableOffsetTop = 0;
+    return;
+  }
+  const rect = tableContainerElement.getBoundingClientRect();
+  tableOffsetTop = rect.top + window.scrollY;
+}
+onMount(() => {
+  if (!hasWindow) {
+    return;
+  }
+  virtualizerStore = createWindowVirtualizer({
+    count: totalRows,
+    estimateSize: () => rowHeight,
+    overscan: virtualizationOverscan,
+    scrollMargin: tableOffsetTop,
+    getItemKey: (index) => index,
+    enabled: enableVirtualization && totalRows > 0
+  });
+  unsubscribeVirtualizer = virtualizerStore.subscribe((instance) => {
+    virtualizer = instance;
+  });
+  updateTableOffset();
+  return () => {
+    unsubscribeVirtualizer?.();
+  };
+});
+afterUpdate(() => {
+  if (enableVirtualization) {
+    updateTableOffset();
+  }
+});
+$: if (virtualizer) {
+  virtualizer.setOptions({
+    count: totalRows,
+    estimateSize: () => rowHeight,
+    overscan: virtualizationOverscan,
+    scrollMargin: tableOffsetTop,
+    getItemKey: (index) => index,
+    enabled: enableVirtualization && totalRows > 0
+  });
+}
+$: virtualizationActive = enableVirtualization && Boolean(virtualizer);
+let virtualItems = [];
+let totalSize = 0;
+let topPadding = 0;
+let bottomPadding = 0;
+let scrollMargin = 0;
+$: {
+  const hasRows = totalRows > 0;
+  scrollMargin = virtualizationActive ? tableOffsetTop : 0;
+  if (virtualizationActive && virtualizer && hasRows) {
+    virtualItems = virtualizer.getVirtualItems();
+    totalSize = virtualizer.getTotalSize();
+    const firstItem = virtualItems[0];
+    const lastItem = virtualItems[virtualItems.length - 1];
+    topPadding = firstItem ? Math.max(0, firstItem.start - scrollMargin) : 0;
+    bottomPadding = lastItem ? Math.max(0, totalSize - (lastItem.end - scrollMargin)) : Math.max(0, totalSize);
+  } else {
+    virtualItems = [];
+    totalSize = 0;
+    topPadding = 0;
+    bottomPadding = 0;
+  }
+}
+onDestroy(() => {
+  unsubscribeVirtualizer?.();
+});
+afterUpdate(() => {
+  if (!virtualizationActive || !virtualizer || !tableContainerElement) {
+    return;
+  }
+  const rows = Array.from(
+    tableContainerElement.querySelectorAll('tbody tr[data-virtual-row="true"]')
+  );
+  if (!rows.length) {
+    return;
+  }
+  for (const row of rows) {
+    virtualizer.measureElement(row);
+  }
+  if (measuredRowHeight === null) {
+    const sampleHeight = rows[0].getBoundingClientRect().height;
+    if (sampleHeight > 0) {
+      measuredRowHeight = sampleHeight;
+    }
+  }
+});
 </script>
 
 <div data-testid="title" class="flex h-16 w-full items-center justify-end">
@@ -31,34 +150,62 @@ $: data = $query.data ? {
 		}}
 	/>
 </div>
-{#if (data?.pages?.[0]?.length ?? 0) === 0}
+{#if totalRows === 0}
 	<div data-testid="emptyMessage" class="text-center text-gray-900 dark:text-white">
 		{emptyMessage}
 	</div>
-{:else if data}
-	<Table
-		divClass="cursor-pointer rounded-lg overflow-auto dark:border-none border"
-		hoverable={rowHoverable}
+{:else if hasData}
+	<div
+		class="cursor-pointer overflow-x-auto rounded-lg border dark:border-none"
+		data-testid="tanstackTableContainer"
+		bind:this={tableContainerElement}
 	>
-		<TableHead data-testid="head">
-			<slot name="head" />
-		</TableHead>
-		<TableBody>
-			{#each data.pages as page}
-				{#each page as item}
-					<TableBodyRow
-						class="whitespace-nowrap"
-						data-testid="bodyRow"
-						on:click={() => {
-							dispatch('clickRow', { item });
-						}}
-					>
-						<slot name="bodyRow" {item} />
-					</TableBodyRow>
-				{/each}
-			{/each}
-		</TableBody>
-	</Table>
+		<Table divClass="min-w-full" class="w-full table-fixed" hoverable={rowHoverable}>
+			<TableHead data-testid="head">
+				<slot name="head" />
+			</TableHead>
+			<TableBody>
+				{#if virtualizationActive && topPadding > 0}
+					<tr aria-hidden="true">
+						<td colspan="1000" class="border-0 p-0" style={`height:${topPadding}px;`} />
+					</tr>
+				{/if}
+				{#if virtualizationActive}
+					{#each virtualItems as virtualItem (virtualItem.key)}
+						<TableBodyRow
+							class="whitespace-nowrap"
+							data-testid="bodyRow"
+							data-virtual-row="true"
+							on:click={() => {
+								dispatch('clickRow', { item: flattenedRows[virtualItem.index] });
+							}}
+						>
+							<slot name="bodyRow" item={flattenedRows[virtualItem.index]} />
+						</TableBodyRow>
+					{/each}
+				{:else}
+					{#each transformedPages as page}
+						{#each page as item}
+							<TableBodyRow
+								class="whitespace-nowrap"
+								data-testid="bodyRow"
+								on:click={() => {
+									dispatch('clickRow', { item });
+								}}
+							>
+								<slot name="bodyRow" {item} />
+							</TableBodyRow>
+						{/each}
+					{/each}
+				{/if}
+				{#if virtualizationActive && bottomPadding > 0}
+					<tr aria-hidden="true">
+						<td colspan="1000" class="border-0 p-0" style={`height:${bottomPadding}px;`} />
+					</tr>
+				{/if}
+			</TableBody>
+		</Table>
+	</div>
 	<div class="mt-2 flex justify-center">
 		<Button
 			data-testid="loadMoreButton"

package/dist/components/TanstackAppTable.svelte.d.ts

@@ -7,6 +7,11 @@ declare class __sveltets_Render<DataItem, InputData = DataItem[]> {
         emptyMessage?: string;
         rowHoverable?: boolean;
         dataSelector?: ((pageData: InputData) => DataItem[]) | undefined;
+        virtualization?: {
+            enabled?: boolean;
+            estimatedRowHeight?: number;
+            overscan?: number;
+        } | undefined;
     };
     events(): {
         clickRow: CustomEvent<any>;