feat(VDataTable): support shift click for multiple selection

resolves #20055

Author: johnleider

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

@@ -143,7 +143,7 @@ export const VDataTableRow = genericComponent<new <T>(
                       <VCheckboxBtn
                         disabled={ !item.selectable }
                         modelValue={ isSelected([item]) }
-                        onClick={ withModifiers(() => toggleSelect(item), ['stop']) }
+                        onClick={ withModifiers(event => toggleSelect(item, props.index, event as MouseEvent), ['stop']) }
                       />
                     )
                   }

packages/vuetify/src/components/VDataTable/composables/select.ts

@@ -2,7 +2,7 @@
 import { useProxiedModel } from '@/composables/proxiedModel'
 
 // Utilities
-import { computed, inject, provide } from 'vue'
+import { computed, inject, provide, ref, shallowRef } from 'vue'
 import { deepEqual, propsFactory, wrapInArray } from '@/util'
 
 // Types
@@ -122,6 +122,8 @@ export function provideSelection (
     }
   })
 
+  const lastSelectedIndex = shallowRef<number | null>(null)
+
   function isSelected (items: SelectableItem | SelectableItem[]) {
     return wrapInArray(items).every(item => selected.value.has(item.value))
   }
@@ -140,8 +142,20 @@ export function provideSelection (
     selected.value = newSelected
   }
 
-  function toggleSelect (item: SelectableItem) {
-    select([item], !isSelected([item]))
+  function toggleSelect (item: SelectableItem, index?: number, event?: MouseEvent) {
+    const items = []
+    index = index ?? allItems.value.findIndex(i => i.value === item.value)
+
+    if (props.selectStrategy !== 'single' && event?.shiftKey && lastSelectedIndex.value !== null) {
+      const [start, end] = [lastSelectedIndex.value, index].sort((a, b) => a - b)
+
+      items.push(...allItems.value.slice(start, end + 1))
+    } else {
+      items.push(item)
+      lastSelectedIndex.value = index
+    }
+
+    select(items, !isSelected([item]))
   }
 
   function selectAll (value: boolean) {
@@ -174,6 +188,8 @@ export function provideSelection (
     someSelected,
     allSelected,
     showSelectAll,
+    lastSelectedIndex,
+    selectStrategy,
   }
 
   provide(VDataTableSelectionSymbol, data)