docs: Add example for vue virtualized-rows (#5772)

TanStack · Dec 30, 2024 · 4aecd84 · 4aecd84
1 parent 6625ec6
commit 4aecd84
Show file tree

Hide file tree

Showing 15 changed files with 1,196 additions and 107 deletions.
diff --git a/docs/config.json b/docs/config.json
@@ -728,6 +728,10 @@
             {
               "to": "framework/vue/examples/filters",
               "label": "Column Filters"
+            },
+            {
+              "to": "framework/vue/examples/virtualized-rows",
+              "label": "Virtualized Rows"
             }
           ]
         }

diff --git a/examples/vue/virtualized-rows/.gitignore b/examples/vue/virtualized-rows/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/vue/virtualized-rows/README.md b/examples/vue/virtualized-rows/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm run dev` or `yarn dev`
diff --git a/examples/vue/virtualized-rows/env.d.ts b/examples/vue/virtualized-rows/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/vue/virtualized-rows/index.html b/examples/vue/virtualized-rows/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/vue/virtualized-rows/package.json b/examples/vue/virtualized-rows/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "tanstack-table-example-vue-virtualized-rows",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test:types": "vue-tsc"
+  },
+  "dependencies": {
+    "@tanstack/vue-table": "^8.20.5",
+    "@tanstack/vue-virtual": "^3.10.8",
+    "vue": "^3.5.11"
+  },
+  "devDependencies": {
+    "@types/node": "^20.14.9",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "typescript": "5.6.2",
+    "vite": "^5.4.8",
+    "vue-tsc": "^2.1.6"
+  }
+}
diff --git a/examples/vue/virtualized-rows/public/favicon.ico b/examples/vue/virtualized-rows/public/favicon.ico
diff --git a/examples/vue/virtualized-rows/src/App.vue b/examples/vue/virtualized-rows/src/App.vue
@@ -0,0 +1,226 @@
+<script setup lang="ts">
+import './index.css'
+import { computed, ref, h } from 'vue'
+import {
+	type ColumnDef,
+	FlexRender,
+	useVueTable,
+	getCoreRowModel,
+	getSortedRowModel,
+} from '@tanstack/vue-table'
+import { useVirtualizer } from '@tanstack/vue-virtual'
+
+import { makeData, type Person } from './makeData'
+
+const search = ref('')
+
+const data = ref<Person[]>(makeData(50_000))
+
+const filteredData = computed<Person[]>(() => {
+	const searchValue = search.value.toLowerCase();
+
+	// If no search value is present, return all data
+	if (!searchValue) return data.value;
+
+	return data.value.filter(row => {
+		return Object.values(row).some(value => {
+			if (value instanceof Date) {
+				return value.toLocaleString().toLowerCase().includes(searchValue);
+			}
+			// Stringify the value and check if it contains the search term
+			return `${value}`.toLowerCase().includes(searchValue);
+		});
+	});
+});
+
+let searchTimeout: NodeJS.Timeout
+function handleDebounceSearch(ev: Event) {
+	if (searchTimeout) { clearTimeout(searchTimeout) }
+
+	searchTimeout = setTimeout(() => {
+		search.value = (ev?.target as HTMLInputElement)?.value ?? ''
+	}, 300)
+}
+
+const columns = computed<ColumnDef<Person>[]>(() => [
+	{
+		accessorKey: 'id',
+		header: 'ID',
+	},
+	{
+		accessorKey: 'firstName',
+		cell: info => info.getValue(),
+	},
+	{
+		accessorFn: row => row.lastName,
+		id: 'lastName',
+		cell: info => info.getValue(),
+		header: () => h('span', 'Last Name'),
+	},
+	{
+		accessorKey: 'age',
+		header: () => 'Age',
+	},
+	{
+		accessorKey: 'visits',
+		header: () => h('span', 'Visits'),
+	},
+	{
+		accessorKey: 'status',
+		header: 'Status',
+	},
+	{
+		accessorKey: 'progress',
+		header: 'Profile Progress',
+	},
+	{
+		accessorKey: 'createdAt',
+		header: 'Created At',
+		cell: info => info.getValue<Date>().toLocaleString(),
+	},
+])
+
+
+const table = useVueTable({
+	get data() {
+		return filteredData.value
+	},
+	columns: columns.value,
+	getCoreRowModel: getCoreRowModel(),
+	getSortedRowModel: getSortedRowModel(),
+	debugTable: false,
+})
+
+
+const rows = computed(() => table.getRowModel().rows)
+
+//The virtualizer needs to know the scrollable container element
+const tableContainerRef = ref<HTMLDivElement | null>(null)
+
+
+const rowVirtualizerOptions = computed(() => {
+	return {
+		count: rows.value.length,
+		estimateSize: () => 33, //estimate row height for accurate scrollbar dragging
+		getScrollElement: () => tableContainerRef.value,
+		overscan: 5,
+	}
+})
+
+const rowVirtualizer = useVirtualizer(rowVirtualizerOptions)
+
+const virtualRows = computed(() => rowVirtualizer.value.getVirtualItems())
+const totalSize = computed(() => rowVirtualizer.value.getTotalSize())
+
+function measureElement(el?: Element) {
+	if (!el) {
+		return
+	}
+
+	rowVirtualizer.value.measureElement(el)
+
+	return undefined
+}
+</script>
+
+
+<template>
+
+	<div>
+		<p class="text-center">
+			For tables, the basis for the offset of the translate css function is from
+			the row's initial position itself. Because of this, we need to calculate
+			the translateY pixel count different and base it off the the index.
+		</p>
+		<h1 class="text-3xl font-bold text-center">Virtualized Rows</h1>
+		<div style="margin: 0 auto; width: min-content;">
+			<input
+				:modelValue="search"
+				@input="handleDebounceSearch"
+				placeholder="Search"
+				class="p-2"
+			/>
+			{{ rows.length.toLocaleString() }} results
+		</div>
+	</div>
+	<div
+		class="container"
+		ref="tableContainerRef"
+		:style="{
+			overflow: 'auto', //our scrollable table container
+			position: 'relative', //needed for sticky header
+			height: '800px', //should be a fixed height
+		}"
+	>
+
+		<div :style="{ height: `${totalSize}px` }">
+			<!-- Even though we're still using sematic table tags, we must use CSS grid and flexbox for dynamic row heights -->
+			<table :style="{ display: 'grid' }">
+				<thead :style="{
+					display: 'grid',
+					position: 'sticky',
+					top: 0,
+					zIndex: 1,
+				}">
+					<tr
+						v-for="headerGroup in table.getHeaderGroups()"
+						:key="headerGroup.id"
+						:style="{ display: 'flex', width: '100%' }"
+					>
+						<th
+							v-for="header in headerGroup.headers"
+							:key="header.id"
+							:colspan="header.colSpan"
+							:style="{ width: `${header.getSize()}px` }"
+						>
+							<div
+								v-if="!header.isPlaceholder"
+								:class="{ 'cursor-pointer select-none': header.column.getCanSort() }"
+								@click="e => header.column.getToggleSortingHandler()?.(e)"
+							>
+								<FlexRender
+									:render="header.column.columnDef.header"
+									:props="header.getContext()"
+								/>
+								<span v-if="header.column.getIsSorted() === 'asc'"> 🔼</span>
+								<span v-if="header.column.getIsSorted() === 'desc'"> 🔽</span>
+							</div>
+						</th>
+					</tr>
+				</thead>
+				<tbody :style="{
+					display: 'grid',
+					height: `${totalSize}px`, //tells scrollbar how big the table is
+					position: 'relative', //needed for absolute positioning of rows
+				}">
+					<tr
+						v-for="vRow in virtualRows"
+						:data-index="vRow.index /* needed for dynamic row height measurement*/"
+						:ref="measureElement /*measure dynamic row height*/"
+						:key="rows[vRow.index].id"
+						:style="{
+							display: 'flex',
+							position: 'absolute',
+							transform: `translateY(${vRow.start}px)`, //this should always be a `style` as it changes on scroll
+							width: '100%',
+						}"
+					>
+						<td
+							v-for="cell in rows[vRow.index].getVisibleCells()"
+							:key="cell.id"
+							:style="{
+								display: 'flex',
+								width: `${cell.column.getSize()}px`
+							}"
+						>
+							<FlexRender
+								:render="cell.column.columnDef.cell"
+								:props="cell.getContext()"
+							/>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
+</template>
diff --git a/examples/vue/virtualized-rows/src/env.d.ts b/examples/vue/virtualized-rows/src/env.d.ts
@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/examples/vue/virtualized-rows/src/index.css b/examples/vue/virtualized-rows/src/index.css
@@ -0,0 +1,50 @@
+html {
+  font-family: sans-serif;
+  font-size: 14px;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  font-family: arial, sans-serif;
+  table-layout: fixed;
+}
+
+thead {
+  background: lightgray;
+}
+
+tr {
+  border-bottom: 1px solid lightgray;
+}
+
+th {
+  border-bottom: 1px solid lightgray;
+  border-right: 1px solid lightgray;
+  padding: 2px 4px;
+  text-align: left;
+}
+
+td {
+  padding: 6px;
+}
+
+.container {
+  border: 1px solid lightgray;
+  margin: 1rem auto;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.select-none {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.text-left {
+  text-align: left;
+}
diff --git a/examples/vue/virtualized-rows/src/main.ts b/examples/vue/virtualized-rows/src/main.ts
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')