|
| 1 | +<script setup lang="ts"> |
| 2 | +import './index.css' |
| 3 | +import { computed, ref, h } from 'vue' |
| 4 | +import { |
| 5 | + type ColumnDef, |
| 6 | + FlexRender, |
| 7 | + useVueTable, |
| 8 | + getCoreRowModel, |
| 9 | + getSortedRowModel, |
| 10 | +} from '@tanstack/vue-table' |
| 11 | +import { useVirtualizer } from '@tanstack/vue-virtual' |
| 12 | +
|
| 13 | +import { makeData, type Person } from './makeData' |
| 14 | +
|
| 15 | +const search = ref('') |
| 16 | +
|
| 17 | +const data = ref<Person[]>(makeData(50_000)) |
| 18 | +
|
| 19 | +const filteredData = computed<Person[]>(() => { |
| 20 | + const searchValue = search.value.toLowerCase(); |
| 21 | +
|
| 22 | + // If no search value is present, return all data |
| 23 | + if (!searchValue) return data.value; |
| 24 | +
|
| 25 | + return data.value.filter(row => { |
| 26 | + return Object.values(row).some(value => { |
| 27 | + if (value instanceof Date) { |
| 28 | + return value.toLocaleString().toLowerCase().includes(searchValue); |
| 29 | + } |
| 30 | + // Stringify the value and check if it contains the search term |
| 31 | + return `${value}`.toLowerCase().includes(searchValue); |
| 32 | + }); |
| 33 | + }); |
| 34 | +}); |
| 35 | +
|
| 36 | +let searchTimeout: NodeJS.Timeout |
| 37 | +function handleDebounceSearch(ev: Event) { |
| 38 | + if (searchTimeout) { clearTimeout(searchTimeout) } |
| 39 | +
|
| 40 | + searchTimeout = setTimeout(() => { |
| 41 | + search.value = (ev?.target as HTMLInputElement)?.value ?? '' |
| 42 | + }, 300) |
| 43 | +} |
| 44 | +
|
| 45 | +const columns = computed<ColumnDef<Person>[]>(() => [ |
| 46 | + { |
| 47 | + accessorKey: 'id', |
| 48 | + header: 'ID', |
| 49 | + }, |
| 50 | + { |
| 51 | + accessorKey: 'firstName', |
| 52 | + cell: info => info.getValue(), |
| 53 | + }, |
| 54 | + { |
| 55 | + accessorFn: row => row.lastName, |
| 56 | + id: 'lastName', |
| 57 | + cell: info => info.getValue(), |
| 58 | + header: () => h('span', 'Last Name'), |
| 59 | + }, |
| 60 | + { |
| 61 | + accessorKey: 'age', |
| 62 | + header: () => 'Age', |
| 63 | + }, |
| 64 | + { |
| 65 | + accessorKey: 'visits', |
| 66 | + header: () => h('span', 'Visits'), |
| 67 | + }, |
| 68 | + { |
| 69 | + accessorKey: 'status', |
| 70 | + header: 'Status', |
| 71 | + }, |
| 72 | + { |
| 73 | + accessorKey: 'progress', |
| 74 | + header: 'Profile Progress', |
| 75 | + }, |
| 76 | + { |
| 77 | + accessorKey: 'createdAt', |
| 78 | + header: 'Created At', |
| 79 | + cell: info => info.getValue<Date>().toLocaleString(), |
| 80 | + }, |
| 81 | +]) |
| 82 | +
|
| 83 | +
|
| 84 | +const table = useVueTable({ |
| 85 | + get data() { |
| 86 | + return filteredData.value |
| 87 | + }, |
| 88 | + columns: columns.value, |
| 89 | + getCoreRowModel: getCoreRowModel(), |
| 90 | + getSortedRowModel: getSortedRowModel(), |
| 91 | + debugTable: false, |
| 92 | +}) |
| 93 | +
|
| 94 | +
|
| 95 | +const rows = computed(() => table.getRowModel().rows) |
| 96 | +
|
| 97 | +//The virtualizer needs to know the scrollable container element |
| 98 | +const tableContainerRef = ref<HTMLDivElement | null>(null) |
| 99 | +
|
| 100 | +
|
| 101 | +const rowVirtualizerOptions = computed(() => { |
| 102 | + return { |
| 103 | + count: rows.value.length, |
| 104 | + estimateSize: () => 33, //estimate row height for accurate scrollbar dragging |
| 105 | + getScrollElement: () => tableContainerRef.value, |
| 106 | + overscan: 5, |
| 107 | + } |
| 108 | +}) |
| 109 | +
|
| 110 | +const rowVirtualizer = useVirtualizer(rowVirtualizerOptions) |
| 111 | +
|
| 112 | +const virtualRows = computed(() => rowVirtualizer.value.getVirtualItems()) |
| 113 | +const totalSize = computed(() => rowVirtualizer.value.getTotalSize()) |
| 114 | +
|
| 115 | +function measureElement(el?: Element) { |
| 116 | + if (!el) { |
| 117 | + return |
| 118 | + } |
| 119 | +
|
| 120 | + rowVirtualizer.value.measureElement(el) |
| 121 | +
|
| 122 | + return undefined |
| 123 | +} |
| 124 | +</script> |
| 125 | + |
| 126 | + |
| 127 | +<template> |
| 128 | + |
| 129 | + <div> |
| 130 | + <p class="text-center"> |
| 131 | + For tables, the basis for the offset of the translate css function is from |
| 132 | + the row's initial position itself. Because of this, we need to calculate |
| 133 | + the translateY pixel count different and base it off the the index. |
| 134 | + </p> |
| 135 | + <h1 class="text-3xl font-bold text-center">Virtualized Rows</h1> |
| 136 | + <div style="margin: 0 auto; width: min-content;"> |
| 137 | + <input |
| 138 | + :modelValue="search" |
| 139 | + @input="handleDebounceSearch" |
| 140 | + placeholder="Search" |
| 141 | + class="p-2" |
| 142 | + /> |
| 143 | + {{ rows.length.toLocaleString() }} results |
| 144 | + </div> |
| 145 | + </div> |
| 146 | + <div |
| 147 | + class="container" |
| 148 | + ref="tableContainerRef" |
| 149 | + :style="{ |
| 150 | + overflow: 'auto', //our scrollable table container |
| 151 | + position: 'relative', //needed for sticky header |
| 152 | + height: '800px', //should be a fixed height |
| 153 | + }" |
| 154 | + > |
| 155 | + |
| 156 | + <div :style="{ height: `${totalSize}px` }"> |
| 157 | + <!-- Even though we're still using sematic table tags, we must use CSS grid and flexbox for dynamic row heights --> |
| 158 | + <table :style="{ display: 'grid' }"> |
| 159 | + <thead :style="{ |
| 160 | + display: 'grid', |
| 161 | + position: 'sticky', |
| 162 | + top: 0, |
| 163 | + zIndex: 1, |
| 164 | + }"> |
| 165 | + <tr |
| 166 | + v-for="headerGroup in table.getHeaderGroups()" |
| 167 | + :key="headerGroup.id" |
| 168 | + :style="{ display: 'flex', width: '100%' }" |
| 169 | + > |
| 170 | + <th |
| 171 | + v-for="header in headerGroup.headers" |
| 172 | + :key="header.id" |
| 173 | + :colspan="header.colSpan" |
| 174 | + :style="{ width: `${header.getSize()}px` }" |
| 175 | + > |
| 176 | + <div |
| 177 | + v-if="!header.isPlaceholder" |
| 178 | + :class="{ 'cursor-pointer select-none': header.column.getCanSort() }" |
| 179 | + @click="e => header.column.getToggleSortingHandler()?.(e)" |
| 180 | + > |
| 181 | + <FlexRender |
| 182 | + :render="header.column.columnDef.header" |
| 183 | + :props="header.getContext()" |
| 184 | + /> |
| 185 | + <span v-if="header.column.getIsSorted() === 'asc'"> 🔼</span> |
| 186 | + <span v-if="header.column.getIsSorted() === 'desc'"> 🔽</span> |
| 187 | + </div> |
| 188 | + </th> |
| 189 | + </tr> |
| 190 | + </thead> |
| 191 | + <tbody :style="{ |
| 192 | + display: 'grid', |
| 193 | + height: `${totalSize}px`, //tells scrollbar how big the table is |
| 194 | + position: 'relative', //needed for absolute positioning of rows |
| 195 | + }"> |
| 196 | + <tr |
| 197 | + v-for="vRow in virtualRows" |
| 198 | + :data-index="vRow.index /* needed for dynamic row height measurement*/" |
| 199 | + :ref="measureElement /*measure dynamic row height*/" |
| 200 | + :key="rows[vRow.index].id" |
| 201 | + :style="{ |
| 202 | + display: 'flex', |
| 203 | + position: 'absolute', |
| 204 | + transform: `translateY(${vRow.start}px)`, //this should always be a `style` as it changes on scroll |
| 205 | + width: '100%', |
| 206 | + }" |
| 207 | + > |
| 208 | + <td |
| 209 | + v-for="cell in rows[vRow.index].getVisibleCells()" |
| 210 | + :key="cell.id" |
| 211 | + :style="{ |
| 212 | + display: 'flex', |
| 213 | + width: `${cell.column.getSize()}px` |
| 214 | + }" |
| 215 | + > |
| 216 | + <FlexRender |
| 217 | + :render="cell.column.columnDef.cell" |
| 218 | + :props="cell.getContext()" |
| 219 | + /> |
| 220 | + </td> |
| 221 | + </tr> |
| 222 | + </tbody> |
| 223 | + </table> |
| 224 | + </div> |
| 225 | + </div> |
| 226 | +</template> |
0 commit comments