fix(VDataTableVirtual): show index from virtualized items

Author: J-Sek

packages/vuetify/src/components/VDataTable/VDataTableRows.tsx

@@ -142,7 +142,7 @@ export const VDataTableRows = genericComponent<new <T>(
             }
 
             const slotProps = {
-              index,
+              index: item._virtualIndex ?? index,
               item: item.raw,
               internalItem: item,
               columns: columns.value,

packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx

@@ -141,7 +141,14 @@ export const VDataTableVirtual = genericComponent<new <T extends readonly any[],
       calculateVisibleItems,
       scrollToIndex,
     } = useVirtual(props, flatItems)
-    const displayItems = computed(() => computedItems.value.map(item => item.raw))
+
+    const displayItems = computed(() =>
+      computedItems.value
+        .map(item => ({
+          ...item.raw,
+          _virtualIndex: item.index,
+        }))
+    )
 
     useOptions({
       sortBy,
@@ -248,7 +255,7 @@ export const VDataTableVirtual = genericComponent<new <T extends readonly any[],
                                     { ...itemSlotProps.props }
                                     ref={ itemRef }
                                     key={ itemSlotProps.internalItem.index }
-                                    index={ itemSlotProps.internalItem.index }
+                                    index={ itemSlotProps.index }
                                     v-slots={ slots }
                                   />
                                 )

packages/vuetify/src/components/VDataTable/types.ts

@@ -49,6 +49,7 @@ export type InternalDataTableHeader = Omit<DataTableHeader, 'key' | 'value' | 'c
 export interface DataTableItem<T = any> extends Omit<InternalItem<T>, 'type'>, GroupableItem<T>, SelectableItem {
   key: any
   index: number
+  _virtualIndex?: number
   columns: {
     [key: string]: any
   }