Merge branch 'main' into feat-vanilla-examples

KevinVandy · KevinVandy · commit 4be49288de45 · 2024-12-30T19:00:40.000-06:00
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/docs/guide/expanding.md b/docs/guide/expanding.md
@@ -49,10 +49,10 @@ type Person = {
   id: number
   name: string
   age: number
-  children: Person[]
+  children?: Person[] | undefined
 }
 
-const data: Person =  [
+const data: Person[] =  [
   { id: 1, 
   name: 'John', 
   age: 30, 
diff --git a/docs/guide/global-filtering.md b/docs/guide/global-filtering.md
@@ -106,7 +106,7 @@ const table = useReactTable({
   state: {
     globalFilter,
   },
-  onGlobalFilterChange: setGlobalFilte
+  onGlobalFilterChange: setGlobalFilter
 })
 ```
 
diff --git a/docs/guide/migrating.md b/docs/guide/migrating.md
@@ -73,7 +73,7 @@ Types are now included in the base package, so you can remove the `@types/react-
 ### Update column definitions
 
 - accessor was renamed to either `accessorKey` or `accessorFn` (depending on whether you are using a string or function)
-- width, minWidth, maxWidth where renamed to size, minSize, maxSize
+- width, minWidth, maxWidth were renamed to size, minSize, maxSize
 - Optionally, you can use the new `createColumnHelper` function around each column definition for better TypeScript hints. (You can still just use an array of column definitions if you prefer.)
   - The first parameter is the accessor function or accessor string.
   - The second parameter is an object of column options.
diff --git a/examples/react/filters-fuzzy/src/main.tsx b/examples/react/filters-fuzzy/src/main.tsx
@@ -84,10 +84,10 @@ function App() {
       {
         accessorKey: 'firstName',
         cell: info => info.getValue(),
-        filterFn: 'includesStringSensitive', //note: normal non-fuzzy filter column
+        filterFn: 'includesStringSensitive', //note: normal non-fuzzy filter column - case sensitive
       },
       {
-        accessorFn: row => row.lastName, //note: normal non-fuzzy filter column - case sensitive
+        accessorFn: row => row.lastName,
         id: 'lastName',
         cell: info => info.getValue(),
         header: () => <span>Last Name</span>,
diff --git a/examples/react/kitchen-sink/src/components/ActionButtons.tsx b/examples/react/kitchen-sink/src/components/ActionButtons.tsx
@@ -76,7 +76,7 @@ export function ActionButtons<T extends RowData>({
           <input
             type="number"
             min="1"
-            max={table.getPageCount()}
+            max={pageCount}
             defaultValue={pageIndex + 1}
             onChange={e => {
               const page = e.target.value ? Number(e.target.value) - 1 : 0
diff --git a/examples/react/virtualized-infinite-scrolling/src/main.tsx b/examples/react/virtualized-infinite-scrolling/src/main.tsx
@@ -184,7 +184,7 @@ function App() {
       ({flatData.length} of {totalDBRowCount} rows fetched)
       <div
         className="container"
-        onScroll={e => fetchMoreOnBottomReached(e.target as HTMLDivElement)}
+        onScroll={e => fetchMoreOnBottomReached(e.currentTarget)}
         ref={tableContainerRef}
         style={{
           overflow: 'auto', //our scrollable table container
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,24 @@
+{
+  "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": {
+    "@faker-js/faker": "^9",
+    "@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,230 @@
+<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
diff --git a/examples/vue/virtualized-rows/src/main.ts b/examples/vue/virtualized-rows/src/main.ts
diff --git a/examples/vue/virtualized-rows/src/makeData.ts b/examples/vue/virtualized-rows/src/makeData.ts
diff --git a/examples/vue/virtualized-rows/tsconfig.json b/examples/vue/virtualized-rows/tsconfig.json
diff --git a/examples/vue/virtualized-rows/vite.config.ts b/examples/vue/virtualized-rows/vite.config.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -728,6 +728,10 @@`
`728`	`728`	`{`
`729`	`729`	`"to": "framework/vue/examples/filters",`
`730`	`730`	`"label": "Column Filters"`
	`731`	`+ },`
	`732`	`+ {`
	`733`	`+ "to": "framework/vue/examples/virtualized-rows",`
	`734`	`+ "label": "Virtualized Rows"`
`731`	`735`	`}`
`732`	`736`	`]`
`733`	`737`	`},`
Original file line number	Diff line number	Diff line change
`@@ -84,10 +84,10 @@ function App() {`
`84`	`84`	`{`
`85`	`85`	`accessorKey: 'firstName',`
`86`	`86`	`cell: info => info.getValue(),`
`87`		`- filterFn: 'includesStringSensitive', //note: normal non-fuzzy filter column`
	`87`	`+ filterFn: 'includesStringSensitive', //note: normal non-fuzzy filter column - case sensitive`
`88`	`88`	`},`
`89`	`89`	`{`
`90`		`- accessorFn: row => row.lastName, //note: normal non-fuzzy filter column - case sensitive`
	`90`	`+ accessorFn: row => row.lastName,`
`91`	`91`	`id: 'lastName',`
`92`	`92`	`cell: info => info.getValue(),`
`93`	`93`	`header: () => <span>Last Name</span>,`