fix(VDataTable): avoid lags when selecting rows in large tables (#22163)

reverts #21829
fixes #21767

Author: J-Sek

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

@@ -7,6 +7,7 @@ import { VCheckboxBtn } from '@/components/VCheckbox'
 import { useGroupBy } from './composables/group'
 import { useHeaders } from './composables/headers'
 import { useSelection } from './composables/select'
+import { makeDensityProps } from '@/composables/density'
 import { IconValue } from '@/composables/icons'
 
 // Utilities
@@ -35,6 +36,7 @@ export const makeVDataTableGroupHeaderRowProps = propsFactory({
     type: IconValue,
     default: '$tableGroupExpand',
   },
+  ...makeDensityProps(),
 }, 'VDataTableGroupHeaderRow')
 
 export const VDataTableGroupHeaderRow = genericComponent<VDataTableGroupHeaderRowSlots>()({
@@ -87,6 +89,7 @@ export const VDataTableGroupHeaderRow = genericComponent<VDataTableGroupHeaderRo
             return slots['data-table-select']?.({ props: { modelValue, indeterminate, 'onUpdate:modelValue': selectGroup } }) ?? (
               <VDataTableColumn class="v-data-table__td--select-row" noPadding>
                 <VCheckboxBtn
+                  density={ props.density }
                   modelValue={ modelValue }
                   indeterminate={ indeterminate }
                   onUpdate:modelValue={ selectGroup }

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

@@ -10,6 +10,7 @@ import { useHeaders } from './composables/headers'
 import { useSelection } from './composables/select'
 import { useSort } from './composables/sort'
 import { useBackgroundColor } from '@/composables/color'
+import { makeDensityProps } from '@/composables/density'
 import { makeDisplayProps, useDisplay } from '@/composables/display'
 import { IconValue } from '@/composables/icons'
 import { LoaderSlot, makeLoaderProps, useLoader } from '@/composables/loader'
@@ -77,6 +78,7 @@ export const makeVDataTableHeadersProps = propsFactory({
   /** @deprecated */
   sticky: Boolean,
 
+  ...makeDensityProps(),
   ...makeDisplayProps(),
   ...makeLoaderProps(),
 }, 'VDataTableHeaders')
@@ -202,6 +204,7 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
               if (column.key === 'data-table-select') {
                 return slots['header.data-table-select']?.(columnSlotProps) ?? (showSelectAll.value && (
                   <VCheckboxBtn
+                    density={ props.density }
                     modelValue={ allSelected.value }
                     indeterminate={ someSelected.value && !allSelected.value }
                     onUpdate:modelValue={ selectAll }

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

@@ -8,6 +8,7 @@ import { useExpanded } from './composables/expand'
 import { useHeaders } from './composables/headers'
 import { useSelection } from './composables/select'
 import { useSort } from './composables/sort'
+import { makeDensityProps } from '@/composables/density'
 import { makeDisplayProps, useDisplay } from '@/composables/display'
 import { IconValue } from '@/composables/icons'
 
@@ -52,6 +53,7 @@ export const makeVDataTableRowProps = propsFactory({
   onContextmenu: EventProp<[MouseEvent]>(),
   onDblclick: EventProp<[MouseEvent]>(),
 
+  ...makeDensityProps(),
   ...makeDisplayProps(),
 }, 'VDataTableRow')
 
@@ -168,6 +170,7 @@ export const VDataTableRow = genericComponent<new <T>(
                     }) ?? (
                       <VCheckboxBtn
                         disabled={ !item.selectable }
+                        density={ props.density }
                         modelValue={ isSelected([item]) }
                         onClick={ withModifiers(
                           (event: Event) => toggleSelect(item, props.index, event as PointerEvent),

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

@@ -49,8 +49,8 @@ export const makeVDataTableRowsProps = propsFactory({
   rowProps: [Object, Function] as PropType<RowProps<any>>,
   cellProps: [Object, Function] as PropType<CellProps<any>>,
 
-  ...pick(makeVDataTableRowProps(), ['collapseIcon', 'expandIcon']),
-  ...pick(makeVDataTableGroupHeaderRowProps(), ['groupCollapseIcon', 'groupExpandIcon']),
+  ...pick(makeVDataTableRowProps(), ['collapseIcon', 'expandIcon', 'density']),
+  ...pick(makeVDataTableGroupHeaderRowProps(), ['groupCollapseIcon', 'groupExpandIcon', 'density']),
   ...makeDisplayProps(),
 }, 'VDataTableRows')
 
@@ -75,7 +75,7 @@ export const VDataTableRows = genericComponent<new <T>(
     const { mobile } = useDisplay(props)
 
     useRender(() => {
-      const groupHeaderRowProps = pick(props, ['groupCollapseIcon', 'groupExpandIcon'])
+      const groupHeaderRowProps = pick(props, ['groupCollapseIcon', 'groupExpandIcon', 'density'])
 
       if (props.loading && (!props.items.length || slots.loading)) {
         return (
@@ -165,6 +165,7 @@ export const VDataTableRows = genericComponent<new <T>(
                   cellProps: props.cellProps,
                   collapseIcon: props.collapseIcon,
                   expandIcon: props.expandIcon,
+                  density: props.density,
                   mobile: mobile.value,
                 },
                 getPrefixedEventHandlers(attrs, ':row', () => slotProps),

packages/vuetify/src/components/VTable/VTable.tsx

@@ -12,7 +12,6 @@ import { convertToUnit, genericComponent, propsFactory, useRender } from '@/util
 
 // Types
 import type { PropType } from 'vue'
-import { VDefaultsProvider } from '../VDefaultsProvider'
 
 export type VTableSlots = {
   default: never
@@ -49,51 +48,42 @@ export const VTable = genericComponent<VTableSlots>()({
     const { themeClasses } = provideTheme(props)
     const { densityClasses } = useDensity(props)
 
-    useRender(() => {
-      const tableContentDefaults = {
-        VCheckboxBtn: {
-          density: props.density,
-        },
-      }
+    useRender(() => (
+      <props.tag
+        class={[
+          'v-table',
+          {
+            'v-table--fixed-height': !!props.height,
+            'v-table--fixed-header': props.fixedHeader,
+            'v-table--fixed-footer': props.fixedFooter,
+            'v-table--has-top': !!slots.top,
+            'v-table--has-bottom': !!slots.bottom,
+            'v-table--hover': props.hover,
+            'v-table--striped-even': props.striped === 'even',
+            'v-table--striped-odd': props.striped === 'odd',
+          },
+          themeClasses.value,
+          densityClasses.value,
+          props.class,
+        ]}
+        style={ props.style }
+      >
+        { slots.top?.() }
 
-      return (
-        <props.tag
-          class={[
-            'v-table',
-            {
-              'v-table--fixed-height': !!props.height,
-              'v-table--fixed-header': props.fixedHeader,
-              'v-table--fixed-footer': props.fixedFooter,
-              'v-table--has-top': !!slots.top,
-              'v-table--has-bottom': !!slots.bottom,
-              'v-table--hover': props.hover,
-              'v-table--striped-even': props.striped === 'even',
-              'v-table--striped-odd': props.striped === 'odd',
-            },
-            themeClasses.value,
-            densityClasses.value,
-            props.class,
-          ]}
-          style={ props.style }
-        >
-          { slots.top?.() }
-          <VDefaultsProvider defaults={ tableContentDefaults }>
-            { slots.default ? (
-              <div
-                class="v-table__wrapper"
-                style={{ height: convertToUnit(props.height) }}
-              >
-                <table>
-                  { slots.default() }
-                </table>
-              </div>
-            ) : slots.wrapper?.()}
-          </VDefaultsProvider>
+        { slots.default ? (
+          <div
+            class="v-table__wrapper"
+            style={{ height: convertToUnit(props.height) }}
+          >
+            <table>
+              { slots.default() }
+            </table>
+          </div>
+        ) : slots.wrapper?.()}
 
-          { slots.bottom?.() }
-        </props.tag>
-      )
-    })
+        { slots.bottom?.() }
+      </props.tag>
+    ))
 
     return {}
   },