fix(VDataTableVirtual): show index from virtualized items (#22324)

fixes #19108

Author: J-Sek

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

@@ -143,7 +143,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,
@@ -249,7 +256,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
   }