docs(VDataTableVirtual): add example with itemRef slot prop (#22120)

Add example with itemRef slot prop when using VDataTableVirtual

Author: antonhansson0624

packages/docs/src/examples/v-data-table/virtual-custom.vue

@@ -0,0 +1,111 @@
+<template>
+  <v-app>
+    <v-container>
+      <v-chip-group v-model="selectedSize" class="mb-4" mandatory row>
+        <v-chip
+          v-for="size in sizes"
+          :key="size"
+          :value="size"
+          color="primary"
+          variant="outlined"
+        >
+          {{ size }} items
+        </v-chip>
+      </v-chip-group>
+
+      <v-data-table-virtual
+        :headers="headers"
+        :items="items"
+        height="400"
+        item-key="id"
+        fixed-header
+      >
+        <template v-slot:item="{ columns, internalItem, props, itemRef }">
+          <tr v-bind="props" :ref="itemRef">
+            <td v-for="column in columns" :key="column.key">
+              {{ internalItem.raw[column.key] }}
+            </td>
+          </tr>
+        </template>
+      </v-data-table-virtual>
+    </v-container>
+  </v-app>
+</template>
+
+<script setup>
+  import { computed, ref } from 'vue'
+
+  const sizes = [100, 400, 800]
+  const selectedSize = ref(100)
+
+  const headers = [
+    { title: 'ID', value: 'id', sortable: true },
+    { title: 'Title', value: 'title', sortable: true },
+    { title: 'Name', value: 'name', sortable: true },
+    { title: 'Email', value: 'email', sortable: true },
+    { title: 'Role', value: 'role', sortable: true },
+  ]
+
+  const baseItems = [
+    { title: 'Mr.', name: 'James Smith', email: '[email protected]', role: 'Owner' },
+    { title: 'Ms.', name: 'Mary Johnson', email: '[email protected]', role: 'Manager' },
+    { title: 'Dr.', name: 'Robert Williams', email: '[email protected]', role: 'Board Member' },
+    { title: 'Mrs.', name: 'Patricia Brown', email: '[email protected]', role: 'Developer' },
+    { title: 'Mr.', name: 'John Davis', email: '[email protected]', role: 'Designer' },
+    { title: 'Ms.', name: 'Jennifer Garcia', email: '[email protected]', role: 'Manager' },
+    { title: 'Mr.', name: 'Michael Miller', email: '[email protected]', role: 'Owner' },
+    { title: 'Mrs.', name: 'Linda Martinez', email: '[email protected]', role: 'Developer' },
+    { title: 'Dr.', name: 'William Rodriguez', email: '[email protected]', role: 'Board Member' },
+    { title: 'Ms.', name: 'Elizabeth Hernandez', email: '[email protected]', role: 'Designer' },
+    { title: 'Mr.', name: 'David Lopez', email: '[email protected]', role: 'Manager' },
+    { title: 'Mrs.', name: 'Barbara Gonzalez', email: '[email protected]', role: 'Owner' },
+  ]
+
+  const items = computed(() => {
+    return Array.from({ length: selectedSize.value }).map((_, i) => {
+      const base = baseItems[i % baseItems.length]
+      return { id: i + 1, ...base }
+    })
+  })
+</script>
+
+<script>
+  export default {
+    data () {
+      return {
+        sizes: [100, 400, 800],
+        selectedSize: 100,
+        headers: [
+          { title: 'ID', value: 'id', sortable: true },
+          { title: 'Title', value: 'title', sortable: true },
+          { title: 'Name', value: 'name', sortable: true },
+          { title: 'Email', value: 'email', sortable: true },
+          { title: 'Role', value: 'role', sortable: true },
+        ],
+        baseItems: [
+          { title: 'Mr.', name: 'James Smith', email: '[email protected]', role: 'Owner' },
+          { title: 'Ms.', name: 'Mary Johnson', email: '[email protected]', role: 'Manager' },
+          { title: 'Dr.', name: 'Robert Williams', email: '[email protected]', role: 'Board Member' },
+          { title: 'Mrs.', name: 'Patricia Brown', email: '[email protected]', role: 'Developer' },
+          { title: 'Mr.', name: 'John Davis', email: '[email protected]', role: 'Designer' },
+          { title: 'Ms.', name: 'Jennifer Garcia', email: '[email protected]', role: 'Manager' },
+          { title: 'Mr.', name: 'Michael Miller', email: '[email protected]', role: 'Owner' },
+          { title: 'Mrs.', name: 'Linda Martinez', email: '[email protected]', role: 'Developer' },
+          { title: 'Dr.', name: 'William Rodriguez', email: '[email protected]', role: 'Board Member' },
+          { title: 'Ms.', name: 'Elizabeth Hernandez', email: '[email protected]', role: 'Designer' },
+          { title: 'Mr.', name: 'David Lopez', email: '[email protected]', role: 'Manager' },
+          { title: 'Mrs.', name: 'Barbara Gonzalez', email: '[email protected]', role: 'Owner' },
+        ],
+      }
+    },
+
+    computed: {
+      items () {
+        return Array.from({ length: this.selectedSize }).map((_, i) => {
+          const base = this.baseItems[i % this.baseItems.length]
+          return { id: i + 1, ...base }
+        })
+      },
+    },
+  }
+</script>

packages/docs/src/pages/en/components/data-tables/virtual-tables.md

@@ -35,3 +35,7 @@ The v-data-table-virtual component relies on all data being available locally. B
 ### Basic example
 
 <ExamplesExample file="v-data-table/virtual" />
+
+When customizing rows with the `#item` slot, you must bind the provided `itemRef` to your `<tr>`. This ensures that the virtual scroller can correctly measure and recycle rows.
+
+<ExamplesExample file="v-data-table/virtual-custom" />