From 3da827f29fed52e60568774e33318797adaeeba7 Mon Sep 17 00:00:00 2001
From: nekosaur <albert@kaaman.nu>
Date: Thu, 18 May 2023 14:59:28 +0200
Subject: [PATCH] fix(VDataTable): expose slot props

---
 .../v-data-table/headers-multiple.vue         | 121 ++++++++++++++++
 .../v-data-table/misc-external-paginate.vue   |  11 +-
 .../src/examples/v-data-table/prop-dense.vue  |   2 +-
 .../examples/v-data-table/prop-grouping.vue   |   8 +-
 .../examples/v-data-table/slot-headers.vue    |   7 +-
 .../examples/v-data-table/slot-item-key.vue   |   4 +-
 .../v-data-table/slot-simple-checkbox.vue     |   2 +-
 .../en/components/data-tables/grouping.md     |   4 -
 .../en/components/data-tables/headers.md      |  15 +-
 .../components/data-tables/virtual-tables.md  |   6 +-
 .../src/labs/VDataTable/VDataTable.tsx        | 116 +++++++++++-----
 .../src/labs/VDataTable/VDataTableHeaders.tsx |  84 ++++++-----
 .../src/labs/VDataTable/VDataTableRows.tsx    |   1 -
 .../src/labs/VDataTable/VDataTableServer.tsx  |  57 +++++---
 .../src/labs/VDataTable/VDataTableVirtual.tsx |  45 ++++--
 .../__tests__/VDataTable.spec.cy.tsx          | 131 +++++++++++++++++-
 .../labs/VDataTable/composables/headers.ts    |   5 +-
 .../src/labs/VDataTable/composables/items.ts  |  19 +--
 .../src/labs/VDataTable/composables/sort.ts   |  19 ++-
 packages/vuetify/src/labs/VDataTable/types.ts |   2 +-
 20 files changed, 510 insertions(+), 149 deletions(-)
 create mode 100644 packages/docs/src/examples/v-data-table/headers-multiple.vue

diff --git a/packages/docs/src/examples/v-data-table/headers-multiple.vue b/packages/docs/src/examples/v-data-table/headers-multiple.vue
new file mode 100644
index 00000000000..17ff292983f
--- /dev/null
+++ b/packages/docs/src/examples/v-data-table/headers-multiple.vue
@@ -0,0 +1,121 @@
+<template>
+  <v-data-table
+    :headers="headers"
+    :items="desserts"
+    class="elevation-1"
+    item-key="name"
+    items-per-page="5"
+  ></v-data-table>
+</template>
+
+<script>
+  export default {
+    data: () => ({
+      desserts: [
+        {
+          name: 'Frozen Yogurt',
+          calories: 159,
+          fat: 6.0,
+          carbs: 24,
+          protein: 4.0,
+          iron: 1,
+        },
+        {
+          name: 'Ice cream sandwich',
+          calories: 237,
+          fat: 9.0,
+          carbs: 37,
+          protein: 4.3,
+          iron: 1,
+        },
+        {
+          name: 'Eclair',
+          calories: 262,
+          fat: 16.0,
+          carbs: 23,
+          protein: 6.0,
+          iron: 7,
+        },
+        {
+          name: 'Cupcake',
+          calories: 305,
+          fat: 3.7,
+          carbs: 67,
+          protein: 4.3,
+          iron: 8,
+        },
+        {
+          name: 'Gingerbread',
+          calories: 356,
+          fat: 16.0,
+          carbs: 49,
+          protein: 3.9,
+          iron: 16,
+        },
+        {
+          name: 'Jelly bean',
+          calories: 375,
+          fat: 0.0,
+          carbs: 94,
+          protein: 0.0,
+          iron: 0,
+        },
+        {
+          name: 'Lollipop',
+          calories: 392,
+          fat: 0.2,
+          carbs: 98,
+          protein: 0,
+          iron: 2,
+        },
+        {
+          name: 'Honeycomb',
+          calories: 408,
+          fat: 3.2,
+          carbs: 87,
+          protein: 6.5,
+          iron: 45,
+        },
+        {
+          name: 'Donut',
+          calories: 452,
+          fat: 25.0,
+          carbs: 51,
+          protein: 4.9,
+          iron: 22,
+        },
+        {
+          name: 'KitKat',
+          calories: 518,
+          fat: 26.0,
+          carbs: 65,
+          protein: 7,
+          iron: 6,
+        },
+      ],
+      headers: [
+        [
+          {
+            title: 'Dessert (100g serving)',
+            align: 'start',
+            sortable: false,
+            key: 'name',
+            rowspan: 2,
+          },
+          {
+            title: 'Properties',
+            key: 'foo',
+            colspan: 5,
+          },
+        ],
+        [
+          { title: 'Calories', align: 'end', key: 'calories' },
+          { title: 'Fat (g)', align: 'end', key: 'fat' },
+          { title: 'Carbs (g)', align: 'end', key: 'carbs' },
+          { title: 'Protein (g)', align: 'end', key: 'protein' },
+          { title: 'Iron (%)', align: 'end', key: 'iron' },
+        ],
+      ],
+    }),
+  }
+</script>
diff --git a/packages/docs/src/examples/v-data-table/misc-external-paginate.vue b/packages/docs/src/examples/v-data-table/misc-external-paginate.vue
index cd6f99170e5..1349711f2cc 100644
--- a/packages/docs/src/examples/v-data-table/misc-external-paginate.vue
+++ b/packages/docs/src/examples/v-data-table/misc-external-paginate.vue
@@ -6,13 +6,12 @@
     :items-per-page="itemsPerPage"
     hide-default-footer
     class="elevation-1"
-    @update:options="options = $event"
   >
     <template v-slot:bottom>
       <div class="text-center pt-2">
         <v-pagination
           v-model="page"
-          :length="options.pageCount"
+          :length="pageCount"
         ></v-pagination>
         <v-text-field
           :model-value="itemsPerPage"
@@ -33,9 +32,6 @@
   export default {
     data () {
       return {
-        options: {
-          pageCount: 1,
-        },
         page: 1,
         itemsPerPage: 5,
         headers: [
@@ -135,5 +131,10 @@
         ],
       }
     },
+    computed: {
+      pageCount () {
+        return Math.ceil(this.desserts.length / this.itemsPerPage)
+      },
+    },
   }
 </script>
diff --git a/packages/docs/src/examples/v-data-table/prop-dense.vue b/packages/docs/src/examples/v-data-table/prop-dense.vue
index 7f2ba643027..816f45646cd 100644
--- a/packages/docs/src/examples/v-data-table/prop-dense.vue
+++ b/packages/docs/src/examples/v-data-table/prop-dense.vue
@@ -98,7 +98,7 @@
           title: 'Dessert (100g serving)',
           align: 'start',
           sortable: false,
-          value: 'name',
+          key: 'name',
         },
         { title: 'Calories', align: 'end', key: 'calories' },
         { title: 'Fat (g)', align: 'end', key: 'fat' },
diff --git a/packages/docs/src/examples/v-data-table/prop-grouping.vue b/packages/docs/src/examples/v-data-table/prop-grouping.vue
index 0bc240bf3e4..a95fac27d50 100644
--- a/packages/docs/src/examples/v-data-table/prop-grouping.vue
+++ b/packages/docs/src/examples/v-data-table/prop-grouping.vue
@@ -8,7 +8,6 @@
     item-value="name"
   ></v-data-table>
 </template>
-
 <script>
   export default {
     data: () => ({
@@ -18,11 +17,11 @@
         {
           title: 'Dessert (100g serving)',
           align: 'start',
-          value: 'name',
+          key: 'name',
           groupable: false,
         },
-        { title: 'Category', value: 'category', align: 'end' },
-        { title: 'Dairy', value: 'dairy', align: 'end' },
+        { title: 'Category', key: 'category', align: 'end' },
+        { title: 'Dairy', key: 'dairy', align: 'end' },
       ],
       desserts: [
         {
@@ -73,6 +72,7 @@
         {
           name: 'KitKat',
           category: 'Candy',
+          dairy: 'Yes',
         },
       ],
     }),
diff --git a/packages/docs/src/examples/v-data-table/slot-headers.vue b/packages/docs/src/examples/v-data-table/slot-headers.vue
index a68221588a7..9698b026585 100644
--- a/packages/docs/src/examples/v-data-table/slot-headers.vue
+++ b/packages/docs/src/examples/v-data-table/slot-headers.vue
@@ -5,11 +5,14 @@
     item-value="name"
     class="elevation-1"
   >
-    <template v-slot:headers="{ columns }">
+    <template v-slot:headers="{ columns, isSorted, getSortIcon, toggleSort }">
       <tr>
         <template v-for="column in columns" :key="column.key">
           <td>
-            <span class="mr-2">{{ column.title }}</span>
+            <span class="mr-2 cursor-pointer" @click="() => toggleSort(column)">{{ column.title }}</span>
+            <template v-if="isSorted(column)">
+              <v-icon :icon="getSortIcon(column)"></v-icon>
+            </template>
             <v-icon v-if="column.removable" icon="$close" @click="() => remove(column.key)"></v-icon>
           </td>
         </template>
diff --git a/packages/docs/src/examples/v-data-table/slot-item-key.vue b/packages/docs/src/examples/v-data-table/slot-item-key.vue
index 07c8c32239d..f96018f7b49 100644
--- a/packages/docs/src/examples/v-data-table/slot-item-key.vue
+++ b/packages/docs/src/examples/v-data-table/slot-item-key.vue
@@ -5,8 +5,8 @@
     class="elevation-1"
   >
     <template v-slot:item.calories="{ item }">
-      <v-chip :color="getColor(item.raw.calories)">
-        {{ item.raw.calories }}
+      <v-chip :color="getColor(item.columns.calories)">
+        {{ item.columns.calories }}
       </v-chip>
     </template>
   </v-data-table>
diff --git a/packages/docs/src/examples/v-data-table/slot-simple-checkbox.vue b/packages/docs/src/examples/v-data-table/slot-simple-checkbox.vue
index fc59bfb6fa5..99ca073f02c 100644
--- a/packages/docs/src/examples/v-data-table/slot-simple-checkbox.vue
+++ b/packages/docs/src/examples/v-data-table/slot-simple-checkbox.vue
@@ -6,7 +6,7 @@
   >
     <template v-slot:item.glutenfree="{ item }">
       <v-checkbox-btn
-        v-model="item.value.glutenfree"
+        v-model="item.columns.glutenfree"
         disabled
       ></v-checkbox-btn>
     </template>
diff --git a/packages/docs/src/pages/en/components/data-tables/grouping.md b/packages/docs/src/pages/en/components/data-tables/grouping.md
index aa6ac763da7..1c64788730d 100644
--- a/packages/docs/src/pages/en/components/data-tables/grouping.md
+++ b/packages/docs/src/pages/en/components/data-tables/grouping.md
@@ -15,10 +15,6 @@ Data table has basic support for grouping rows by a column value.
 
 <entry />
 
-<v-alert type="info">
-  v-data-table-server does not currently support grouping rows
-</v-alert>
-
 ## Examples
 
 ### Group by
diff --git a/packages/docs/src/pages/en/components/data-tables/headers.md b/packages/docs/src/pages/en/components/data-tables/headers.md
index 71524d7e9e7..d0644c05885 100644
--- a/packages/docs/src/pages/en/components/data-tables/headers.md
+++ b/packages/docs/src/pages/en/components/data-tables/headers.md
@@ -16,10 +16,13 @@ Headers are used to define the columns of the table.
 
 <entry />
 
-## TODO:
+## Headers and columns
 
-- Headers is the entire section above body (but below top), possibly multiple rows
-- Columns are addressable (has key) and show data and/or other rendered content. Is always a 1-dimensional array.
+In all of the data-table components, we differentiate between **headers** and **columns**. When you use a data-table component, you provide it with **headers**, which is either a 1- or 2-dimensional array of items describing one or more rows of headers in the table. The **columns** of a data-table component are a subset of the headers, but is always a 1-dimensional array, and consists of those items that are part of the last row.
+
+Here is a data-table that uses multiple rows of headers to make use of the colspan and rowspan features. The **Properties** cell is not part of the **columns** array, because it is not a part of the last row, while the **Dessert (100g serving)** cell is, because it used **rowspan** to span both rows.
+
+<example file="v-data-table/headers-multiple" />
 
 ## Examples
 
@@ -27,6 +30,12 @@ Headers are used to define the columns of the table.
 
 You can use the dynamic slots `column.<key>` to customize only certain columns. `<key>` corresponds to the **key** property in the items found in the **headers** prop.
 
+<alert type="info">
+
+  There are two built-in slots for customizing both the select (`column.data-table-select`) and expand (`column.data-table-expand`) columns when using **show-select** and **show-expand** props respectively.
+
+</alert>
+
 <example file="v-data-table/slot-header" />
 
 ### Headers slot
diff --git a/packages/docs/src/pages/en/components/data-tables/virtual-tables.md b/packages/docs/src/pages/en/components/data-tables/virtual-tables.md
index f561bc2bd5e..b716af91821 100644
--- a/packages/docs/src/pages/en/components/data-tables/virtual-tables.md
+++ b/packages/docs/src/pages/en/components/data-tables/virtual-tables.md
@@ -12,6 +12,10 @@ related:
 
 # Data table - Virtual tables
 
-Lorem ipsum etc etc
+The v-data-table-virtual component relies on all data being available locally. But unlike the standard data-table it uses virtualization to only render a small portion of the rows. This makes it well suited for displaying large data sets. It supports sorting and filtering, but not pagination.
 
 ## Examples
+
+### Basic example
+
+<example file="v-data-table/virtual" />
diff --git a/packages/vuetify/src/labs/VDataTable/VDataTable.tsx b/packages/vuetify/src/labs/VDataTable/VDataTable.tsx
index 4a235e1110a..e542b3c1489 100644
--- a/packages/vuetify/src/labs/VDataTable/VDataTable.tsx
+++ b/packages/vuetify/src/labs/VDataTable/VDataTable.tsx
@@ -24,20 +24,43 @@ import { computed, toRef } from 'vue'
 import { genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
-import type { Ref } from 'vue'
-import type { DataTableItem, InternalDataTableHeader } from './types'
+import type { UnwrapRef } from 'vue'
+import type { DataTableItem, InternalDataTableHeader, InternalDataTableItem } from './types'
 import type { VDataTableRowsSlots } from './VDataTableRows'
+import type { VDataTableHeadersSlots } from './VDataTableHeaders'
+
+export type VDataTableSlotProps = {
+  page: number
+  itemsPerPage: number
+  sortBy: UnwrapRef<ReturnType<typeof provideSort>['sortBy']>
+  pageCount: number
+  toggleSort: ReturnType<typeof provideSort>['toggleSort']
+  setItemsPerPage: ReturnType<typeof providePagination>['setItemsPerPage']
+  someSelected: boolean
+  allSelected: boolean
+  isSelected: ReturnType<typeof provideSelection>['isSelected']
+  select: ReturnType<typeof provideSelection>['select']
+  selectAll: ReturnType<typeof provideSelection>['selectAll']
+  toggleSelect: ReturnType<typeof provideSelection>['toggleSelect']
+  isExpanded: ReturnType<typeof provideExpanded>['isExpanded']
+  toggleExpand: ReturnType<typeof provideExpanded>['toggleExpand']
+  isGroupOpen: ReturnType<typeof provideGroupBy>['isGroupOpen']
+  toggleGroup: ReturnType<typeof provideGroupBy>['toggleGroup']
+  items: DataTableItem[]
+  groupedItems: InternalDataTableItem[]
+  columns: InternalDataTableHeader[]
+  headers: InternalDataTableHeader[][]
+}
 
-export type VDataTableSlots = VDataTableRowsSlots & {
-  colgroup: [{ columns: Ref<InternalDataTableHeader[]> }]
-  default: []
-  top: []
-  headers: []
-  body: []
-  tbody: []
-  thead: []
-  tfoot: []
-  bottom: []
+export type VDataTableSlots = VDataTableRowsSlots & VDataTableHeadersSlots & {
+  default: [VDataTableSlotProps]
+  colgroup: [VDataTableSlotProps]
+  top: [VDataTableSlotProps]
+  body: [VDataTableSlotProps]
+  tbody: [VDataTableSlotProps]
+  thead: [VDataTableSlotProps]
+  tfoot: [VDataTableSlotProps]
+  bottom: [VDataTableSlotProps]
   'footer.prepend': []
 }
 
@@ -84,7 +107,7 @@ export const VDataTable = genericComponent<VDataTableSlots>()({
     const { sortBy, multiSort, mustSort } = createSort(props)
     const { page, itemsPerPage } = createPagination(props)
 
-    const { columns } = createHeaders(props, {
+    const { columns, headers } = createHeaders(props, {
       groupBy,
       showSelect: toRef(props, 'showSelect'),
       showExpand: toRef(props, 'showExpand'),
@@ -96,21 +119,21 @@ export const VDataTable = genericComponent<VDataTableSlots>()({
     const search = toRef(props, 'search')
     const { filteredItems } = useFilter<DataTableItem>(props, items, search, { filterKeys })
 
-    provideSort({ sortBy, multiSort, mustSort, page })
-    const { sortByWithGroups, opened, extractRows } = provideGroupBy({ groupBy, sortBy })
+    const { toggleSort } = provideSort({ sortBy, multiSort, mustSort, page })
+    const { sortByWithGroups, opened, extractRows, isGroupOpen, toggleGroup } = provideGroupBy({ groupBy, sortBy })
 
     const { sortedItems } = useSortedItems(filteredItems, sortByWithGroups, columns)
     const { flatItems } = useGroupedItems(sortedItems, groupBy, opened)
     const itemsLength = computed(() => flatItems.value.length)
 
-    const { startIndex, stopIndex } = providePagination({ page, itemsPerPage, itemsLength })
+    const { startIndex, stopIndex, pageCount, setItemsPerPage } = providePagination({ page, itemsPerPage, itemsLength })
     const { paginatedItems } = usePaginatedItems({ items: flatItems, startIndex, stopIndex, itemsPerPage })
 
     const paginatedItemsWithoutGroups = computed(() => extractRows(paginatedItems.value))
 
-    provideSelection(props, paginatedItemsWithoutGroups)
+    const { isSelected, select, selectAll, toggleSelect, someSelected, allSelected } = provideSelection(props, paginatedItemsWithoutGroups)
 
-    provideExpanded(props)
+    const { isExpanded, toggleExpand } = provideExpanded(props)
 
     useOptions({
       page,
@@ -129,6 +152,29 @@ export const VDataTable = genericComponent<VDataTableSlots>()({
       },
     })
 
+    const slotProps = computed<VDataTableSlotProps>(() => ({
+      page: page.value,
+      itemsPerPage: itemsPerPage.value,
+      sortBy: sortBy.value,
+      pageCount: pageCount.value,
+      toggleSort,
+      setItemsPerPage,
+      someSelected: someSelected.value,
+      allSelected: allSelected.value,
+      isSelected,
+      select,
+      selectAll,
+      toggleSelect,
+      isExpanded,
+      toggleExpand,
+      isGroupOpen,
+      toggleGroup,
+      items: paginatedItems.value,
+      groupedItems: flatItems.value,
+      columns: columns.value,
+      headers: headers.value,
+    }))
+
     useRender(() => {
       const [dataTableFooterProps] = VDataTableFooter.filterProps(props)
       const [dataTableHeadersProps] = VDataTableHeaders.filterProps(props)
@@ -149,19 +195,19 @@ export const VDataTable = genericComponent<VDataTableSlots>()({
           { ...tableProps }
         >
           {{
-            top: slots.top,
-            default: slots.default ?? (() => (
+            top: () => slots.top?.(slotProps.value),
+            default: () => slots.default ? slots.default(slotProps.value) : (
               <>
-                { slots.colgroup?.({ columns }) }
+                { slots.colgroup?.(slotProps.value) }
                 <thead>
                   <VDataTableHeaders
                     { ...dataTableHeadersProps }
                     v-slots={ slots }
                   />
                 </thead>
-                { slots.thead?.() }
+                { slots.thead?.(slotProps.value) }
                 <tbody>
-                  { slots.body ? slots.body() : (
+                  { slots.body ? slots.body(slotProps.value) : (
                     <VDataTableRows
                       { ...dataTableRowsProps }
                       items={ paginatedItems.value }
@@ -169,18 +215,20 @@ export const VDataTable = genericComponent<VDataTableSlots>()({
                     />
                   )}
                 </tbody>
-                { slots.tbody?.() }
-                { slots.tfoot?.() }
+                { slots.tbody?.(slotProps.value) }
+                { slots.tfoot?.(slotProps.value) }
+              </>
+            ),
+            bottom: () => slots.bottom ? slots.bottom(slotProps.value) : (
+              <>
+                <VDataTableFooter
+                  { ...dataTableFooterProps }
+                  v-slots={{
+                    prepend: slots['footer.prepend'],
+                  }}
+                />
               </>
-            )),
-            bottom: slots.bottom ?? (() => (
-              <VDataTableFooter
-                { ...dataTableFooterProps }
-                v-slots={{
-                  prepend: slots['footer.prepend'],
-                }}
-              />
-            )),
+            ),
           }}
         </VTable>
       )
diff --git a/packages/vuetify/src/labs/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/labs/VDataTable/VDataTableHeaders.tsx
index d1bd4a52687..22bfc09972e 100644
--- a/packages/vuetify/src/labs/VDataTable/VDataTableHeaders.tsx
+++ b/packages/vuetify/src/labs/VDataTable/VDataTableHeaders.tsx
@@ -8,6 +8,7 @@ import { IconValue } from '@/composables/icons'
 import { LoaderSlot, makeLoaderProps, useLoader } from '@/composables/loader'
 import { useBackgroundColor } from '@/composables/color'
 import { useHeaders } from './composables/headers'
+import type { provideSelection } from './composables/select'
 import { useSelection } from './composables/select'
 import { useSort } from './composables/sort'
 
@@ -16,23 +17,42 @@ import { computed } from 'vue'
 import { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
-import type { CSSProperties } from 'vue'
+import type { CSSProperties, UnwrapRef } from 'vue'
 import type { InternalDataTableHeader } from './types'
 import type { LoaderSlotProps } from '@/composables/loader'
-import type { SortItem } from './composables/sort'
+import type { provideSort } from './composables/sort'
 
-type HeadersSlotProps = {
+export type HeadersSlotProps = {
   headers: InternalDataTableHeader[][]
   columns: InternalDataTableHeader[]
-  sortBy: readonly SortItem[]
-  someSelected: boolean
-  allSelected: boolean
-  toggleSort: (key: string) => void
-  selectAll: (value: boolean) => void
-  getSortIcon: (key: string) => IconValue
+  sortBy: UnwrapRef<ReturnType<typeof provideSort>['sortBy']>
+  someSelected: UnwrapRef<ReturnType<typeof provideSelection>['someSelected']>
+  allSelected: UnwrapRef<ReturnType<typeof provideSelection>['allSelected']>
+  toggleSort: ReturnType<typeof provideSort>['toggleSort']
+  selectAll: ReturnType<typeof provideSelection>['selectAll']
+  getSortIcon: (column: InternalDataTableHeader) => IconValue
   getFixedStyles: (column: InternalDataTableHeader, y: number) => CSSProperties | undefined
+  isSorted: ReturnType<typeof provideSort>['isSorted']
 }
 
+type VDataTableHeaderCellColumnSlotProps = {
+  column: InternalDataTableHeader
+  selectAll: ReturnType<typeof provideSelection>['selectAll']
+  isSorted: ReturnType<typeof provideSort>['isSorted']
+  toggleSort: ReturnType<typeof provideSort>['toggleSort']
+  sortBy: UnwrapRef<ReturnType<typeof provideSort>['sortBy']>
+  someSelected: UnwrapRef<ReturnType<typeof provideSelection>['someSelected']>
+  allSelected: UnwrapRef<ReturnType<typeof provideSelection>['allSelected']>
+  getSortIcon: (column: InternalDataTableHeader) => IconValue
+}
+
+export type VDataTableHeadersSlots = {
+  headers: [HeadersSlotProps]
+  loader: [LoaderSlotProps]
+  'column.data-table-select': [VDataTableHeaderCellColumnSlotProps]
+  'column.data-table-expand': [VDataTableHeaderCellColumnSlotProps]
+} & { [key: `column.${string}`]: [VDataTableHeaderCellColumnSlotProps] }
+
 export const makeVDataTableHeadersProps = propsFactory({
   color: String,
   sticky: Boolean,
@@ -49,20 +69,13 @@ export const makeVDataTableHeadersProps = propsFactory({
   ...makeLoaderProps(),
 }, 'v-data-table-headers')
 
-export type VDataTableHeadersSlots = {
-  default: []
-  headers: [HeadersSlotProps]
-  loader: [LoaderSlotProps]
-  'column.data-table-select': [{ column: InternalDataTableHeader, selectAll: (value: boolean) => void }]
-} & { [key: `column.${string}`]: [{ column: InternalDataTableHeader, selectAll: (value: boolean) => void }] }
-
 export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
   name: 'VDataTableHeaders',
 
   props: makeVDataTableHeadersProps(),
 
   setup (props, { slots, emit }) {
-    const { toggleSort, sortBy } = useSort()
+    const { toggleSort, sortBy, isSorted } = useSort()
     const { someSelected, allSelected, selectAll } = useSelection()
     const { columns, headers } = useHeaders()
     const { loaderClasses } = useLoader(props)
@@ -78,8 +91,8 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
       }
     }
 
-    function getSortIcon (id: string) {
-      const item = sortBy.value.find(item => item.key === id)
+    function getSortIcon (column: InternalDataTableHeader) {
+      const item = sortBy.value.find(item => item.key === column.key)
 
       if (!item) return props.sortAscIcon
 
@@ -92,6 +105,7 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
       headers: headers.value,
       columns: columns.value,
       toggleSort,
+      isSorted,
       sortBy: sortBy.value,
       someSelected: someSelected.value,
       allSelected: allSelected.value,
@@ -101,7 +115,6 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
     } satisfies HeadersSlotProps))
 
     const VDataTableHeaderCell = ({ column, x, y }: { column: InternalDataTableHeader, x: number, y: number }) => {
-      const isSorted = !!sortBy.value.find(x => x.key === column.key)
       const noPadding = column.key === 'data-table-select' || column.key === 'data-table-expand'
 
       return (
@@ -112,7 +125,7 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
             'v-data-table__th',
             {
               'v-data-table__th--sortable': column.sortable,
-              'v-data-table__th--sorted': isSorted,
+              'v-data-table__th--sorted': isSorted(column),
             },
             loaderClasses.value,
           ]}
@@ -123,16 +136,22 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
           }}
           colspan={ column.colspan }
           rowspan={ column.rowspan }
-          onClick={ column.sortable ? () => toggleSort(column.key) : undefined }
+          onClick={ column.sortable ? () => toggleSort(column) : undefined }
           lastFixed={ column.lastFixed }
           noPadding={ noPadding }
         >
           {{
             default: () => {
               const columnSlotName = `column.${column.key}` as const
-              const columnSlotProps = {
+              const columnSlotProps: VDataTableHeaderCellColumnSlotProps = {
                 column,
                 selectAll,
+                isSorted,
+                toggleSort,
+                sortBy: sortBy.value,
+                someSelected: someSelected.value,
+                allSelected: allSelected.value,
+                getSortIcon,
               }
 
               if (slots[columnSlotName]) return slots[columnSlotName]!(columnSlotProps)
@@ -154,10 +173,10 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
                     <VIcon
                       key="icon"
                       class="v-data-table-header__sort-icon"
-                      icon={ getSortIcon(column.key) }
+                      icon={ getSortIcon(column) }
                     />
                   )}
-                  { props.multiSort && isSorted && (
+                  { props.multiSort && isSorted(column) && (
                     <div
                       key="badge"
                       class={[
@@ -193,14 +212,13 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
           { props.loading && (
             <tr class="v-data-table__progress">
               <th colspan={ columns.value.length }>
-
-              <LoaderSlot
-                name="v-data-table-headers"
-                active
-                color={ typeof props.loading === 'boolean' ? undefined : props.loading }
-                indeterminate
-                v-slots={{ default: slots.loader }}
-              />
+                <LoaderSlot
+                  name="v-data-table-headers"
+                  active
+                  color={ typeof props.loading === 'boolean' ? undefined : props.loading }
+                  indeterminate
+                  v-slots={{ default: slots.loader }}
+                />
               </th>
             </tr>
           )}
diff --git a/packages/vuetify/src/labs/VDataTable/VDataTableRows.tsx b/packages/vuetify/src/labs/VDataTable/VDataTableRows.tsx
index 45ee4e67bf1..0cfc94dc532 100644
--- a/packages/vuetify/src/labs/VDataTable/VDataTableRows.tsx
+++ b/packages/vuetify/src/labs/VDataTable/VDataTableRows.tsx
@@ -39,7 +39,6 @@ type ItemSlot = {
 }
 
 export type VDataTableRowsSlots = VDataTableGroupHeaderRowSlots & {
-  default: []
   item: [ItemSlot]
   loading: []
   'group-header': [GroupHeaderSlot]
diff --git a/packages/vuetify/src/labs/VDataTable/VDataTableServer.tsx b/packages/vuetify/src/labs/VDataTable/VDataTableServer.tsx
index d4e409889e0..042a0061308 100644
--- a/packages/vuetify/src/labs/VDataTable/VDataTableServer.tsx
+++ b/packages/vuetify/src/labs/VDataTable/VDataTableServer.tsx
@@ -22,7 +22,7 @@ import { genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
 import type { DataTableItem } from './types'
-import type { VDataTableSlots } from './VDataTable'
+import type { VDataTableSlotProps, VDataTableSlots } from './VDataTable'
 
 export const makeVDataTableServerProps = propsFactory({
   itemsLength: {
@@ -57,9 +57,7 @@ export const VDataTableServer = genericComponent<VDataTableSlots>()({
     const { page, itemsPerPage } = createPagination(props)
     const itemsLength = computed(() => parseInt(props.itemsLength, 10))
 
-    provideExpanded(props)
-
-    const { columns } = createHeaders(props, {
+    const { columns, headers } = createHeaders(props, {
       groupBy,
       showSelect: toRef(props, 'showSelect'),
       showExpand: toRef(props, 'showExpand'),
@@ -69,13 +67,15 @@ export const VDataTableServer = genericComponent<VDataTableSlots>()({
 
     const { toggleSort } = provideSort({ sortBy, multiSort, mustSort, page })
 
-    const { opened } = provideGroupBy({ groupBy, sortBy })
+    const { opened, isGroupOpen, toggleGroup } = provideGroupBy({ groupBy, sortBy })
 
-    providePagination({ page, itemsPerPage, itemsLength })
+    const { pageCount, setItemsPerPage } = providePagination({ page, itemsPerPage, itemsLength })
 
     const { flatItems } = useGroupedItems(items, groupBy, opened)
 
-    provideSelection(props, items)
+    const { isSelected, select, selectAll, toggleSelect, someSelected, allSelected } = provideSelection(props, items)
+
+    const { isExpanded, toggleExpand } = provideExpanded(props)
 
     useOptions({
       page,
@@ -99,6 +99,29 @@ export const VDataTableServer = genericComponent<VDataTableSlots>()({
       },
     })
 
+    const slotProps = computed<VDataTableSlotProps>(() => ({
+      page: page.value,
+      itemsPerPage: itemsPerPage.value,
+      sortBy: sortBy.value,
+      pageCount: pageCount.value,
+      toggleSort,
+      setItemsPerPage,
+      someSelected: someSelected.value,
+      allSelected: allSelected.value,
+      isSelected,
+      select,
+      selectAll,
+      toggleSelect,
+      isExpanded,
+      toggleExpand,
+      isGroupOpen,
+      toggleGroup,
+      items: items.value,
+      groupedItems: flatItems.value,
+      columns: columns.value,
+      headers: headers.value,
+    }))
+
     useRender(() => {
       const [dataTableFooterProps] = VDataTableFooter.filterProps(props)
       const [dataTableHeadersProps] = VDataTableHeaders.filterProps(props)
@@ -118,10 +141,10 @@ export const VDataTableServer = genericComponent<VDataTableSlots>()({
           { ...tableProps }
         >
           {{
-            top: slots.top,
-            default: slots.default ?? (() => (
+            top: () => slots.top?.(slotProps.value),
+            default: () => slots.default ? slots.default(slotProps.value) : (
               <>
-                { slots.colgroup?.({ columns }) }
+                { slots.colgroup?.(slotProps.value) }
                 <thead class="v-data-table__thead" role="rowgroup">
                   <VDataTableHeaders
                     { ...dataTableHeadersProps }
@@ -129,9 +152,9 @@ export const VDataTableServer = genericComponent<VDataTableSlots>()({
                     v-slots={ slots }
                   />
                 </thead>
-                { slots.thead?.() }
+                { slots.thead?.(slotProps.value) }
                 <tbody class="v-data-table__tbody" role="rowgroup">
-                  { slots.body ? slots.body() : (
+                  { slots.body ? slots.body(slotProps.value) : (
                     <VDataTableRows
                       { ...dataTableRowsProps }
                       items={ flatItems.value }
@@ -139,18 +162,18 @@ export const VDataTableServer = genericComponent<VDataTableSlots>()({
                     />
                   )}
                 </tbody>
-                { slots.tbody?.() }
-                { slots.tfoot?.() }
+                { slots.tbody?.(slotProps.value) }
+                { slots.tfoot?.(slotProps.value) }
               </>
-            )),
-            bottom: slots.bottom ?? (() => (
+            ),
+            bottom: () => slots.bottom ? slots.bottom(slotProps.value) : (
               <VDataTableFooter
                 { ...dataTableFooterProps }
                 v-slots={{
                   prepend: slots['footer.prepend'],
                 }}
               />
-            )),
+            ),
           }}
         </VTable>
       )
diff --git a/packages/vuetify/src/labs/VDataTable/VDataTableVirtual.tsx b/packages/vuetify/src/labs/VDataTable/VDataTableVirtual.tsx
index a97315f1af5..37b7bf40fa9 100644
--- a/packages/vuetify/src/labs/VDataTable/VDataTableVirtual.tsx
+++ b/packages/vuetify/src/labs/VDataTable/VDataTableVirtual.tsx
@@ -22,12 +22,16 @@ import { convertToUnit, genericComponent, propsFactory, useRender } from '@/util
 
 // Types
 import type { DataTableItem } from './types'
+import type { VDataTableSlotProps } from './VDataTable'
 import type { VDataTableRowsSlots } from './VDataTableRows'
+import type { VDataTableHeadersSlots } from './VDataTableHeaders'
 
-export type VDataTableVirtualSlots = VDataTableRowsSlots & {
-  top: []
-  headers: []
-  bottom: []
+type VDataTableVirtualSlotProps = Omit<VDataTableSlotProps, 'setItemsPerPage' | 'page' | 'pageCount' | 'itemsPerPage'>
+
+export type VDataTableVirtualSlots = VDataTableRowsSlots & VDataTableHeadersSlots & {
+  top: [VDataTableVirtualSlotProps]
+  headers: VDataTableHeadersSlots['headers']
+  bottom: [VDataTableVirtualSlotProps]
 }
 
 export const makeVDataTableVirtualProps = propsFactory({
@@ -54,7 +58,7 @@ export const VDataTableVirtual = genericComponent<VDataTableVirtualSlots>()({
     const { groupBy } = createGroupBy(props)
     const { sortBy, multiSort, mustSort } = createSort(props)
 
-    const { columns } = createHeaders(props, {
+    const { columns, headers } = createHeaders(props, {
       groupBy,
       showSelect: toRef(props, 'showSelect'),
       showExpand: toRef(props, 'showExpand'),
@@ -65,16 +69,16 @@ export const VDataTableVirtual = genericComponent<VDataTableVirtualSlots>()({
     const search = toRef(props, 'search')
     const { filteredItems } = useFilter<DataTableItem>(props, items, search, { filterKeys })
 
-    provideSort({ sortBy, multiSort, mustSort })
-    const { sortByWithGroups, opened, extractRows } = provideGroupBy({ groupBy, sortBy })
+    const { toggleSort } = provideSort({ sortBy, multiSort, mustSort })
+    const { sortByWithGroups, opened, extractRows, isGroupOpen, toggleGroup } = provideGroupBy({ groupBy, sortBy })
 
     const { sortedItems } = useSortedItems(filteredItems, sortByWithGroups, columns)
     const { flatItems } = useGroupedItems(sortedItems, groupBy, opened)
 
     const allRows = computed(() => extractRows(flatItems.value))
 
-    provideSelection(props, allRows)
-    provideExpanded(props)
+    const { isSelected, select, selectAll, toggleSelect, someSelected, allSelected } = provideSelection(props, allRows)
+    const { isExpanded, toggleExpand } = provideExpanded(props)
 
     const {
       containerRef,
@@ -107,6 +111,25 @@ export const VDataTableVirtual = genericComponent<VDataTableVirtualSlots>()({
       },
     })
 
+    const slotProps = computed<VDataTableVirtualSlotProps>(() => ({
+      sortBy: sortBy.value,
+      toggleSort,
+      someSelected: someSelected.value,
+      allSelected: allSelected.value,
+      isSelected,
+      select,
+      selectAll,
+      toggleSelect,
+      isExpanded,
+      toggleExpand,
+      isGroupOpen,
+      toggleGroup,
+      items: items.value,
+      groupedItems: flatItems.value,
+      columns: columns.value,
+      headers: headers.value,
+    }))
+
     useRender(() => {
       const [dataTableHeadersProps] = VDataTableHeaders.filterProps(props)
       const [dataTableRowsProps] = VDataTableRows.filterProps(props)
@@ -128,7 +151,7 @@ export const VDataTableVirtual = genericComponent<VDataTableVirtualSlots>()({
           { ...tableProps }
         >
           {{
-            top: slots.top,
+            top: () => slots.top?.(slotProps.value),
             wrapper: () => (
               <div
                 ref={ containerRef }
@@ -164,7 +187,7 @@ export const VDataTableVirtual = genericComponent<VDataTableVirtualSlots>()({
                 </table>
               </div>
             ),
-            bottom: slots.bottom,
+            bottom: () => slots.bottom?.(slotProps.value),
           }}
         </VTable>
       )
diff --git a/packages/vuetify/src/labs/VDataTable/__tests__/VDataTable.spec.cy.tsx b/packages/vuetify/src/labs/VDataTable/__tests__/VDataTable.spec.cy.tsx
index ea5ba2d0699..3b24fe8be0b 100644
--- a/packages/vuetify/src/labs/VDataTable/__tests__/VDataTable.spec.cy.tsx
+++ b/packages/vuetify/src/labs/VDataTable/__tests__/VDataTable.spec.cy.tsx
@@ -128,7 +128,8 @@ describe('VDataTable', () => {
 
     const headers = [
       {
-        key: 'foo.bar',
+        key: 'unique',
+        value: 'foo.bar',
         title: 'Column',
       },
     ]
@@ -208,4 +209,132 @@ describe('VDataTable', () => {
       .emitted(VDataTable, 'update:page')
       .should('deep.equal', [[2], [1]])
   })
+
+  describe('slots', () => {
+    it('should have top slot', () => {
+      cy.mount(() => (
+        <Application>
+          <VDataTable>
+            {{
+              top: _ => <div id="top">TOP</div>,
+            }}
+          </VDataTable>
+        </Application>
+      ))
+
+      cy.get('.v-data-table').find('#top').should('have.text', 'TOP')
+    })
+
+    it('should have bottom slot (and should overwrite footer)', () => {
+      cy.mount(() => (
+        <Application>
+          <VDataTable>
+            {{
+              bottom: _ => <div id="bottom">BOTTOM</div>,
+            }}
+          </VDataTable>
+        </Application>
+      ))
+
+      cy.get('.v-data-table').find('#bottom').should('have.text', 'BOTTOM')
+      cy.get('.v-data-table-footer').should('not.exist')
+    })
+
+    it('should have headers slot (and overwrite default headers)', () => {
+      cy.mount(() => (
+        <Application>
+          <VDataTable>
+            {{
+              headers: _ => <div id="headers">headers</div>,
+            }}
+          </VDataTable>
+        </Application>
+      ))
+
+      cy.get('.v-data-table').find('#headers').should('have.text', 'headers')
+      cy.get('.v-data-table__th').should('not.exist')
+    })
+
+    it('should have colgroup slot', () => {
+      cy.mount(() => (
+        <Application>
+          <VDataTable items={ DESSERT_ITEMS } headers={ DESSERT_HEADERS }>
+            {{
+              colgroup: ({ columns }) => (
+                <colgroup>
+                  { columns.map(column => (
+                    <col id={ column.key }></col>
+                  ))}
+                </colgroup>
+              ),
+            }}
+          </VDataTable>
+        </Application>
+      ))
+
+      cy.get('colgroup').should('exist')
+    })
+
+    it('should have column.* slots', () => {
+      cy.mount(() => (
+        <Application>
+          <VDataTable items={ DESSERT_ITEMS } headers={ DESSERT_HEADERS } showSelect showExpand>
+            {{
+              'column.data-table-expand': () => <h1>expand</h1>,
+              'column.data-table-select': () => <h2>select</h2>,
+              'column.name': ({ column }) => (
+                <h3>{ column.title }</h3>
+              ),
+            }}
+          </VDataTable>
+        </Application>
+      ))
+
+      cy.get('.v-data-table__th').find('h1').should('exist')
+      cy.get('.v-data-table__th').find('h2').should('exist')
+      cy.get('.v-data-table__th').find('h3').should('exist')
+    })
+
+    it('should have item slot', () => {
+      cy.mount(() => (
+        <Application>
+          <VDataTable items={ DESSERT_ITEMS } headers={ DESSERT_HEADERS } itemsPerPage={ 10 }>
+            {{
+              item: ({ columns, item }) => (
+                <tr class="custom-row">
+                  { columns.map(column => (
+                    <td>
+                      <h1>{ item.columns[column.key] }</h1>
+                    </td>
+                  ))}
+                </tr>
+              ),
+            }}
+          </VDataTable>
+        </Application>
+      ))
+
+      cy.get('.custom-row').should('have.length', 10)
+    })
+
+    it('should have item.* slots', () => {
+      cy.mount(() => (
+        <Application>
+          <VDataTable items={ DESSERT_ITEMS } headers={ DESSERT_HEADERS } showSelect showExpand>
+            {{
+              'item.data-table-expand': () => <h1>expand</h1>,
+              'item.data-table-select': () => <h2>select</h2>,
+              'item.name': ({ item }) => (
+                <h3>{ item.columns.name }</h3>
+              ),
+            }}
+          </VDataTable>
+        </Application>
+      ))
+
+      cy.get('.v-data-table').find('h1').should('exist')
+      cy.get('.v-data-table').find('h2').should('exist')
+      cy.get('.v-data-table').find('h3').should('exist')
+    })
+  })
 })
diff --git a/packages/vuetify/src/labs/VDataTable/composables/headers.ts b/packages/vuetify/src/labs/VDataTable/composables/headers.ts
index 0034203d151..5500d102a6d 100644
--- a/packages/vuetify/src/labs/VDataTable/composables/headers.ts
+++ b/packages/vuetify/src/labs/VDataTable/composables/headers.ts
@@ -67,13 +67,12 @@ export function createHeaders (
     const fixedRows: InternalDataTableHeader[][] = createRange(rowCount).map(() => [])
     const fixedOffsets = createRange(rowCount).fill(0)
 
-    let count = 0
     flat.forEach(({ column, row }) => {
-      const id = column.key ?? `data-table-column-${count++}`
+      const key = column.key
       for (let i = row; i <= row + (column.rowspan ?? 1) - 1; i++) {
         fixedRows[i].push({
           ...column,
-          key: id,
+          key,
           fixedOffset: fixedOffsets[i],
           sortable: column.sortable ?? !!column.key,
         })
diff --git a/packages/vuetify/src/labs/VDataTable/composables/items.ts b/packages/vuetify/src/labs/VDataTable/composables/items.ts
index 78a586062ff..371eca44af1 100644
--- a/packages/vuetify/src/labs/VDataTable/composables/items.ts
+++ b/packages/vuetify/src/labs/VDataTable/composables/items.ts
@@ -18,23 +18,6 @@ export const makeDataTableItemProps = propsFactory({
   }),
 }, 'v-data-table-item')
 
-function add (obj: Record<string, unknown>, key: string, value: unknown) {
-  const path = key.split('.')
-
-  while (path.length > 1) {
-    const part = path.shift()!
-    if (obj[part] == null) {
-      obj[part] = {}
-    }
-
-    if (typeof obj[part] === 'object') {
-      obj = obj[part] as Record<string, unknown>
-    }
-  }
-
-  obj[path[0]] = value
-}
-
 export function useDataTableItems (props: ItemProps, columns: Ref<InternalDataTableHeader[]>) {
   const { items } = useItems(props)
 
@@ -43,7 +26,7 @@ export function useDataTableItems (props: ItemProps, columns: Ref<InternalDataTa
       ...item,
       type: 'item',
       columns: columns.value.reduce((obj, column) => {
-        add(obj, column.key, getPropertyFromItem(item.raw, column.value ?? column.key))
+        obj[column.key] = getPropertyFromItem(item.raw, column.value ?? column.key)
         return obj
       }, {} as Record<string, unknown>),
     }
diff --git a/packages/vuetify/src/labs/VDataTable/composables/sort.ts b/packages/vuetify/src/labs/VDataTable/composables/sort.ts
index 2fc3595c83e..7da6bb6f7b5 100644
--- a/packages/vuetify/src/labs/VDataTable/composables/sort.ts
+++ b/packages/vuetify/src/labs/VDataTable/composables/sort.ts
@@ -21,7 +21,8 @@ export const makeDataTableSortProps = propsFactory({
 
 const VDataTableSortSymbol: InjectionKey<{
   sortBy: Ref<readonly SortItem[]>
-  toggleSort: (key: string) => void
+  toggleSort: (column: InternalDataTableHeader) => void
+  isSorted: (column: InternalDataTableHeader) => boolean
 }> = Symbol.for('vuetify:data-table-sort')
 
 export type SortItem = { key: string, order?: boolean | 'asc' | 'desc' }
@@ -49,18 +50,18 @@ export function provideSort (options: {
 }) {
   const { sortBy, mustSort, multiSort, page } = options
 
-  const toggleSort = (key: string) => {
+  const toggleSort = (column: InternalDataTableHeader) => {
     let newSortBy = sortBy.value.map(x => ({ ...x })) ?? []
-    const item = newSortBy.find(x => x.key === key)
+    const item = newSortBy.find(x => x.key === column.key)
 
     if (!item) {
-      if (multiSort.value) newSortBy = [...newSortBy, { key, order: 'asc' }]
-      else newSortBy = [{ key, order: 'asc' }]
+      if (multiSort.value) newSortBy = [...newSortBy, { key: column.key, order: 'asc' }]
+      else newSortBy = [{ key: column.key, order: 'asc' }]
     } else if (item.order === 'desc') {
       if (mustSort.value) {
         item.order = 'asc'
       } else {
-        newSortBy = newSortBy.filter(x => x.key !== key)
+        newSortBy = newSortBy.filter(x => x.key !== column.key)
       }
     } else {
       item.order = 'desc'
@@ -70,7 +71,11 @@ export function provideSort (options: {
     if (page) page.value = 1
   }
 
-  const data = { sortBy, toggleSort }
+  function isSorted (column: InternalDataTableHeader) {
+    return !!sortBy.value.find(item => item.key === column.key)
+  }
+
+  const data = { sortBy, toggleSort, isSorted }
 
   provide(VDataTableSortSymbol, data)
 
diff --git a/packages/vuetify/src/labs/VDataTable/types.ts b/packages/vuetify/src/labs/VDataTable/types.ts
index 23d8cfdfaca..e0834ede0af 100644
--- a/packages/vuetify/src/labs/VDataTable/types.ts
+++ b/packages/vuetify/src/labs/VDataTable/types.ts
@@ -29,7 +29,7 @@ export type InternalDataTableHeader = DataTableHeader & {
   lastFixed?: boolean
 }
 
-export type DataTableItem = InternalItem & { type: 'item', columns: Record<string, unknown> }
+export type DataTableItem = InternalItem & { type: 'item', columns: Record<string, any> }
 
 export type GroupHeaderItem = {
   type: 'group-header'