From 807e7298c2e9e876b89dce8bdec1d218d8e04c26 Mon Sep 17 00:00:00 2001
From: Albert Kaaman <albert@kaaman.nu>
Date: Tue, 3 Jan 2023 21:27:38 +0100
Subject: [PATCH] feat(VDataTable): port to v3 (#16235)

resolves #13479

Co-authored-by: John Leider <john@vuetifyjs.com>
Co-authored-by: Elijah Kotyluk <elijah@elijahkotyluk.com>
Co-authored-by: Kael <kaelwd@gmail.com>
---
 packages/api-generator/src/types.ts           |   1 +
 .../docs/src/components/app/list/List.vue     |   4 +-
 .../docs/src/components/examples/Example.vue  |   2 +-
 .../components/examples/ExampleMissing.vue    |  15 +-
 packages/docs/src/data/nav-alpha.json         |  18 +-
 packages/docs/src/data/page-to-api.json       |   6 +-
 .../examples/v-data-iterator/misc-filter.vue  |   5 +-
 .../src/examples/v-data-iterator/usage.vue    |  13 +-
 .../src/examples/v-data-table/misc-crud.vue   |  25 +-
 .../src/examples/v-data-table/misc-expand.vue |  36 +-
 .../v-data-table/misc-external-paginate.vue   |  73 +-
 .../v-data-table/misc-external-sort.vue       |  24 +-
 .../misc-server-side-paginate-and-sort.vue    |  26 +-
 .../v-data-table/prop-custom-filter.vue       | 249 +++----
 .../src/examples/v-data-table/prop-dense.vue  |  16 +-
 .../examples/v-data-table/prop-filterable.vue |  21 +-
 .../v-data-table/prop-footer-props.vue        | 116 ++--
 .../examples/v-data-table/prop-grouping.vue   | 138 ++--
 .../v-data-table/prop-hide-header-footer.vue  | 194 +++---
 .../examples/v-data-table/prop-loading.vue    |   4 +-
 .../examples/v-data-table/prop-multi-sort.vue |  17 +-
 .../v-data-table/prop-row-selection.vue       |  28 +-
 .../src/examples/v-data-table/prop-search.vue |  14 +-
 .../examples/v-data-table/prop-sort-by.vue    | 116 ++++
 .../docs/src/examples/v-data-table/server.vue | 157 +++++
 .../src/examples/v-data-table/slot-header.vue |  20 +-
 .../src/examples/v-data-table/slot-item.vue   |  18 +-
 .../src/examples/v-data-table/slot-main.vue   |   4 +-
 .../v-data-table/slot-simple-checkbox.vue     | 172 +++--
 .../docs/src/examples/v-data-table/usage.vue  |  86 +--
 .../src/examples/v-data-table/virtual.vue     | 121 ++++
 .../src/examples/v-data-table/virtualized.vue |  40 +-
 packages/docs/src/i18n/messages/en.json       |   1 +
 .../src/pages/en/components/data-tables.md    | 177 -----
 .../pages/en/components/data-tables/basics.md | 120 ++++
 .../en/components/data-tables/filtering.md    |  40 ++
 .../en/components/data-tables/grouping.md     |  26 +
 .../en/components/data-tables/headers.md      |  25 +
 .../en/components/data-tables/pagination.md   |  22 +
 .../data-tables/server-side-tables.md         |  28 +
 .../en/components/data-tables/sorting.md      |  32 +
 .../components/data-tables/virtual-tables.md  |  16 +
 packages/docs/src/plugins/vuetify.ts          |   4 +-
 packages/docs/vite.config.ts                  |   6 +-
 packages/vuetify/build/rollup.types.config.js |   5 +-
 packages/vuetify/dev/Playground.datatable.vue | 303 ++++++++
 packages/vuetify/dev/Playground.slider.vue    | 301 ++++++++
 .../src/components/VAlert/VAlertTitle.ts      |   2 +-
 .../VAutocomplete/VAutocomplete.tsx           |  10 +-
 .../src/components/VCombobox/VCombobox.tsx    |  10 +-
 .../src/components/VDataTable/MobileRow.ts    |  69 --
 .../vuetify/src/components/VDataTable/Row.ts  |  70 --
 .../src/components/VDataTable/RowGroup.ts     |  51 --
 .../src/components/VDataTable/VDataTable.sass |  98 ---
 .../src/components/VDataTable/VDataTable.ts   | 653 ------------------
 .../VDataTable/VDataTableHeader.sass          |  80 ---
 .../components/VDataTable/VDataTableHeader.ts |  45 --
 .../VDataTable/VDataTableHeaderDesktop.ts     | 124 ----
 .../VDataTable/VDataTableHeaderMobile.ts      | 106 ---
 .../components/VDataTable/VEditDialog.sass    |  22 -
 .../src/components/VDataTable/VEditDialog.ts  | 142 ----
 .../components/VDataTable/VVirtualTable.sass  |  13 -
 .../components/VDataTable/VVirtualTable.ts    | 166 -----
 .../src/components/VDataTable/_variables.scss |  24 -
 .../src/components/VDataTable/index.ts        |  25 -
 .../__snapshots__/header.spec.ts.snap         |  81 ---
 .../mixins/__tests__/header.spec.ts           | 112 ---
 .../components/VDataTable/mixins/header.ts    |  87 ---
 .../vuetify/src/components/VTable/VTable.sass |  27 +-
 .../vuetify/src/components/VTable/VTable.tsx  |   2 +-
 .../src/components/VTable/_variables.scss     |   6 +-
 .../src/composables/__tests__/filter.spec.ts  |  21 +-
 packages/vuetify/src/composables/filter.ts    |  35 +-
 packages/vuetify/src/composables/icons.tsx    |   7 +-
 packages/vuetify/src/iconsets/fa.ts           |   3 +-
 packages/vuetify/src/iconsets/fa4.ts          |   3 +-
 packages/vuetify/src/iconsets/md.ts           |   3 +-
 packages/vuetify/src/iconsets/mdi-svg.ts      |   3 +-
 packages/vuetify/src/iconsets/mdi.ts          |   3 +-
 .../src/labs/VDataTable/VDataTable.sass       | 106 +++
 .../src/labs/VDataTable/VDataTable.tsx        | 167 +++++
 .../src/labs/VDataTable/VDataTableColumn.tsx  |  39 ++
 .../src/labs/VDataTable/VDataTableFooter.sass |  23 +
 .../src/labs/VDataTable/VDataTableFooter.tsx  | 105 +++
 .../VDataTable/VDataTableGroupHeaderRow.tsx   |  84 +++
 .../src/labs/VDataTable/VDataTableHeaders.tsx | 170 +++++
 .../src/labs/VDataTable/VDataTableRow.tsx     |  97 +++
 .../src/labs/VDataTable/VDataTableRows.tsx    |  94 +++
 .../src/labs/VDataTable/VDataTableServer.tsx  | 142 ++++
 .../src/labs/VDataTable/VDataTableVirtual.tsx | 157 +++++
 .../VDataTable/__tests__/MobileRow.spec.ts    |   0
 .../VDataTable/__tests__/Row.spec.ts          |   0
 .../VDataTable/__tests__/RowGroup.spec.ts     |   0
 .../VDataTable/__tests__/VDataTable.spec.ts   |   0
 .../__tests__/VDataTableHeader.spec.ts        |   0
 .../VDataTable/__tests__/VEditDialog.spec.ts  |   0
 .../VDataTable/__tests__/VSimpleTable.spec.ts |   0
 .../__tests__/VVirtualTable.spec.ts           |   0
 .../__snapshots__/MobileRow.spec.ts.snap      |   0
 .../__tests__/__snapshots__/Row.spec.ts.snap  |   0
 .../__snapshots__/RowGroup.spec.ts.snap       |   0
 .../__snapshots__/VDataTable.spec.ts.snap     |   0
 .../VDataTableHeader.spec.ts.snap             |   0
 .../__snapshots__/VEditDialog.spec.ts.snap    |   0
 .../__snapshots__/VSimpleTable.spec.ts.snap   |   0
 .../__snapshots__/VVirtualTable.spec.ts.snap  |   0
 .../labs/VDataTable/__tests__/sort.spec.ts    | 204 ++++++
 .../src/labs/VDataTable/_variables.scss       |   6 +
 .../src/labs/VDataTable/composables/expand.ts |  76 ++
 .../src/labs/VDataTable/composables/group.ts  | 151 ++++
 .../labs/VDataTable/composables/headers.ts    | 126 ++++
 .../src/labs/VDataTable/composables/items.ts  |  36 +
 .../labs/VDataTable/composables/options.ts    |  51 ++
 .../labs/VDataTable/composables/paginate.ts   |  95 +++
 .../src/labs/VDataTable/composables/select.ts |  83 +++
 .../src/labs/VDataTable/composables/sort.ts   | 141 ++++
 .../labs/VDataTable/composables/virtual.ts    |  99 +++
 packages/vuetify/src/labs/VDataTable/index.ts |   5 +
 packages/vuetify/src/labs/VDataTable/types.ts |  43 ++
 packages/vuetify/src/labs/components.ts       |   4 +-
 .../src/util/__tests__/helpers.spec.ts        | 170 -----
 packages/vuetify/src/util/defineComponent.tsx |  14 +
 packages/vuetify/src/util/helpers.ts          |  52 --
 123 files changed, 4399 insertions(+), 3129 deletions(-)
 create mode 100644 packages/docs/src/examples/v-data-table/prop-sort-by.vue
 create mode 100644 packages/docs/src/examples/v-data-table/server.vue
 create mode 100644 packages/docs/src/examples/v-data-table/virtual.vue
 delete mode 100644 packages/docs/src/pages/en/components/data-tables.md
 create mode 100644 packages/docs/src/pages/en/components/data-tables/basics.md
 create mode 100644 packages/docs/src/pages/en/components/data-tables/filtering.md
 create mode 100644 packages/docs/src/pages/en/components/data-tables/grouping.md
 create mode 100644 packages/docs/src/pages/en/components/data-tables/headers.md
 create mode 100644 packages/docs/src/pages/en/components/data-tables/pagination.md
 create mode 100644 packages/docs/src/pages/en/components/data-tables/server-side-tables.md
 create mode 100644 packages/docs/src/pages/en/components/data-tables/sorting.md
 create mode 100644 packages/docs/src/pages/en/components/data-tables/virtual-tables.md
 create mode 100644 packages/vuetify/dev/Playground.datatable.vue
 create mode 100644 packages/vuetify/dev/Playground.slider.vue
 delete mode 100644 packages/vuetify/src/components/VDataTable/MobileRow.ts
 delete mode 100644 packages/vuetify/src/components/VDataTable/Row.ts
 delete mode 100644 packages/vuetify/src/components/VDataTable/RowGroup.ts
 delete mode 100644 packages/vuetify/src/components/VDataTable/VDataTable.sass
 delete mode 100644 packages/vuetify/src/components/VDataTable/VDataTable.ts
 delete mode 100644 packages/vuetify/src/components/VDataTable/VDataTableHeader.sass
 delete mode 100644 packages/vuetify/src/components/VDataTable/VDataTableHeader.ts
 delete mode 100644 packages/vuetify/src/components/VDataTable/VDataTableHeaderDesktop.ts
 delete mode 100644 packages/vuetify/src/components/VDataTable/VDataTableHeaderMobile.ts
 delete mode 100644 packages/vuetify/src/components/VDataTable/VEditDialog.sass
 delete mode 100644 packages/vuetify/src/components/VDataTable/VEditDialog.ts
 delete mode 100644 packages/vuetify/src/components/VDataTable/VVirtualTable.sass
 delete mode 100644 packages/vuetify/src/components/VDataTable/VVirtualTable.ts
 delete mode 100644 packages/vuetify/src/components/VDataTable/_variables.scss
 delete mode 100644 packages/vuetify/src/components/VDataTable/index.ts
 delete mode 100644 packages/vuetify/src/components/VDataTable/mixins/__tests__/__snapshots__/header.spec.ts.snap
 delete mode 100644 packages/vuetify/src/components/VDataTable/mixins/__tests__/header.spec.ts
 delete mode 100644 packages/vuetify/src/components/VDataTable/mixins/header.ts
 create mode 100644 packages/vuetify/src/labs/VDataTable/VDataTable.sass
 create mode 100644 packages/vuetify/src/labs/VDataTable/VDataTable.tsx
 create mode 100644 packages/vuetify/src/labs/VDataTable/VDataTableColumn.tsx
 create mode 100644 packages/vuetify/src/labs/VDataTable/VDataTableFooter.sass
 create mode 100644 packages/vuetify/src/labs/VDataTable/VDataTableFooter.tsx
 create mode 100644 packages/vuetify/src/labs/VDataTable/VDataTableGroupHeaderRow.tsx
 create mode 100644 packages/vuetify/src/labs/VDataTable/VDataTableHeaders.tsx
 create mode 100644 packages/vuetify/src/labs/VDataTable/VDataTableRow.tsx
 create mode 100644 packages/vuetify/src/labs/VDataTable/VDataTableRows.tsx
 create mode 100644 packages/vuetify/src/labs/VDataTable/VDataTableServer.tsx
 create mode 100644 packages/vuetify/src/labs/VDataTable/VDataTableVirtual.tsx
 rename packages/vuetify/src/{components => labs}/VDataTable/__tests__/MobileRow.spec.ts (100%)
 rename packages/vuetify/src/{components => labs}/VDataTable/__tests__/Row.spec.ts (100%)
 rename packages/vuetify/src/{components => labs}/VDataTable/__tests__/RowGroup.spec.ts (100%)
 rename packages/vuetify/src/{components => labs}/VDataTable/__tests__/VDataTable.spec.ts (100%)
 rename packages/vuetify/src/{components => labs}/VDataTable/__tests__/VDataTableHeader.spec.ts (100%)
 rename packages/vuetify/src/{components => labs}/VDataTable/__tests__/VEditDialog.spec.ts (100%)
 rename packages/vuetify/src/{components => labs}/VDataTable/__tests__/VSimpleTable.spec.ts (100%)
 rename packages/vuetify/src/{components => labs}/VDataTable/__tests__/VVirtualTable.spec.ts (100%)
 rename packages/vuetify/src/{components => labs}/VDataTable/__tests__/__snapshots__/MobileRow.spec.ts.snap (100%)
 rename packages/vuetify/src/{components => labs}/VDataTable/__tests__/__snapshots__/Row.spec.ts.snap (100%)
 rename packages/vuetify/src/{components => labs}/VDataTable/__tests__/__snapshots__/RowGroup.spec.ts.snap (100%)
 rename packages/vuetify/src/{components => labs}/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap (100%)
 rename packages/vuetify/src/{components => labs}/VDataTable/__tests__/__snapshots__/VDataTableHeader.spec.ts.snap (100%)
 rename packages/vuetify/src/{components => labs}/VDataTable/__tests__/__snapshots__/VEditDialog.spec.ts.snap (100%)
 rename packages/vuetify/src/{components => labs}/VDataTable/__tests__/__snapshots__/VSimpleTable.spec.ts.snap (100%)
 rename packages/vuetify/src/{components => labs}/VDataTable/__tests__/__snapshots__/VVirtualTable.spec.ts.snap (100%)
 create mode 100644 packages/vuetify/src/labs/VDataTable/__tests__/sort.spec.ts
 create mode 100644 packages/vuetify/src/labs/VDataTable/_variables.scss
 create mode 100644 packages/vuetify/src/labs/VDataTable/composables/expand.ts
 create mode 100644 packages/vuetify/src/labs/VDataTable/composables/group.ts
 create mode 100644 packages/vuetify/src/labs/VDataTable/composables/headers.ts
 create mode 100644 packages/vuetify/src/labs/VDataTable/composables/items.ts
 create mode 100644 packages/vuetify/src/labs/VDataTable/composables/options.ts
 create mode 100644 packages/vuetify/src/labs/VDataTable/composables/paginate.ts
 create mode 100644 packages/vuetify/src/labs/VDataTable/composables/select.ts
 create mode 100644 packages/vuetify/src/labs/VDataTable/composables/sort.ts
 create mode 100644 packages/vuetify/src/labs/VDataTable/composables/virtual.ts
 create mode 100644 packages/vuetify/src/labs/VDataTable/index.ts
 create mode 100644 packages/vuetify/src/labs/VDataTable/types.ts

diff --git a/packages/api-generator/src/types.ts b/packages/api-generator/src/types.ts
index 1450787b868..e22569d9da2 100644
--- a/packages/api-generator/src/types.ts
+++ b/packages/api-generator/src/types.ts
@@ -243,6 +243,7 @@ const allowedRefs = [
   'SelectStrategyFn',
   'SubmitEventPromise',
   'ValidationRule',
+  'SortItem',
 ]
 
 function formatDefinition (definition: Definition) {
diff --git a/packages/docs/src/components/app/list/List.vue b/packages/docs/src/components/app/list/List.vue
index 58b94b870c5..b2212d0739b 100644
--- a/packages/docs/src/components/app/list/List.vue
+++ b/packages/docs/src/components/app/list/List.vue
@@ -55,6 +55,7 @@
     divider?: boolean
     to?: RouteLocationRaw
     href?: string
+    subfolder?: boolean
   }
 
   function generateApiItems (locale: string) {
@@ -88,9 +89,10 @@
         type: 'subheader',
       }
     } else if (item.items) {
+      const p = item.subfolder ? `${item.subfolder}/${item.title}` : path
       return {
         title: t(item.title!),
-        children: item.items.map(item => generateListItem(item, path, locale, t)),
+        children: item.items.map(item => generateListItem(item, p, locale, t)),
       }
     }
 
diff --git a/packages/docs/src/components/examples/Example.vue b/packages/docs/src/components/examples/Example.vue
index b00fa74f2aa..305b92b6ce2 100644
--- a/packages/docs/src/components/examples/Example.vue
+++ b/packages/docs/src/components/examples/Example.vue
@@ -77,7 +77,7 @@
           class="pa-4 rounded-b"
           with-background
         >
-          <component :is="ExampleComponent" v-if="isLoaded" />
+          <component :is="ExampleComponent" v-if="isLoaded" :file="file" />
         </v-theme-provider>
       </div>
     </v-sheet>
diff --git a/packages/docs/src/components/examples/ExampleMissing.vue b/packages/docs/src/components/examples/ExampleMissing.vue
index 860b09ae283..64d2f69cf5b 100644
--- a/packages/docs/src/components/examples/ExampleMissing.vue
+++ b/packages/docs/src/components/examples/ExampleMissing.vue
@@ -1,12 +1,21 @@
 <template>
-  <app-md
+  <app-markdown
     class="v-example-missing text-center"
-    v-text="parent.$t('missing', data.attrs)"
+    v-text="t('missing', { file })"
   />
 </template>
 
 <script setup>
-  //
+  import { useI18n } from 'vue-i18n'
+
+  defineProps({
+    file: {
+      type: String,
+      required: true,
+    },
+  })
+
+  const { t } = useI18n()
 </script>
 
 <style lang="sass">
diff --git a/packages/docs/src/data/nav-alpha.json b/packages/docs/src/data/nav-alpha.json
index 1239d5cd626..8c335d0d9ec 100644
--- a/packages/docs/src/data/nav-alpha.json
+++ b/packages/docs/src/data/nav-alpha.json
@@ -191,7 +191,23 @@
     "inactiveIcon": "mdi-beaker-outline",
     "activeIcon": "mdi-beaker",
     "items": [
-      "introduction"
+      "introduction",
+      {
+        "title": "data-tables",
+        "subfolder": "components",
+        "activeIcon": "",
+        "inactiveIcon": "",
+        "items": [
+          "basics",
+          "headers",
+          "sorting",
+          "pagination",
+          "filtering",
+          "grouping",
+          "virtual-tables",
+          "server-side-tables"
+        ]
+      }
     ]
   },
   {
diff --git a/packages/docs/src/data/page-to-api.json b/packages/docs/src/data/page-to-api.json
index af33a419689..fb3c383a308 100644
--- a/packages/docs/src/data/page-to-api.json
+++ b/packages/docs/src/data/page-to-api.json
@@ -62,10 +62,8 @@
   ],
   "components/data-tables": [
     "v-data-table",
-    "v-data-table-header",
-    "v-data-footer",
-    "v-edit-dialog",
-    "v-simple-checkbox"
+    "v-data-table-server",
+    "v-data-table-virtual"
   ],
   "components/date-pickers-month": ["v-date-picker"],
   "components/date-pickers": ["v-date-picker"],
diff --git a/packages/docs/src/examples/v-data-iterator/misc-filter.vue b/packages/docs/src/examples/v-data-iterator/misc-filter.vue
index e444798a960..d4686e28bf0 100644
--- a/packages/docs/src/examples/v-data-iterator/misc-filter.vue
+++ b/packages/docs/src/examples/v-data-iterator/misc-filter.vue
@@ -5,8 +5,7 @@
       v-model:page="page"
       :items="items"
       :search="search"
-      :sort-by="sortBy.toLowerCase()"
-      :sort-desc="sortDesc"
+      :sort-by="sortBy"
       hide-default-footer
     >
       <template v-slot:header>
@@ -172,7 +171,7 @@
         sortDesc: false,
         page: 1,
         itemsPerPage: 4,
-        sortBy: 'name',
+        sortBy: [{ key: 'name', order: 'asc' }],
         keys: [
           'Name',
           'Calories',
diff --git a/packages/docs/src/examples/v-data-iterator/usage.vue b/packages/docs/src/examples/v-data-iterator/usage.vue
index 2b508552248..15b57e93542 100644
--- a/packages/docs/src/examples/v-data-iterator/usage.vue
+++ b/packages/docs/src/examples/v-data-iterator/usage.vue
@@ -6,8 +6,7 @@
       :items="items"
       :page="page"
       :search="search"
-      :sort-by="sortBy.toLowerCase()"
-      :sort-desc="sortDesc"
+      :sort-by="sortBy"
       v-bind="$attrs"
     >
       <template v-slot:header>
@@ -28,7 +27,7 @@
           <template v-if="$vuetify.breakpoint.mdAndUp">
             <v-spacer></v-spacer>
             <v-select
-              v-model="sortBy"
+              v-model="sortKey"
               class="mx-2"
               flat
               solo-inverted
@@ -164,10 +163,10 @@
     data: () => ({
       itemsPerPageOptions: [4, 8, 12],
       search: '',
+      sortKey: 'name',
       sortDesc: false,
       page: 1,
       itemsPerPage: 4,
-      sortBy: 'name',
       keys: [
         'Name',
         'Calories',
@@ -296,5 +295,11 @@
       },
       tabs: [],
     }),
+
+    computed: {
+      sortBy () {
+        return [{ key: this.sortKey, order: this.sortDesc ? 'desc' : 'asc' }]
+      },
+    },
   }
 </script>
diff --git a/packages/docs/src/examples/v-data-table/misc-crud.vue b/packages/docs/src/examples/v-data-table/misc-crud.vue
index dcf52fdda60..d4f9670e4c1 100644
--- a/packages/docs/src/examples/v-data-table/misc-crud.vue
+++ b/packages/docs/src/examples/v-data-table/misc-crud.vue
@@ -2,7 +2,7 @@
   <v-data-table
     :headers="headers"
     :items="desserts"
-    sort-by="calories"
+    :sort-by="[{ key: 'calories', order: 'asc' }]"
     class="elevation-1"
   >
     <template v-slot:top>
@@ -20,13 +20,12 @@
           v-model="dialog"
           max-width="500px"
         >
-          <template v-slot:activator="{ on, attrs }">
+          <template v-slot:activator="{ props }">
             <v-btn
               color="primary"
               dark
               class="mb-2"
-              v-bind="attrs"
-              v-on="on"
+              v-bind="props"
             >
               New Item
             </v-btn>
@@ -129,13 +128,13 @@
       <v-icon
         size="small"
         class="mr-2"
-        @click="editItem(item)"
+        @click="editItem(item.raw)"
       >
         mdi-pencil
       </v-icon>
       <v-icon
         size="small"
-        @click="deleteItem(item)"
+        @click="deleteItem(item.raw)"
       >
         mdi-delete
       </v-icon>
@@ -158,16 +157,16 @@
       dialogDelete: false,
       headers: [
         {
-          text: 'Dessert (100g serving)',
+          title: 'Dessert (100g serving)',
           align: 'start',
           sortable: false,
-          value: 'name',
+          key: 'name',
         },
-        { text: 'Calories', value: 'calories' },
-        { text: 'Fat (g)', value: 'fat' },
-        { text: 'Carbs (g)', value: 'carbs' },
-        { text: 'Protein (g)', value: 'protein' },
-        { text: 'Actions', value: 'actions', sortable: false },
+        { title: 'Calories', key: 'calories' },
+        { title: 'Fat (g)', key: 'fat' },
+        { title: 'Carbs (g)', key: 'carbs' },
+        { title: 'Protein (g)', key: 'protein' },
+        { title: 'Actions', key: 'actions', sortable: false },
       ],
       desserts: [],
       editedIndex: -1,
diff --git a/packages/docs/src/examples/v-data-table/misc-expand.vue b/packages/docs/src/examples/v-data-table/misc-expand.vue
index ee60673f205..6b02aaddcbb 100644
--- a/packages/docs/src/examples/v-data-table/misc-expand.vue
+++ b/packages/docs/src/examples/v-data-table/misc-expand.vue
@@ -1,29 +1,23 @@
-<!-- eslint-disable vue/no-unused-vars -->
 <template>
   <v-data-table
     v-model:expanded="expanded"
     :headers="dessertHeaders"
     :items="desserts"
-    :single-expand="singleExpand"
-    item-key="name"
+    item-value="name"
     show-expand
     class="elevation-1"
   >
     <template v-slot:top>
       <v-toolbar flat>
         <v-toolbar-title>Expandable Table</v-toolbar-title>
-        <v-spacer></v-spacer>
-        <v-switch
-          v-model="singleExpand"
-          label="Single expand"
-          class="mt-2"
-        ></v-switch>
       </v-toolbar>
     </template>
-    <template v-slot:expanded-item="{ headers, item }">
-      <td :colspan="headers.length">
-        More info about {{ item.name }}
-      </td>
+    <template v-slot:expanded-row="{ columns, item }">
+      <tr>
+        <td :colspan="columns.length">
+          More info about {{ item.raw.name }}
+        </td>
+      </tr>
     </template>
   </v-data-table>
 </template>
@@ -36,17 +30,17 @@
         singleExpand: false,
         dessertHeaders: [
           {
-            text: 'Dessert (100g serving)',
+            title: 'Dessert (100g serving)',
             align: 'start',
             sortable: false,
-            value: 'name',
+            key: 'name',
           },
-          { text: 'Calories', value: 'calories' },
-          { text: 'Fat (g)', value: 'fat' },
-          { text: 'Carbs (g)', value: 'carbs' },
-          { text: 'Protein (g)', value: 'protein' },
-          { text: 'Iron (%)', value: 'iron' },
-          { text: '', value: 'data-table-expand' },
+          { title: 'Calories', key: 'calories' },
+          { title: 'Fat (g)', key: 'fat' },
+          { title: 'Carbs (g)', key: 'carbs' },
+          { title: 'Protein (g)', key: 'protein' },
+          { title: 'Iron (%)', key: 'iron' },
+          { title: '', key: 'data-table-expand' },
         ],
         desserts: [
           {
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 8a4dcc65710..0f983115860 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
@@ -1,50 +1,55 @@
 <template>
-  <div>
-    <v-data-table
-      v-model:page="page"
-      :headers="headers"
-      :items="desserts"
-      :items-per-page="itemsPerPage"
-      hide-default-footer
-      class="elevation-1"
-      @page-count="pageCount = $event"
-    ></v-data-table>
-    <div class="text-center pt-2">
-      <v-pagination
-        v-model="page"
-        :length="pageCount"
-      ></v-pagination>
-      <v-text-field
-        :model-value="itemsPerPage"
-        label="Items per page"
-        type="number"
-        min="-1"
-        max="15"
-        @update:model-value="itemsPerPage = parseInt($event, 10)"
-      ></v-text-field>
-    </div>
-  </div>
+  <v-data-table
+    v-model:page="page"
+    :headers="headers"
+    :items="desserts"
+    :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"
+        ></v-pagination>
+        <v-text-field
+          :model-value="itemsPerPage"
+          class="pa-2"
+          label="Items per page"
+          type="number"
+          min="-1"
+          max="15"
+          hide-details
+          @update:model-value="itemsPerPage = parseInt($event, 10)"
+        ></v-text-field>
+      </div>
+    </template>
+  </v-data-table>
 </template>
 
 <script>
   export default {
     data () {
       return {
+        options: {
+          pageCount: 1,
+        },
         page: 1,
-        pageCount: 0,
-        itemsPerPage: 10,
+        itemsPerPage: 5,
         headers: [
           {
-            text: 'Dessert (100g serving)',
             align: 'start',
+            key: 'name',
             sortable: false,
-            value: 'name',
+            title: 'Dessert (100g serving)',
           },
-          { text: 'Calories', value: 'calories' },
-          { text: 'Fat (g)', value: 'fat' },
-          { text: 'Carbs (g)', value: 'carbs' },
-          { text: 'Protein (g)', value: 'protein' },
-          { text: 'Iron (%)', value: 'iron' },
+          { title: 'Calories', key: 'calories' },
+          { title: 'Fat (g)', key: 'fat' },
+          { title: 'Carbs (g)', key: 'carbs' },
+          { title: 'Protein (g)', key: 'protein' },
+          { title: 'Iron (%)', key: 'iron' },
         ],
         desserts: [
           {
diff --git a/packages/docs/src/examples/v-data-table/misc-external-sort.vue b/packages/docs/src/examples/v-data-table/misc-external-sort.vue
index 58b47a76296..f00087f1c7d 100644
--- a/packages/docs/src/examples/v-data-table/misc-external-sort.vue
+++ b/packages/docs/src/examples/v-data-table/misc-external-sort.vue
@@ -2,7 +2,6 @@
   <div>
     <v-data-table
       v-model:sort-by="sortBy"
-      v-model:sort-desc="sortDesc"
       :headers="headers"
       :items="desserts"
       class="elevation-1"
@@ -29,19 +28,18 @@
   export default {
     data () {
       return {
-        sortBy: 'fat',
-        sortDesc: false,
+        sortBy: [{ key: 'fat', order: 'asc' }],
         headers: [
           {
-            text: 'Dessert (100g serving)',
+            title: 'Dessert (100g serving)',
             align: 'start',
-            value: 'name',
+            key: 'name',
           },
-          { text: 'Calories', value: 'calories' },
-          { text: 'Fat (g)', value: 'fat' },
-          { text: 'Carbs (g)', value: 'carbs' },
-          { text: 'Protein (g)', value: 'protein' },
-          { text: 'Iron (%)', value: 'iron' },
+          { title: 'Calories', key: 'calories' },
+          { title: 'Fat (g)', key: 'fat' },
+          { title: 'Carbs (g)', key: 'carbs' },
+          { title: 'Protein (g)', key: 'protein' },
+          { title: 'Iron (%)', key: 'iron' },
         ],
         desserts: [
           {
@@ -129,12 +127,12 @@
     },
     methods: {
       toggleOrder () {
-        this.sortDesc = !this.sortDesc
+        this.sortBy = [{ key: this.sortBy[0].key, order: this.sortBy[0].order === 'asc' ? 'desc' : 'asc' }]
       },
       nextSort () {
-        let index = this.headers.findIndex(h => h.value === this.sortBy)
+        let index = this.headers.findIndex(h => h.key === this.sortBy[0].key)
         index = (index + 1) % this.headers.length
-        this.sortBy = this.headers[index].value
+        this.sortBy = [{ key: this.headers[index].key, order: 'asc' }]
       },
     },
   }
diff --git a/packages/docs/src/examples/v-data-table/misc-server-side-paginate-and-sort.vue b/packages/docs/src/examples/v-data-table/misc-server-side-paginate-and-sort.vue
index 622ece96bfe..96ef3a26f8e 100644
--- a/packages/docs/src/examples/v-data-table/misc-server-side-paginate-and-sort.vue
+++ b/packages/docs/src/examples/v-data-table/misc-server-side-paginate-and-sort.vue
@@ -1,13 +1,21 @@
 <template>
   <div>
-    <v-data-table
-      v-model:options="options"
+    <v-data-table-server
       :headers="headers"
       :items="desserts"
-      :server-items-length="totalDesserts"
+      :items-length="totalDesserts"
       :loading="loading"
+      :items-per-page="2"
+      item-value="name"
+      show-select
+      show-expand
       class="elevation-1"
-    ></v-data-table>
+      @update:options="options = $event"
+    >
+      <template v-slot:expanded-row>
+        This is an expanded row
+      </template>
+    </v-data-table-server>
   </div>
 </template>
 
@@ -56,17 +64,17 @@
        */
       fakeApiCall () {
         return new Promise((resolve, reject) => {
-          const { sortBy, sortDesc, page, itemsPerPage } = this.options
+          const { sortBy = [], page, itemsPerPage } = this.options
 
           let items = this.getDesserts()
           const total = items.length
 
-          if (sortBy.length === 1 && sortDesc.length === 1) {
+          if (sortBy.length) {
             items = items.sort((a, b) => {
-              const sortA = a[sortBy[0]]
-              const sortB = b[sortBy[0]]
+              const sortA = a[sortBy[0].key]
+              const sortB = b[sortBy[0].key]
 
-              if (sortDesc[0]) {
+              if (sortBy[0].order) {
                 if (sortA < sortB) return 1
                 if (sortA > sortB) return -1
                 return 0
diff --git a/packages/docs/src/examples/v-data-table/prop-custom-filter.vue b/packages/docs/src/examples/v-data-table/prop-custom-filter.vue
index 8466e06f5b9..874ce38bebe 100644
--- a/packages/docs/src/examples/v-data-table/prop-custom-filter.vue
+++ b/packages/docs/src/examples/v-data-table/prop-custom-filter.vue
@@ -1,158 +1,137 @@
 <template>
-  <div>
-    <v-data-table
-      :headers="headers"
-      :items="desserts"
-      item-key="name"
-      class="elevation-1"
-      :search="search"
-      :custom-filter="filterOnlyCapsText"
-    >
-      <template v-slot:top>
-        <v-text-field
-          v-model="search"
-          label="Search (UPPER CASE ONLY)"
-          class="mx-4"
-        ></v-text-field>
-      </template>
-      <template v-slot:body.append>
-        <tr>
-          <td></td>
-          <td>
-            <v-text-field
-              v-model="calories"
-              type="number"
-              label="Less than"
-            ></v-text-field>
-          </td>
-          <td colspan="4"></td>
-        </tr>
-      </template>
-    </v-data-table>
-  </div>
+  <v-data-table
+    :custom-filter="filterOnlyCapsText"
+    :headers="headers"
+    :items="desserts"
+    :search="search"
+    class="elevation-1"
+    item-value="name"
+  >
+    <template v-slot:top>
+      <v-text-field
+        v-model="search"
+        label="Search (UPPER CASE ONLY)"
+        class="pa-4"
+      ></v-text-field>
+    </template>
+  </v-data-table>
 </template>
 
 <script>
   export default {
-    data () {
-      return {
-        search: '',
-        calories: '',
-        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%',
-          },
-        ],
-      }
-    },
+    data: () => ({
+      search: '',
+      calories: '',
+      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%',
+        },
+      ],
+    }),
     computed: {
       headers () {
         return [
           {
-            text: 'Dessert (100g serving)',
+            title: 'Dessert (100g serving)',
             align: 'start',
             sortable: false,
-            value: 'name',
+            key: 'name',
           },
           {
-            text: 'Calories',
-            value: 'calories',
-            filter: value => {
-              if (!this.calories) return true
-
-              return value < parseInt(this.calories)
-            },
+            title: 'Calories',
+            align: 'end',
+            key: 'calories',
           },
-          { text: 'Fat (g)', value: 'fat' },
-          { text: 'Carbs (g)', value: 'carbs' },
-          { text: 'Protein (g)', value: 'protein' },
-          { text: 'Iron (%)', value: 'iron' },
+          { 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' },
         ]
       },
     },
     methods: {
-      filterOnlyCapsText (value, search, item) {
+      filterOnlyCapsText (value, query, item) {
         return value != null &&
-          search != null &&
+          query != null &&
           typeof value === 'string' &&
-          value.toString().toLocaleUpperCase().indexOf(search) !== -1
+          value.toString().toLocaleUpperCase().indexOf(query) !== -1
       },
     },
   }
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 c039308280f..3e6417776b1 100644
--- a/packages/docs/src/examples/v-data-table/prop-dense.vue
+++ b/packages/docs/src/examples/v-data-table/prop-dense.vue
@@ -1,10 +1,10 @@
 <template>
   <v-data-table
-    dense
     :headers="headers"
     :items="desserts"
-    item-key="name"
     class="elevation-1"
+    density="compact"
+    item-key="name"
   ></v-data-table>
 </template>
 
@@ -95,16 +95,16 @@
       ],
       headers: [
         {
-          text: 'Dessert (100g serving)',
+          title: 'Dessert (100g serving)',
           align: 'start',
           sortable: false,
           value: 'name',
         },
-        { text: 'Calories', value: 'calories' },
-        { text: 'Fat (g)', value: 'fat' },
-        { text: 'Carbs (g)', value: 'carbs' },
-        { text: 'Protein (g)', value: 'protein' },
-        { text: 'Iron (%)', value: 'iron' },
+        { 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' },
       ],
     }),
   }
diff --git a/packages/docs/src/examples/v-data-table/prop-filterable.vue b/packages/docs/src/examples/v-data-table/prop-filterable.vue
index 1d30a02b127..237da2b345d 100644
--- a/packages/docs/src/examples/v-data-table/prop-filterable.vue
+++ b/packages/docs/src/examples/v-data-table/prop-filterable.vue
@@ -1,14 +1,16 @@
 <template>
   <v-card>
-    <v-card-title>
+    <v-card-title class="bg-primary pb-6">
       <v-text-field
         v-model="search"
-        append-icon="mdi-magnify"
+        prepend-icon="mdi-magnify"
         label="Search"
         single-line
         hide-details
+        variant="underlined"
       ></v-text-field>
     </v-card-title>
+
     <v-data-table
       :headers="headers"
       :items="desserts"
@@ -24,16 +26,15 @@
         search: '',
         headers: [
           {
-            text: 'Dessert (100g serving)',
+            title: 'Dessert (100g serving)',
             align: 'start',
-            filterable: false,
-            value: 'name',
+            key: 'name',
           },
-          { text: 'Calories', value: 'calories' },
-          { text: 'Fat (g)', value: 'fat' },
-          { text: 'Carbs (g)', value: 'carbs' },
-          { text: 'Protein (g)', value: 'protein' },
-          { text: 'Iron (%)', value: 'iron' },
+          { 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' },
         ],
         desserts: [
           {
diff --git a/packages/docs/src/examples/v-data-table/prop-footer-props.vue b/packages/docs/src/examples/v-data-table/prop-footer-props.vue
index 61248c3c7b0..bbfb10cc2ef 100644
--- a/packages/docs/src/examples/v-data-table/prop-footer-props.vue
+++ b/packages/docs/src/examples/v-data-table/prop-footer-props.vue
@@ -1,10 +1,5 @@
 <template>
   <v-data-table
-    :headers="headers"
-    :items="desserts"
-    :items-per-page="5"
-    item-key="name"
-    class="elevation-1"
     :footer-props="{
       showFirstLastPage: true,
       firstIcon: 'mdi-arrow-collapse-left',
@@ -12,64 +7,67 @@
       prevIcon: 'mdi-minus',
       nextIcon: 'mdi-plus'
     }"
+    :headers="headers"
+    :items-per-page="5"
+    :items="desserts"
+    class="elevation-1"
+    item-key="name"
   ></v-data-table>
 </template>
 
 <script>
   export default {
-    data () {
-      return {
-        headers: [
-          {
-            text: 'Dessert (100g serving)',
-            align: 'start',
-            value: 'name',
-          },
-          { text: 'Category', value: 'category' },
-        ],
-        desserts: [
-          {
-            name: 'Frozen Yogurt',
-            category: 'Ice cream',
-          },
-          {
-            name: 'Ice cream sandwich',
-            category: 'Ice cream',
-          },
-          {
-            name: 'Eclair',
-            category: 'Cookie',
-          },
-          {
-            name: 'Cupcake',
-            category: 'Pastry',
-          },
-          {
-            name: 'Gingerbread',
-            category: 'Cookie',
-          },
-          {
-            name: 'Jelly bean',
-            category: 'Candy',
-          },
-          {
-            name: 'Lollipop',
-            category: 'Candy',
-          },
-          {
-            name: 'Honeycomb',
-            category: 'Toffee',
-          },
-          {
-            name: 'Donut',
-            category: 'Pastry',
-          },
-          {
-            name: 'KitKat',
-            category: 'Candy',
-          },
-        ],
-      }
-    },
+    data: () => ({
+      headers: [
+        {
+          title: 'Dessert (100g serving)',
+          align: 'start',
+          value: 'name',
+        },
+        { title: 'Category', value: 'category' },
+      ],
+      desserts: [
+        {
+          name: 'Frozen Yogurt',
+          category: 'Ice cream',
+        },
+        {
+          name: 'Ice cream sandwich',
+          category: 'Ice cream',
+        },
+        {
+          name: 'Eclair',
+          category: 'Cookie',
+        },
+        {
+          name: 'Cupcake',
+          category: 'Pastry',
+        },
+        {
+          name: 'Gingerbread',
+          category: 'Cookie',
+        },
+        {
+          name: 'Jelly bean',
+          category: 'Candy',
+        },
+        {
+          name: 'Lollipop',
+          category: 'Candy',
+        },
+        {
+          name: 'Honeycomb',
+          category: 'Toffee',
+        },
+        {
+          name: 'Donut',
+          category: 'Pastry',
+        },
+        {
+          name: 'KitKat',
+          category: 'Candy',
+        },
+      ],
+    }),
   }
 </script>
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 99b465fac46..0bc240bf3e4 100644
--- a/packages/docs/src/examples/v-data-table/prop-grouping.vue
+++ b/packages/docs/src/examples/v-data-table/prop-grouping.vue
@@ -1,82 +1,80 @@
 <template>
   <v-data-table
+    :group-by="groupBy"
     :headers="headers"
     :items="desserts"
-    item-key="name"
-    sort-by="name"
-    group-by="category"
+    :sort-by="sortBy"
     class="elevation-1"
-    show-group-by
+    item-value="name"
   ></v-data-table>
 </template>
 
 <script>
   export default {
-    data () {
-      return {
-        headers: [
-          {
-            text: 'Dessert (100g serving)',
-            align: 'start',
-            value: 'name',
-            groupable: false,
-          },
-          { text: 'Category', value: 'category', align: 'right' },
-          { text: 'Dairy', value: 'dairy', align: 'right' },
-        ],
-        desserts: [
-          {
-            name: 'Frozen Yogurt',
-            category: 'Ice cream',
-            dairy: 'Yes',
-          },
-          {
-            name: 'Ice cream sandwich',
-            category: 'Ice cream',
-            dairy: 'Yes',
-          },
-          {
-            name: 'Eclair',
-            category: 'Cookie',
-            dairy: 'Yes',
-          },
-          {
-            name: 'Cupcake',
-            category: 'Pastry',
-            dairy: 'Yes',
-          },
-          {
-            name: 'Gingerbread',
-            category: 'Cookie',
-            dairy: 'No',
-          },
-          {
-            name: 'Jelly bean',
-            category: 'Candy',
-            dairy: 'No',
-          },
-          {
-            name: 'Lollipop',
-            category: 'Candy',
-            dairy: 'No',
-          },
-          {
-            name: 'Honeycomb',
-            category: 'Toffee',
-            dairy: 'No',
-          },
-          {
-            name: 'Donut',
-            category: 'Pastry',
-            dairy: 'Yes',
-          },
-          {
-            name: 'KitKat',
-            category: 'Candy',
-            dairy: 'Yes',
-          },
-        ],
-      }
-    },
+    data: () => ({
+      sortBy: [{ key: 'name' }],
+      groupBy: [{ key: 'dairy' }],
+      headers: [
+        {
+          title: 'Dessert (100g serving)',
+          align: 'start',
+          value: 'name',
+          groupable: false,
+        },
+        { title: 'Category', value: 'category', align: 'end' },
+        { title: 'Dairy', value: 'dairy', align: 'end' },
+      ],
+      desserts: [
+        {
+          name: 'Frozen Yogurt',
+          category: 'Ice cream',
+          dairy: 'Yes',
+        },
+        {
+          name: 'Ice cream sandwich',
+          category: 'Ice cream',
+          dairy: 'Yes',
+        },
+        {
+          name: 'Eclair',
+          category: 'Cookie',
+          dairy: 'Yes',
+        },
+        {
+          name: 'Cupcake',
+          category: 'Pastry',
+          dairy: 'Yes',
+        },
+        {
+          name: 'Gingerbread',
+          category: 'Cookie',
+          dairy: 'No',
+        },
+        {
+          name: 'Jelly bean',
+          category: 'Candy',
+          dairy: 'No',
+        },
+        {
+          name: 'Lollipop',
+          category: 'Candy',
+          dairy: 'No',
+        },
+        {
+          name: 'Honeycomb',
+          category: 'Toffee',
+          dairy: 'No',
+        },
+        {
+          name: 'Donut',
+          category: 'Pastry',
+          dairy: 'Yes',
+        },
+        {
+          name: 'KitKat',
+          category: 'Candy',
+        },
+      ],
+    }),
   }
 </script>
diff --git a/packages/docs/src/examples/v-data-table/prop-hide-header-footer.vue b/packages/docs/src/examples/v-data-table/prop-hide-header-footer.vue
index b5deab8fb83..071dc00f34f 100644
--- a/packages/docs/src/examples/v-data-table/prop-hide-header-footer.vue
+++ b/packages/docs/src/examples/v-data-table/prop-hide-header-footer.vue
@@ -10,103 +10,101 @@
 
 <script>
   export default {
-    data () {
-      return {
-        headers: [
-          {
-            text: 'Dessert (100g serving)',
-            align: 'start',
-            value: 'name',
-          },
-          { text: 'Calories', value: 'calories' },
-          { text: 'Fat (g)', value: 'fat' },
-          { text: 'Carbs (g)', value: 'carbs' },
-          { text: 'Protein (g)', value: 'protein' },
-          { text: 'Iron (%)', value: 'iron' },
-        ],
-        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%',
-          },
-        ],
-      }
-    },
+    data: () => ({
+      headers: [
+        {
+          title: 'Dessert (100g serving)',
+          align: 'start',
+          key: 'name',
+        },
+        { 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' },
+      ],
+      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%',
+        },
+      ],
+    }),
   }
 </script>
diff --git a/packages/docs/src/examples/v-data-table/prop-loading.vue b/packages/docs/src/examples/v-data-table/prop-loading.vue
index 3d89697fd0e..5c9edd0124a 100644
--- a/packages/docs/src/examples/v-data-table/prop-loading.vue
+++ b/packages/docs/src/examples/v-data-table/prop-loading.vue
@@ -1,8 +1,8 @@
 <template>
-  <v-data-table
+  <v-data-table-server
     item-key="name"
     class="elevation-1"
     loading
     loading-text="Loading... Please wait"
-  ></v-data-table>
+  ></v-data-table-server>
 </template>
diff --git a/packages/docs/src/examples/v-data-table/prop-multi-sort.vue b/packages/docs/src/examples/v-data-table/prop-multi-sort.vue
index 61448d2bf5d..751b8a08a56 100644
--- a/packages/docs/src/examples/v-data-table/prop-multi-sort.vue
+++ b/packages/docs/src/examples/v-data-table/prop-multi-sort.vue
@@ -2,8 +2,7 @@
   <v-data-table
     :headers="headers"
     :items="desserts"
-    :sort-by="['calories', 'fat']"
-    :sort-desc="[false, true]"
+    :sort-by="[{ key: 'calories', order: 'asc' }, { key: 'fat', order: 'desc' }]"
     multi-sort
     class="elevation-1"
   ></v-data-table>
@@ -15,16 +14,16 @@
       return {
         headers: [
           {
-            text: 'Dessert (100g serving)',
+            title: 'Dessert (100g serving)',
             align: 'start',
             sortable: false,
-            value: 'name',
+            key: 'name',
           },
-          { text: 'Calories', value: 'calories' },
-          { text: 'Fat (g)', value: 'fat' },
-          { text: 'Carbs (g)', value: 'carbs' },
-          { text: 'Protein (g)', value: 'protein' },
-          { text: 'Iron (%)', value: 'iron' },
+          { title: 'Calories', key: 'calories' },
+          { title: 'Fat (g)', key: 'fat' },
+          { title: 'Carbs (g)', key: 'carbs' },
+          { title: 'Protein (g)', key: 'protein' },
+          { title: 'Iron (%)', key: 'iron' },
         ],
         desserts: [
           {
diff --git a/packages/docs/src/examples/v-data-table/prop-row-selection.vue b/packages/docs/src/examples/v-data-table/prop-row-selection.vue
index e84a5e7084e..5c4b59cee09 100644
--- a/packages/docs/src/examples/v-data-table/prop-row-selection.vue
+++ b/packages/docs/src/examples/v-data-table/prop-row-selection.vue
@@ -3,39 +3,29 @@
     v-model="selected"
     :headers="headers"
     :items="desserts"
-    :single-select="singleSelect"
-    item-key="name"
+    item-value="name"
     show-select
     class="elevation-1"
-  >
-    <template v-slot:top>
-      <v-switch
-        v-model="singleSelect"
-        label="Single select"
-        class="pa-3"
-      ></v-switch>
-    </template>
-  </v-data-table>
+  ></v-data-table>
 </template>
 
 <script>
   export default {
     data () {
       return {
-        singleSelect: false,
         selected: [],
         headers: [
           {
-            text: 'Dessert (100g serving)',
+            title: 'Dessert (100g serving)',
             align: 'start',
             sortable: false,
-            value: 'name',
+            key: 'name',
           },
-          { text: 'Calories', value: 'calories' },
-          { text: 'Fat (g)', value: 'fat' },
-          { text: 'Carbs (g)', value: 'carbs' },
-          { text: 'Protein (g)', value: 'protein' },
-          { text: 'Iron (%)', value: 'iron' },
+          { title: 'Calories', key: 'calories' },
+          { title: 'Fat (g)', key: 'fat' },
+          { title: 'Carbs (g)', key: 'carbs' },
+          { title: 'Protein (g)', key: 'protein' },
+          { title: 'Iron (%)', key: 'iron' },
         ],
         desserts: [
           {
diff --git a/packages/docs/src/examples/v-data-table/prop-search.vue b/packages/docs/src/examples/v-data-table/prop-search.vue
index 33cf5b14799..dae1618c28e 100644
--- a/packages/docs/src/examples/v-data-table/prop-search.vue
+++ b/packages/docs/src/examples/v-data-table/prop-search.vue
@@ -26,16 +26,16 @@
         search: '',
         headers: [
           {
-            text: 'Dessert (100g serving)',
             align: 'start',
+            key: 'name',
             sortable: false,
-            value: 'name',
+            title: 'Dessert (100g serving)',
           },
-          { text: 'Calories', value: 'calories' },
-          { text: 'Fat (g)', value: 'fat' },
-          { text: 'Carbs (g)', value: 'carbs' },
-          { text: 'Protein (g)', value: 'protein' },
-          { text: 'Iron (%)', value: 'iron' },
+          { key: 'calories', title: 'Calories' },
+          { key: 'fat', title: 'Fat (g)' },
+          { key: 'carbs', title: 'Carbs (g)' },
+          { key: 'protein', title: 'Protein (g)' },
+          { key: 'iron', title: 'Iron (%)' },
         ],
         desserts: [
           {
diff --git a/packages/docs/src/examples/v-data-table/prop-sort-by.vue b/packages/docs/src/examples/v-data-table/prop-sort-by.vue
new file mode 100644
index 00000000000..721f55e4b09
--- /dev/null
+++ b/packages/docs/src/examples/v-data-table/prop-sort-by.vue
@@ -0,0 +1,116 @@
+<template>
+  <v-data-table
+    v-model:sort-by="sortBy"
+    :headers="headers"
+    :items="desserts"
+    class="elevation-1"
+  ></v-data-table>
+  <v-code class="mt-4">
+    <pre>{{ sortBy }}</pre>
+  </v-code>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        sortBy: [{ key: 'calories', order: 'asc' }],
+        headers: [
+          {
+            title: 'Dessert (100g serving)',
+            align: 'start',
+            sortable: false,
+            key: 'name',
+          },
+          { title: 'Calories', key: 'calories' },
+          { title: 'Fat (g)', key: 'fat' },
+          { title: 'Carbs (g)', key: 'carbs' },
+          { title: 'Protein (g)', key: 'protein' },
+          { title: 'Iron (%)', key: 'iron' },
+        ],
+        desserts: [
+          {
+            name: 'Frozen Yogurt',
+            calories: 200,
+            fat: 6.0,
+            carbs: 24,
+            protein: 4.0,
+            iron: '1%',
+          },
+          {
+            name: 'Ice cream sandwich',
+            calories: 200,
+            fat: 9.0,
+            carbs: 37,
+            protein: 4.3,
+            iron: '1%',
+          },
+          {
+            name: 'Eclair',
+            calories: 300,
+            fat: 16.0,
+            carbs: 23,
+            protein: 6.0,
+            iron: '7%',
+          },
+          {
+            name: 'Cupcake',
+            calories: 300,
+            fat: 3.7,
+            carbs: 67,
+            protein: 4.3,
+            iron: '8%',
+          },
+          {
+            name: 'Gingerbread',
+            calories: 400,
+            fat: 16.0,
+            carbs: 49,
+            protein: 3.9,
+            iron: '16%',
+          },
+          {
+            name: 'Jelly bean',
+            calories: 400,
+            fat: 0.0,
+            carbs: 94,
+            protein: 0.0,
+            iron: '0%',
+          },
+          {
+            name: 'Lollipop',
+            calories: 400,
+            fat: 0.2,
+            carbs: 98,
+            protein: 0,
+            iron: '2%',
+          },
+          {
+            name: 'Honeycomb',
+            calories: 400,
+            fat: 3.2,
+            carbs: 87,
+            protein: 6.5,
+            iron: '45%',
+          },
+          {
+            name: 'Donut',
+            calories: 500,
+            fat: 25.0,
+            carbs: 51,
+            protein: 4.9,
+            iron: '22%',
+          },
+          {
+            name: 'KitKat',
+            calories: 500,
+            fat: 26.0,
+            carbs: 65,
+            protein: 7,
+            iron: '6%',
+          },
+        ],
+      }
+    },
+  }
+</script>
diff --git a/packages/docs/src/examples/v-data-table/server.vue b/packages/docs/src/examples/v-data-table/server.vue
new file mode 100644
index 00000000000..189b38986f7
--- /dev/null
+++ b/packages/docs/src/examples/v-data-table/server.vue
@@ -0,0 +1,157 @@
+<template>
+  <v-data-table-server
+    v-model:items-per-page="itemsPerPage"
+    :headers="headers"
+    :items-length="totalItems"
+    :items="serverItems"
+    :loading="loading"
+    class="elevation-1"
+    item-title="name"
+    item-value="name"
+    @update:options="loadItems"
+  ></v-data-table-server>
+</template>
+
+<script>
+  const desserts = [
+    {
+      name: 'Frozen Yogurt',
+      calories: 159,
+      fat: 6.0,
+      carbs: 24,
+      protein: 4.0,
+      iron: '1',
+    },
+    {
+      name: 'Jelly bean',
+      calories: 375,
+      fat: 0.0,
+      carbs: 94,
+      protein: 0.0,
+      iron: '0',
+    },
+    {
+      name: 'KitKat',
+      calories: 518,
+      fat: 26.0,
+      carbs: 65,
+      protein: 7,
+      iron: '6',
+    },
+    {
+      name: 'Eclair',
+      calories: 262,
+      fat: 16.0,
+      carbs: 23,
+      protein: 6.0,
+      iron: '7',
+    },
+    {
+      name: 'Gingerbread',
+      calories: 356,
+      fat: 16.0,
+      carbs: 49,
+      protein: 3.9,
+      iron: '16',
+    },
+    {
+      name: 'Ice cream sandwich',
+      calories: 237,
+      fat: 9.0,
+      carbs: 37,
+      protein: 4.3,
+      iron: '1',
+    },
+    {
+      name: 'Lollipop',
+      calories: 392,
+      fat: 0.2,
+      carbs: 98,
+      protein: 0,
+      iron: '2',
+    },
+    {
+      name: 'Cupcake',
+      calories: 305,
+      fat: 3.7,
+      carbs: 67,
+      protein: 4.3,
+      iron: '8',
+    },
+    {
+      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',
+    },
+  ]
+
+  const FakeAPI = {
+    async fetch (page, itemsPerPage, sortBy) {
+      return new Promise(resolve => {
+        setTimeout(() => {
+          const start = (page - 1) * itemsPerPage
+          const end = start + itemsPerPage
+          const items = desserts.slice(start, end)
+
+          if (sortBy.length) {
+            const sortKey = sortBy[0].key
+            const sortOrder = sortBy[0].order
+            items.sort((a, b) => {
+              const aValue = a[sortKey]
+              const bValue = b[sortKey]
+              return sortOrder === 'desc' ? bValue - aValue : aValue - bValue
+            })
+          }
+
+          resolve({ items, total: desserts.length })
+        }, 500)
+      })
+    },
+  }
+
+  export default {
+    data: () => ({
+      itemsPerPage: 5,
+      headers: [
+        {
+          title: 'Dessert (100g serving)',
+          align: 'start',
+          sortable: false,
+          key: 'name',
+        },
+        { title: 'Calories', key: 'calories', align: 'end' },
+        { title: 'Fat (g)', key: 'fat', align: 'end' },
+        { title: 'Carbs (g)', key: 'carbs', align: 'end' },
+        { title: 'Protein (g)', key: 'protein', align: 'end' },
+        { title: 'Iron (%)', key: 'iron', align: 'end' },
+      ],
+      serverItems: [],
+      loading: true,
+      totalItems: 0,
+    }),
+    beforeMount () {
+      this.loadItems({ page: 1, itemsPerPage: 5, sortBy: [] })
+    },
+    methods: {
+      loadItems ({ page, itemsPerPage, sortBy }) {
+        this.loading = true
+        FakeAPI.fetch(page, itemsPerPage, sortBy).then(({ items, total }) => {
+          this.serverItems = items
+          this.totalItems = total
+          this.loading = false
+        })
+      },
+    },
+  }
+</script>
diff --git a/packages/docs/src/examples/v-data-table/slot-header.vue b/packages/docs/src/examples/v-data-table/slot-header.vue
index e0d847539cc..e37a0a44799 100644
--- a/packages/docs/src/examples/v-data-table/slot-header.vue
+++ b/packages/docs/src/examples/v-data-table/slot-header.vue
@@ -2,10 +2,11 @@
   <v-data-table
     :headers="headers"
     :items="desserts"
+    item-value="name"
     class="elevation-1"
   >
-    <template v-slot:header.name="{ header }">
-      {{ header.text.toUpperCase() }}
+    <template v-slot:column.name="{ column }">
+      {{ column.title.toUpperCase() }}
     </template>
   </v-data-table>
 </template>
@@ -15,15 +16,16 @@
     data: () => ({
       headers: [
         {
-          text: 'Dessert (100g serving)',
+          title: 'Dessert (100g serving)',
           align: 'start',
-          value: 'name',
+          key: 'name',
+          sortable: false,
         },
-        { text: 'Calories', value: 'calories' },
-        { text: 'Fat (g)', value: 'fat' },
-        { text: 'Carbs (g)', value: 'carbs' },
-        { text: 'Protein (g)', value: 'protein' },
-        { text: 'Iron (%)', value: 'iron' },
+        { title: 'Calories', key: 'calories' },
+        { title: 'Fat (g)', key: 'fat' },
+        { title: 'Carbs (g)', key: 'carbs' },
+        { title: 'Protein (g)', key: 'protein' },
+        { title: 'Iron (%)', key: 'iron' },
       ],
       desserts: [
         {
diff --git a/packages/docs/src/examples/v-data-table/slot-item.vue b/packages/docs/src/examples/v-data-table/slot-item.vue
index 86d5760cfc2..6d8dd589026 100644
--- a/packages/docs/src/examples/v-data-table/slot-item.vue
+++ b/packages/docs/src/examples/v-data-table/slot-item.vue
@@ -6,10 +6,10 @@
   >
     <template v-slot:item.calories="{ item }">
       <v-chip
-        :color="getColor(item.calories)"
+        :color="getColor(item.raw.calories)"
         dark
       >
-        {{ item.calories }}
+        {{ item.raw.calories }}
       </v-chip>
     </template>
   </v-data-table>
@@ -21,16 +21,16 @@
       return {
         headers: [
           {
-            text: 'Dessert (100g serving)',
+            title: 'Dessert (100g serving)',
             align: 'start',
             sortable: false,
-            value: 'name',
+            key: 'name',
           },
-          { text: 'Calories', value: 'calories' },
-          { text: 'Fat (g)', value: 'fat' },
-          { text: 'Carbs (g)', value: 'carbs' },
-          { text: 'Protein (g)', value: 'protein' },
-          { text: 'Iron (%)', value: 'iron' },
+          { title: 'Calories', key: 'calories' },
+          { title: 'Fat (g)', key: 'fat' },
+          { title: 'Carbs (g)', key: 'carbs' },
+          { title: 'Protein (g)', key: 'protein' },
+          { title: 'Iron (%)', key: 'iron' },
         ],
         desserts: [
           {
diff --git a/packages/docs/src/examples/v-data-table/slot-main.vue b/packages/docs/src/examples/v-data-table/slot-main.vue
index 56c4090cc65..189e2aea73b 100644
--- a/packages/docs/src/examples/v-data-table/slot-main.vue
+++ b/packages/docs/src/examples/v-data-table/slot-main.vue
@@ -25,8 +25,8 @@
       </template>
 
       <template
-        v-if="isEnabled('header.data-table-select')"
-        v-slot:header.data-table-select="{ on, props }"
+        v-if="isEnabled('column.data-table-select')"
+        v-slot:column.data-table-select="{ on, props }"
       >
         <v-checkbox-btn
           color="purple"
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 3df83ee8a7c..fc59bfb6fa5 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
@@ -1,95 +1,91 @@
 <template>
-  <div>
-    <v-data-table
-      :headers="headers"
-      :items="desserts"
-      class="elevation-1"
-    >
-      <template v-slot:item.glutenfree="{ item }">
-        <v-checkbox-btn
-          v-model="item.glutenfree"
-          disabled
-        ></v-checkbox-btn>
-      </template>
-    </v-data-table>
-  </div>
+  <v-data-table
+    :headers="headers"
+    :items="desserts"
+    class="elevation-1"
+  >
+    <template v-slot:item.glutenfree="{ item }">
+      <v-checkbox-btn
+        v-model="item.value.glutenfree"
+        disabled
+      ></v-checkbox-btn>
+    </template>
+  </v-data-table>
 </template>
 
 <script>
   export default {
-    data () {
-      return {
-        desserts: [
-          {
-            name: 'Frozen Yogurt',
-            calories: 159,
-            fat: 6.0,
-            carbs: 24,
-            protein: 4.0,
-            iron: '1%',
-            glutenfree: true,
-          },
-          {
-            name: 'Ice cream sandwich',
-            calories: 237,
-            fat: 9.0,
-            carbs: 37,
-            protein: 4.3,
-            iron: '1%',
-            glutenfree: false,
-          },
-          {
-            name: 'Eclair',
-            calories: 262,
-            fat: 16.0,
-            carbs: 23,
-            protein: 6.0,
-            iron: '7%',
-            glutenfree: false,
-          },
-          {
-            name: 'Jelly bean',
-            calories: 375,
-            fat: 0.0,
-            carbs: 94,
-            protein: 0.0,
-            iron: '0%',
-            glutenfree: true,
-          },
-          {
-            name: 'Lollipop',
-            calories: 392,
-            fat: 0.2,
-            carbs: 98,
-            protein: 0,
-            iron: '2%',
-            glutenfree: true,
-          },
-          {
-            name: 'KitKat',
-            calories: 518,
-            fat: 26.0,
-            carbs: 65,
-            protein: 7,
-            iron: '6%',
-            glutenfree: false,
-          },
-        ],
-        headers: [
-          {
-            text: 'Dessert (100g serving)',
-            align: 'start',
-            sortable: false,
-            value: 'name',
-          },
-          { text: 'Calories', value: 'calories' },
-          { text: 'Fat (g)', value: 'fat' },
-          { text: 'Carbs (g)', value: 'carbs' },
-          { text: 'Protein (g)', value: 'protein' },
-          { text: 'Iron (%)', value: 'iron' },
-          { text: 'Gluten-Free', value: 'glutenfree' },
-        ],
-      }
-    },
+    data: () => ({
+      headers: [
+        {
+          title: 'Dessert (100g serving)',
+          align: 'start',
+          sortable: false,
+          key: 'name',
+        },
+        { title: 'Calories', key: 'calories' },
+        { title: 'Fat (g)', key: 'fat' },
+        { title: 'Carbs (g)', key: 'carbs' },
+        { title: 'Protein (g)', key: 'protein' },
+        { title: 'Iron (%)', key: 'iron' },
+        { title: 'Gluten-Free', key: 'glutenfree' },
+      ],
+      desserts: [
+        {
+          name: 'Frozen Yogurt',
+          calories: 159,
+          fat: 6.0,
+          carbs: 24,
+          protein: 4.0,
+          iron: '1%',
+          glutenfree: true,
+        },
+        {
+          name: 'Ice cream sandwich',
+          calories: 237,
+          fat: 9.0,
+          carbs: 37,
+          protein: 4.3,
+          iron: '1%',
+          glutenfree: false,
+        },
+        {
+          name: 'Eclair',
+          calories: 262,
+          fat: 16.0,
+          carbs: 23,
+          protein: 6.0,
+          iron: '7%',
+          glutenfree: false,
+        },
+        {
+          name: 'Jelly bean',
+          calories: 375,
+          fat: 0.0,
+          carbs: 94,
+          protein: 0.0,
+          iron: '0%',
+          glutenfree: true,
+        },
+        {
+          name: 'Lollipop',
+          calories: 392,
+          fat: 0.2,
+          carbs: 98,
+          protein: 0,
+          iron: '2%',
+          glutenfree: true,
+        },
+        {
+          name: 'KitKat',
+          calories: 518,
+          fat: 26.0,
+          carbs: 65,
+          protein: 7,
+          iron: '6%',
+          glutenfree: false,
+        },
+      ],
+    }),
   }
 </script>
diff --git a/packages/docs/src/examples/v-data-table/usage.vue b/packages/docs/src/examples/v-data-table/usage.vue
index 4e589a4bc2c..8880805a48e 100644
--- a/packages/docs/src/examples/v-data-table/usage.vue
+++ b/packages/docs/src/examples/v-data-table/usage.vue
@@ -1,8 +1,9 @@
 <template>
   <v-data-table
+    v-model:items-per-page="itemsPerPage"
     :headers="headers"
     :items="desserts"
-    :items-per-page="5"
+    item-value="name"
     class="elevation-1"
   ></v-data-table>
 </template>
@@ -11,18 +12,19 @@
   export default {
     data () {
       return {
+        itemsPerPage: 5,
         headers: [
           {
-            text: 'Dessert (100g serving)',
+            title: 'Dessert (100g serving)',
             align: 'start',
             sortable: false,
-            value: 'name',
+            key: 'name',
           },
-          { text: 'Calories', value: 'calories' },
-          { text: 'Fat (g)', value: 'fat' },
-          { text: 'Carbs (g)', value: 'carbs' },
-          { text: 'Protein (g)', value: 'protein' },
-          { text: 'Iron (%)', value: 'iron' },
+          { 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' },
         ],
         desserts: [
           {
@@ -31,15 +33,23 @@
             fat: 6.0,
             carbs: 24,
             protein: 4.0,
-            iron: '1%',
+            iron: '1',
           },
           {
-            name: 'Ice cream sandwich',
-            calories: 237,
-            fat: 9.0,
-            carbs: 37,
-            protein: 4.3,
-            iron: '1%',
+            name: 'Jelly bean',
+            calories: 375,
+            fat: 0.0,
+            carbs: 94,
+            protein: 0.0,
+            iron: '0',
+          },
+          {
+            name: 'KitKat',
+            calories: 518,
+            fat: 26.0,
+            carbs: 65,
+            protein: 7,
+            iron: '6',
           },
           {
             name: 'Eclair',
@@ -47,15 +57,7 @@
             fat: 16.0,
             carbs: 23,
             protein: 6.0,
-            iron: '7%',
-          },
-          {
-            name: 'Cupcake',
-            calories: 305,
-            fat: 3.7,
-            carbs: 67,
-            protein: 4.3,
-            iron: '8%',
+            iron: '7',
           },
           {
             name: 'Gingerbread',
@@ -63,15 +65,15 @@
             fat: 16.0,
             carbs: 49,
             protein: 3.9,
-            iron: '16%',
+            iron: '16',
           },
           {
-            name: 'Jelly bean',
-            calories: 375,
-            fat: 0.0,
-            carbs: 94,
-            protein: 0.0,
-            iron: '0%',
+            name: 'Ice cream sandwich',
+            calories: 237,
+            fat: 9.0,
+            carbs: 37,
+            protein: 4.3,
+            iron: '1',
           },
           {
             name: 'Lollipop',
@@ -79,7 +81,15 @@
             fat: 0.2,
             carbs: 98,
             protein: 0,
-            iron: '2%',
+            iron: '2',
+          },
+          {
+            name: 'Cupcake',
+            calories: 305,
+            fat: 3.7,
+            carbs: 67,
+            protein: 4.3,
+            iron: '8',
           },
           {
             name: 'Honeycomb',
@@ -87,7 +97,7 @@
             fat: 3.2,
             carbs: 87,
             protein: 6.5,
-            iron: '45%',
+            iron: '45',
           },
           {
             name: 'Donut',
@@ -95,15 +105,7 @@
             fat: 25.0,
             carbs: 51,
             protein: 4.9,
-            iron: '22%',
-          },
-          {
-            name: 'KitKat',
-            calories: 518,
-            fat: 26.0,
-            carbs: 65,
-            protein: 7,
-            iron: '6%',
+            iron: '22',
           },
         ],
       }
diff --git a/packages/docs/src/examples/v-data-table/virtual.vue b/packages/docs/src/examples/v-data-table/virtual.vue
new file mode 100644
index 00000000000..f6ef69f6076
--- /dev/null
+++ b/packages/docs/src/examples/v-data-table/virtual.vue
@@ -0,0 +1,121 @@
+<template>
+  <v-data-table-virtual
+    :headers="headers"
+    :items="virtualDesserts"
+    class="elevation-1"
+    height="400"
+    item-value="name"
+  ></v-data-table-virtual>
+</template>
+
+<script>
+  export default {
+    data: () => ({
+      headers: [
+        {
+          title: 'Dessert (100g serving)',
+          align: 'start',
+          sortable: false,
+          key: 'name',
+        },
+        { 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' },
+      ],
+      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',
+        },
+      ],
+    }),
+    computed: {
+      virtualDesserts () {
+        return [...Array(10000).keys()].map(i => {
+          const dessert = { ...this.desserts[i % 10] }
+          dessert.name = `${dessert.name} #${i}`
+
+          return dessert
+        })
+      },
+    },
+  }
+</script>
diff --git a/packages/docs/src/examples/v-data-table/virtualized.vue b/packages/docs/src/examples/v-data-table/virtualized.vue
index 90f0553756f..7a8c04fd000 100644
--- a/packages/docs/src/examples/v-data-table/virtualized.vue
+++ b/packages/docs/src/examples/v-data-table/virtualized.vue
@@ -1,12 +1,12 @@
 <template>
   <v-data-table
     :headers="headers"
-    :items="items"
     :items-per-page="-1"
-    virtual-rows
-    hide-default-footer
-    height="500px"
+    :items="items"
     class="elevation-1"
+    height="500"
+    hide-default-footer
+    virtual-rows
   ></v-data-table>
 </template>
 
@@ -95,23 +95,21 @@
   ]
 
   export default {
-    data () {
-      return {
-        headers: [
-          {
-            text: 'Dessert (100g serving)',
-            align: 'start',
-            sortable: false,
-            value: 'name',
-          },
-          { text: 'Calories', value: 'calories' },
-          { text: 'Fat (g)', value: 'fat' },
-          { text: 'Carbs (g)', value: 'carbs' },
-          { text: 'Protein (g)', value: 'protein' },
-          { text: 'Iron (%)', value: 'iron' },
-        ],
-      }
-    },
+    data: () => ({
+      headers: [
+        {
+          title: 'Dessert (100g serving)',
+          align: 'start',
+          sortable: false,
+          key: 'name',
+        },
+        { title: 'Calories', key: 'calories' },
+        { title: 'Fat (g)', key: 'fat' },
+        { title: 'Carbs (g)', key: 'carbs' },
+        { title: 'Protein (g)', key: 'protein' },
+        { title: 'Iron (%)', key: 'iron' },
+      ],
+    }),
     computed: {
       items () {
         return [...new Array(100)].reduce(items => {
diff --git a/packages/docs/src/i18n/messages/en.json b/packages/docs/src/i18n/messages/en.json
index 17fdd295806..df07f2400f9 100644
--- a/packages/docs/src/i18n/messages/en.json
+++ b/packages/docs/src/i18n/messages/en.json
@@ -66,6 +66,7 @@
   "copyright": "Copyright {0}",
   "customization": "Customization",
   "dark": "Dark",
+  "data-tables": "Data tables",
   "desktop": "Desktop",
   "details": "Details",
   "device": "Device",
diff --git a/packages/docs/src/pages/en/components/data-tables.md b/packages/docs/src/pages/en/components/data-tables.md
deleted file mode 100644
index e1c3585a459..00000000000
--- a/packages/docs/src/pages/en/components/data-tables.md
+++ /dev/null
@@ -1,177 +0,0 @@
----
-disabled: true
-meta:
-  title: Data table component
-  description: The data table component is used for displaying tabular data in a way that is easy for users to scan. It includes sorting, searching, pagination and selection.
-  keywords: data tables, vuetify data table component, vue data table component
-related:
-  - /components/data-iterators/
-  - /components/simple-tables/
-  - /components/lists/
----
-
-# Data tables
-
-The `v-data-table` component is used for displaying tabular data. Features include sorting, searching, pagination, content-editing, and row selection.
-
-<entry />
-
-## Usage
-
-The standard data-table will by default render your data as simple rows.
-
-<example file="v-data-table/usage" />
-
-## API
-
-<api-inline />
-
-<!-- ## Sub-components
-
-### v-data-table-header
-
-v-data-table-header description
-
-### v-data-footer
-
-v-data-footer description
-
-### v-edit-dialog
-
-v-edit-dialog description
-
-### v-simple-checkbox
-
-v-simple-checkbox description -->
-
-## Examples
-
-### Props
-
-#### Custom filter
-
-You can override the default filtering used with **search** prop by supplying a function to the **custom-filter** prop. If you need to customize the filtering of a specific column, you can supply a function to the **filter** property on header items. The signature is `(value: any, search: string | null, item: any) => boolean`. This function will always be run even if **search** prop has not been provided. Thus you need to make sure to exit early with a value of `true` if filter should not be applied.
-
-<example file="v-data-table/prop-custom-filter" />
-
-#### Dense
-
-Using the **dense** prop you are able to give your data tables an alternate style.
-
-<example file="v-data-table/prop-dense" />
-
-#### Filterable
-
-You can easily disable specific columns from being included when searching through table rows by setting the property **filterable** to false on the header item(s). In the example below the dessert name column is no longer searchable.
-
-<example file="v-data-table/prop-filterable" />
-
-#### Footer props
-
-The `v-data-table` renders a default footer using the `v-data-footer` component. You can pass props to this component using **footer-props**.
-
-<example file="v-data-table/prop-footer-props" />
-
-#### Grouping
-
-Using the **group-by** and **group-desc** props you can group rows on an item property. The **show-group-by** prop will show a group button in the default header. You can use the **groupable** property on header items to disable the group button.
-
-<example file="v-data-table/prop-grouping" />
-
-#### Hide default header and footer
-
-You can apply the **hide-default-header** and **hide-default-footer** props to remove the default header and footer respectively.
-
-<example file="v-data-table/prop-hide-header-footer" />
-
-#### Loading
-
-You can use the **loading** prop to indicate that data in the table is currently loading. If there is no data in the table, a loading message will also be displayed. This message can be customized using the **loading-text** prop or the `loading` slot.
-
-<example file="v-data-table/prop-loading" />
-
-#### Multi sort
-
-Using the **multi-sort** prop will enable you to sort on multiple columns at the same time. When enabled, you can pass arrays to both **sort-by** and **sort-desc** to programmatically control the sorting, instead of single values.
-
-<example file="v-data-table/prop-multi-sort" />
-
-#### Row selection
-
-The **show-select** prop will render a checkbox in the default header to toggle all rows, and a checkbox for each default row. You can customize these with the slots `header.data-table-select` and `item.data-table-select` respectively. You can also switch between allowing multiple selected rows at the same time or just one with the **single-select** prop.
-
-<example file="v-data-table/prop-row-selection" />
-
-#### Search
-
-The data table exposes a **search** prop that allows you to filter your data.
-
-<example file="v-data-table/prop-search" />
-
-### Slots
-
-The `v-data-table` provides a large number of slots for customizing the table. This example showcases some of these slots and what you can do with each. It is important to note some slot (eg: `item`/`body`/`header`) will completely takes over the internal rendering of the component which will require you to re-implement functionalities such as selection and expansion. Some slots will override each other such as: `body` > `item` > `item.<name>` and `header`/`header.<name>`.
-
-<alert type="info">
-
-  Some slots such as `item.<name>` and `header.<name>` use modifiers to target more scoped slots. Eslint by default will throw errors when slots use modifiers. To disable these errors, add the following rule to your eslint configuration: `"vue/valid-v-slot": ["error", { "allowModifiers": true }]`.
-
-</alert>
-
-<example file="v-data-table/slot-main" />
-
-#### Header
-
-You can use the dynamic slots `header.<name>` to customize only certain columns. `<name>` is the name of the `value` property in the corresponding header item sent to **headers**.
-
-<example file="v-data-table/slot-header" />
-
-#### Item
-
-You can use the dynamic slots `item.<name>` to customize only certain columns. `<name>` is the name of the `value` property in the corresponding header item sent to **headers**. So to customize the calories column we're using the `item.calories` slot.
-
-<example file="v-data-table/slot-item" />
-
-#### Simple checkbox
-
-When wanting to use a checkbox component inside of a slot template in your data tables, use the `v-simple-checkbox` component rather than the `v-checkbox` component. The `v-simple-checkbox` component is used internally and will respect header alignment.
-
-<example file="v-data-table/slot-simple-checkbox" />
-
-### Misc
-
-#### CRUD Actions
-
-`v-data-table` with CRUD actions using a `v-dialog` component for editing each row
-
-<example file="v-data-table/misc-crud" />
-
-#### Edit dialog
-
-The `v-edit-dialog` component can be used for editing data directly within a `v-data-table`. You can block the closing of the `v-edit-dialog` when clicked outside by adding the **persistent** prop.
-
-<example file="v-data-table/misc-edit-dialog" />
-
-#### Expandable rows
-
-The **show-expand** prop will render an expand icon on each default row. You can customize this with the `item.data-table-expand` slot. The position of this slot can be customized by adding a column with `value: 'data-table-expand'` to the headers array. You can also switch between allowing multiple expanded rows at the same time or just one with the **single-expand** prop. The expanded rows are available on the synced prop `expanded.sync`. Row items require a unique key property for expansion to work. The default is `id`, but you can use the **item-key** prop to specify a different item property.
-
-<example file="v-data-table/misc-expand" />
-
-#### External pagination
-
-Pagination can be controlled externally by using the individual props, or by using the **options** prop. Remember that you must apply the **.sync** modifier.
-
-<example file="v-data-table/misc-external-paginate" />
-
-#### External sorting
-
-Sorting can also be controlled externally by using the individual props, or by using the the **options** prop. Remember that you must apply the **.sync** modifier.
-
-<example file="v-data-table/misc-external-sort" />
-
-#### Server-side paginate and sort
-
-If you're loading data already paginated and sorted from a backend, you can use the **server-items-length** prop. Defining this prop will disable the built-in sorting and pagination, and you will instead need to use the available events (`update:page`, `update:sortBy`, `update:options`, etc) to know when to request new pages from your backend. Use the **loading** prop to display a progress bar while fetching data.
-
-<example file="v-data-table/misc-server-side-paginate-and-sort" />
diff --git a/packages/docs/src/pages/en/components/data-tables/basics.md b/packages/docs/src/pages/en/components/data-tables/basics.md
new file mode 100644
index 00000000000..d45d0b12682
--- /dev/null
+++ b/packages/docs/src/pages/en/components/data-tables/basics.md
@@ -0,0 +1,120 @@
+---
+nav: Basics
+meta:
+  title: Data table component
+  description: The data table component is used for displaying tabular data in a way that is easy for users to scan. It includes sorting, searching, pagination and selection.
+  keywords: data tables, vuetify data table component, vue data table component
+related:
+  - /components/data-iterators/
+  - /components/tables/
+  - /components/lists/
+---
+
+# Data tables
+
+The `v-data-table` component is used for displaying tabular data. Features include sorting, searching, pagination, grouping, and row selection.
+
+<!-- <entry /> -->
+
+## Usage
+
+There are three variants of the data table available depending on your requirements.
+
+### v-data-table
+
+The standard data table presumes that the entire data set is available locally. Sorting, pagination, and filtering is supported and done internally by the component itself.
+
+<example file="v-data-table/usage" />
+
+### v-data-table-server
+
+This variant of the data table is meant to be used when the data set you are displaying comes directly from a server, and you don't want to load all rows at mount. Sorting, pagination, and filtering is supported, but none of it is handled by the component. Instead it is meant to be handled by the server.
+
+You can find more information and examples [here](/components/data-tables/server-side-tables).
+
+<example file="v-data-table/server" />
+
+### v-data-table-virtual
+
+The virtual variant of the data table relies, like the standard variant, on all data being available locally. But unlike the standard variant it uses virtualization to only render a small portion of the rows. This makes it well suited for display large data sets. It supports sorting and filtering, but not pagination.
+
+You can find more information and examples [here](/components/data-tables/virtual-tables).
+
+<example file="v-data-table/virtual" />
+
+## API
+
+| Component | Description |
+| - | - |
+| [v-data-table](/api/v-data-table/) | Primary Component |
+| [v-data-table-server](/api/v-data-table-server/) | Specialized Data-table for displaying results from a server |
+| [v-data-table-virtual](/api/v-data-table-virtual/) | Data-table with built in row virtualization |
+| [v-data-table-header](/api/v-data-table-header/) | Functional Component used to display Data-table headers |
+| [v-data-footer](/api/v-data-footer/) | Functional Component used to display Data-table headers |
+| [v-simple-checkbox](/api/v-simple-checkbox/) | Reusable lightweight [v-checkbox](/components/checkboxes) |
+
+## Examples
+
+### Props
+
+#### Density
+
+Using the **dense** prop you are able to give your data tables an alternate style.
+
+<example file="v-data-table/prop-dense" />
+
+<!-- #### Footer props
+
+The `v-data-table` renders a default footer using the `v-data-footer` component. You can pass props to this component using **footer-props**.
+
+<example file="v-data-table/prop-footer-props" /> -->
+
+<!-- #### Hide default header and footer
+
+You can apply the **hide-default-header** and **hide-default-footer** props to remove the default header and footer respectively.
+
+<example file="v-data-table/prop-hide-header-footer" /> -->
+
+#### Row selection
+
+The **show-select** prop will render a checkbox in the default header to toggle all rows, and a checkbox for each row. If you need to, you can render your own checkboxes using the `column.data-table-select` and `item.data-table-select` slots respectively.
+
+<!-- You can also switch between allowing multiple selected rows at the same time or just one with the **single-select** prop. -->
+
+<example file="v-data-table/prop-row-selection" />
+
+#### Item
+
+You can use the dynamic slots `item.<key>` to customize only certain columns. `<key>` is the name of the **key** property in header items sent to **headers**. So to customize the calories column we're using the `item.calories` slot.
+
+<example file="v-data-table/slot-item" />
+
+#### Simple checkbox
+
+When wanting to use a checkbox component inside of a slot template in your data tables, use the `v-checkbox-btn` component rather than the `v-checkbox` component. The `v-checkbox-btn` component is used internally and will respect header alignment.
+
+<example file="v-data-table/slot-simple-checkbox" />
+
+### Misc
+
+#### CRUD Actions
+
+`v-data-table` with CRUD actions using a `v-dialog` component for editing each row
+
+<example file="v-data-table/misc-crud" />
+
+<!-- #### Edit dialog
+
+The `v-edit-dialog` component can be used for editing data directly within a `v-data-table`. You can block the closing of the `v-edit-dialog` when clicked outside by adding the **persistent** prop.
+
+<example file="v-data-table/misc-edit-dialog" /> -->
+
+#### Expandable rows
+
+The **show-expand** prop will render an expand icon on each row. You can customize this with the `item.data-table-expand` slot. The position of this slot can be changed by adding a column with `key: 'data-table-expand'` to the headers array.
+
+Just like selection, row items require a unique property on each item for expansion to work. The default is `id`, but you can use the **item-value** prop to specify a different item property.
+
+<!-- You can also switch between allowing multiple expanded rows at the same time or just one with the **single-expand** prop. The expanded rows are available on the synced prop `expanded.sync`.  -->
+
+<example file="v-data-table/misc-expand" />
diff --git a/packages/docs/src/pages/en/components/data-tables/filtering.md b/packages/docs/src/pages/en/components/data-tables/filtering.md
new file mode 100644
index 00000000000..91d2e190055
--- /dev/null
+++ b/packages/docs/src/pages/en/components/data-tables/filtering.md
@@ -0,0 +1,40 @@
+---
+nav: Filtering
+meta:
+  title: Data table - Filtering
+  description: The data table component is used for displaying tabular data in a way that is easy for users to scan. It includes sorting, searching, pagination and selection.
+  keywords: data tables, vuetify data table component, vue data table component
+related:
+  - /components/data-tables/basics
+  - /components/tables/
+---
+
+# Data table - Filtering
+
+Lorem ipsum etc etc
+
+## Examples
+
+### Search
+
+The data table exposes a **search** prop that allows you to filter your data.
+
+<example file="v-data-table/prop-search" />
+
+<!-- ### Filterable
+
+You can easily disable specific columns from being included when searching through table rows by setting the property **filterable** to false on the header item(s). In the example below the dessert name column is no longer searchable.
+
+<example file="v-data-table/prop-filterable" /> -->
+
+### Custom filter
+
+You can override the default filtering used with the **search** prop by supplying a function to the **custom-filter** prop. You can see the signature of the function below.
+
+```ts
+(value: string, query: string, item?: any) => boolean | number | [number, number] | [number, number][]
+```
+
+In the example below, the custom filter will only match inputs that are in completely in upper case.
+
+<example file="v-data-table/prop-custom-filter" />
diff --git a/packages/docs/src/pages/en/components/data-tables/grouping.md b/packages/docs/src/pages/en/components/data-tables/grouping.md
new file mode 100644
index 00000000000..196d8b68f4a
--- /dev/null
+++ b/packages/docs/src/pages/en/components/data-tables/grouping.md
@@ -0,0 +1,26 @@
+---
+nav: Grouping
+meta:
+  title: Data table - Grouping
+  description: The data table component is used for displaying tabular data in a way that is easy for users to scan. It includes sorting, searching, pagination and selection.
+  keywords: data tables, vuetify data table component, vue data table component
+related:
+  - /components/data-tables/basics
+  - /components/tables/
+---
+
+# Data table - Grouping
+
+Data table has basic support for grouping rows by a column value.
+
+<v-alert type="info">
+  v-data-table-server does not currently support grouping rows
+</v-alert>
+
+## Examples
+
+### Group by
+
+Using the **group-by** prop you can group rows by one or more columns.
+
+<example file="v-data-table/prop-grouping" />
diff --git a/packages/docs/src/pages/en/components/data-tables/headers.md b/packages/docs/src/pages/en/components/data-tables/headers.md
new file mode 100644
index 00000000000..61698239989
--- /dev/null
+++ b/packages/docs/src/pages/en/components/data-tables/headers.md
@@ -0,0 +1,25 @@
+---
+nav: Headers
+meta:
+  title: Data table - Headers
+  description: The data table component is used for displaying tabular data in a way that is easy for users to scan. It includes sorting, searching, pagination and selection.
+  keywords: data tables, vuetify data table component, vue data table component
+related:
+  - /components/data-tables/basics
+  - /components/tables/
+---
+
+# Data table - Headers
+
+## TODO:
+
+- 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.
+
+## Examples
+
+### Column slot
+
+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.
+
+<example file="v-data-table/slot-header" />
diff --git a/packages/docs/src/pages/en/components/data-tables/pagination.md b/packages/docs/src/pages/en/components/data-tables/pagination.md
new file mode 100644
index 00000000000..7aee37f9344
--- /dev/null
+++ b/packages/docs/src/pages/en/components/data-tables/pagination.md
@@ -0,0 +1,22 @@
+---
+nav: Pagination
+meta:
+  title: Data table - Pagination
+  description: The data table component is used for displaying tabular data in a way that is easy for users to scan. It includes sorting, searching, pagination and selection.
+  keywords: data tables, vuetify data table component, vue data table component
+related:
+  - /components/data-tables/basics
+  - /components/tables/
+---
+
+# Data table - Pagination
+
+Lorem ipsum etc etc
+
+## Examples
+
+### External pagination
+
+Pagination can be controlled externally by using the individual props, or by using the **options** prop. Remember that you must apply the **.sync** modifier.
+
+<example file="v-data-table/misc-external-paginate" />
diff --git a/packages/docs/src/pages/en/components/data-tables/server-side-tables.md b/packages/docs/src/pages/en/components/data-tables/server-side-tables.md
new file mode 100644
index 00000000000..0916b866283
--- /dev/null
+++ b/packages/docs/src/pages/en/components/data-tables/server-side-tables.md
@@ -0,0 +1,28 @@
+---
+nav: Server side tables
+meta:
+  title: Data table - Server side tables
+  description: The data table component is used for displaying tabular data in a way that is easy for users to scan. It includes sorting, searching, pagination and selection.
+  keywords: data tables, vuetify data table component, vue data table component
+related:
+  - /components/data-tables/basics
+  - /components/tables/
+---
+
+# Data table - Server side tables
+
+Lorem ipsum etc etc
+
+## Examples
+
+### Server-side paginate and sort
+
+If you're loading data already paginated and sorted from a backend, you can use the **server-items-length** prop. Defining this prop will disable the built-in sorting and pagination, and you will instead need to use the available events (`update:page`, `update:sortBy`, `update:options`, etc) to know when to request new pages from your backend. Use the **loading** prop to display a progress bar while fetching data.
+
+<example file="v-data-table/misc-server-side-paginate-and-sort" />
+
+### Loading
+
+You can use the **loading** prop to indicate that data in the table is currently loading. If there is no data in the table, a loading message will also be displayed. This message can be customized using the **loading-text** prop or the `loading` slot.
+
+<example file="v-data-table/prop-loading" />
diff --git a/packages/docs/src/pages/en/components/data-tables/sorting.md b/packages/docs/src/pages/en/components/data-tables/sorting.md
new file mode 100644
index 00000000000..b233affb48e
--- /dev/null
+++ b/packages/docs/src/pages/en/components/data-tables/sorting.md
@@ -0,0 +1,32 @@
+---
+nav: Sorting
+meta:
+  title: Data table - Sorting
+  description: The data table component is used for displaying tabular data in a way that is easy for users to scan. It includes sorting, searching, pagination and selection.
+  keywords: data tables, vuetify data table component, vue data table component
+related:
+  - /components/data-tables/basics
+  - /components/tables/
+---
+
+# Data table - Sorting
+
+Lorem ipsum etc etc
+
+## Examples
+
+### Basic sorting
+
+The sorting of your table can be controlled by the **sort-by** prop. This prop takes an array of objects, where each object has a **key** and **order** property, describing how the table is to be sorted.
+
+The **key** corresponds to a column defined in the **headers** array, and **order** is either the string `'asc'` or `'desc'` indicating the order in which the items are sorted.
+
+Unless you are using the **multi-sort** prop seen below, this array will almost always just have a single object in it.
+
+<example file="v-data-table/prop-sort-by" />
+
+### Multi sort
+
+Using the **multi-sort** prop will enable you to sort on multiple columns at the same time.
+
+<example file="v-data-table/prop-multi-sort" />
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
new file mode 100644
index 00000000000..8172ab99bdd
--- /dev/null
+++ b/packages/docs/src/pages/en/components/data-tables/virtual-tables.md
@@ -0,0 +1,16 @@
+---
+nav: Virtual tables
+meta:
+  title: Data table - Virtual tables
+  description: The data table component is used for displaying tabular data in a way that is easy for users to scan. It includes sorting, searching, pagination and selection.
+  keywords: data tables, vuetify data table component, vue data table component
+related:
+  - /components/data-tables/basics
+  - /components/tables/
+---
+
+# Data table - Virtual tables
+
+Lorem ipsum etc etc
+
+## Examples
diff --git a/packages/docs/src/plugins/vuetify.ts b/packages/docs/src/plugins/vuetify.ts
index d1d86f75cfc..495795a9f1a 100644
--- a/packages/docs/src/plugins/vuetify.ts
+++ b/packages/docs/src/plugins/vuetify.ts
@@ -6,7 +6,7 @@ import 'vuetify/styles'
 import { createVuetify } from 'vuetify'
 import * as components from 'vuetify/components'
 import * as directives from 'vuetify/directives'
-// import * as labs from 'vuetify/labs/components'
+import * as labs from 'vuetify/labs/components'
 
 // Icons
 import { fa } from 'vuetify/iconsets/fa'
@@ -21,7 +21,7 @@ export const useVuetify: VuetifyPlugin = ({ app }) => {
   const vuetify = createVuetify({
     components: {
       ...components,
-      // ...labs,
+      ...labs,
     },
     directives,
     icons: {
diff --git a/packages/docs/vite.config.ts b/packages/docs/vite.config.ts
index a2b7fc55c54..8a76805d92d 100644
--- a/packages/docs/vite.config.ts
+++ b/packages/docs/vite.config.ts
@@ -107,7 +107,7 @@ export default defineConfig(({ command, mode }) => {
             paths.push(folder.replace(/\.[a-z]*/, ''))
           }
 
-          const [category, page] = paths.slice(1)
+          const [category, ...rest] = paths.slice(1)
           const meta = {
             layout: 'default',
             ...parseMeta(route.component),
@@ -120,11 +120,11 @@ export default defineConfig(({ command, mode }) => {
           return {
             ...route,
             path: `/${paths.join('/')}/`,
-            name: `${category ?? meta.layout}${page ? '-' : ''}${page ?? ''}`,
+            name: `${category ?? meta.layout}${rest.length ? '-' + rest.join('-') : ''}`,
             meta: {
               ...meta,
               category,
-              page,
+              page: rest?.join('-'),
               locale,
             },
           }
diff --git a/packages/vuetify/build/rollup.types.config.js b/packages/vuetify/build/rollup.types.config.js
index 8957d251ba9..b7a69560aea 100644
--- a/packages/vuetify/build/rollup.types.config.js
+++ b/packages/vuetify/build/rollup.types.config.js
@@ -66,6 +66,7 @@ export default [
     return code + '\n\n' + await getShims()
   }),
   createTypesConfig('entry-bundler.d.ts', 'dist/vuetify.d.ts', async code => {
+    code = code.replaceAll(/type index_d\$1_V(\w+) = V(\w+);/gm, 'declare const index_d$$1_V$1: typeof V$2;')
     return code + '\n\n' + (await getShims()).replace(', VNodeChild } from \'vue\'', ' } from \'vue\'')
   }),
   createTypesConfig('blueprints/*.d.ts', 'lib/blueprints/*.d.ts'),
@@ -75,7 +76,9 @@ export default [
     const block = Array.from(index.matchAll(/^\/\/ export \* from '\.\/(.*)'$/gm), m => m[1])
     return files.filter(file => !block.some(name => file.includes(`/${name}/`)))
   }),
-  createTypesConfig('labs/index.d.ts', 'dist/vuetify-labs.d.ts'),
+  createTypesConfig('labs/index.d.ts', 'dist/vuetify-labs.d.ts', code => {
+    return code.replaceAll(/type components_d_V(\w+) = V(\w+);/gm, 'declare const components_d_V$1: typeof V$2;')
+  }),
   createTypesConfig('labs/components.d.ts', 'lib/labs/components.d.ts'),
   createTypesConfig('labs/*/index.d.ts', 'lib/labs/*/index.d.ts'),
   createTypesConfig('directives/index.d.ts', 'lib/directives/index.d.ts'),
diff --git a/packages/vuetify/dev/Playground.datatable.vue b/packages/vuetify/dev/Playground.datatable.vue
new file mode 100644
index 00000000000..b5cff0d364e
--- /dev/null
+++ b/packages/vuetify/dev/Playground.datatable.vue
@@ -0,0 +1,303 @@
+<template>
+  <v-app>
+    <div>
+      <v-text-field v-model="search" variant="outlined" label="Search" />
+    </div>
+
+    <h1>header rowspan/colspan</h1>
+    <v-data-table
+      :headers="complex"
+      :items="items"
+    >
+      <template #header.header>
+        foo
+      </template>
+    </v-data-table>
+
+    <!-- <v-data-table
+      show-select
+      :headers="simple"
+      :items="items"
+      :search="search"
+      multi-sort
+      show-expand
+    >
+      <template #expanded-row="{ columns }">
+        <tr>
+          <td :colspan="columns.length">
+            hello
+          </td>
+        </tr>
+      </template>
+    </v-data-table> -->
+
+    <!-- <div>
+      <v-autocomplete
+        :items="people"
+        filled
+        chips
+        closable-chips
+        color="blue-grey-lighten-2"
+        label="Select"
+        item-title="name"
+        item-value="name"
+        multiple
+        :filter-keys="['name']"
+      />
+    </div> -->
+
+    <!--
+    <h1>expanded</h1>
+    <v-data-table
+      :headers="simple"
+      :items="items"
+      expand-on-click
+    >
+      <template v-slot:expanded-row="{ columns }">
+        <tr>
+          <td :colspan="columns.length">
+            This is an expanded row
+          </td>
+        </tr>
+      </template>
+    </v-data-table> -->
+
+    <!-- <h1>group</h1>
+    <v-data-table
+      show-select
+      :headers="simple"
+      :items="groupItems"
+      :group-by="[{ key: 'two', order: 'asc' }, { key: 'three', order: 'asc' }]"
+      :items-per-page="-1"
+    ></v-data-table> -->
+
+    <!-- <h1>server</h1>
+    <v-data-table-server
+      show-select
+      :headers="simple"
+      :items="remoteItems"
+      :items-length="1000"
+      :loading="loading"
+      @update:options="getItems"
+    ></v-data-table-server> -->
+
+    <!-- <h1>virtual</h1>
+    <v-data-table-virtual
+      :headers="simple"
+      :items="serverItems"
+      :search="search"
+      fixed-header
+      height="500px"
+    >
+      <template #item.four>
+        <v-btn>hello</v-btn>
+      </template>
+    </v-data-table-virtual> -->
+
+    <!-- <h1>simple</h1>
+    <v-table>
+      <thead>
+        <tr>
+          <th>One</th>
+          <th>Two</th>
+          <th>Three</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>foo</td>
+          <td>bar</td>
+          <td>fizz</td>
+        </tr>
+      </tbody>
+    </v-table> -->
+
+  </v-app>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue'
+
+  const serverItems = Array(1000).fill(0).map((_, i) => ({ id: i, name: `Name ${i}`, one: i, two: Math.random() > 0.5 ? 'foo' : 'bar', three: Math.random() > 0.5 ? 'hello' : 'world', four: i }))
+
+  const items = Array(20).fill(0).map((_, i) => ({ id: i, name: `Name ${i}`, one: i, two: Math.random() > 0.5 ? 'foo' : 'bar', three: Math.random() > 0.5 ? 'hello' : 'world', four: i }))
+
+  const groupItems = [
+    { id: 1, name: 'Name 1', two: 'foo', three: 'hello' },
+    { id: 2, name: 'Name 2', two: 'foo', three: 'world' },
+    { id: 3, name: 'Name 3', two: 'foo', three: 'hello' },
+    { id: 4, name: 'Name 4', two: 'bar', three: 'world' },
+    { id: 5, name: 'Name 5', two: 'bar', three: 'world' },
+    { id: 6, name: 'Name 6', two: 'bar', three: 'hello' },
+  ]
+
+  const srcs = {
+    1: 'https://cdn.vuetifyjs.com/images/lists/1.jpg',
+    2: 'https://cdn.vuetifyjs.com/images/lists/2.jpg',
+    3: 'https://cdn.vuetifyjs.com/images/lists/3.jpg',
+    4: 'https://cdn.vuetifyjs.com/images/lists/4.jpg',
+    5: 'https://cdn.vuetifyjs.com/images/lists/5.jpg',
+  }
+
+  export default defineComponent({
+    data: () => ({
+      people: [
+        { name: 'Sandra Adams', group: 'Group 1', avatar: srcs[1] },
+        { name: 'Ali Connors', group: 'Group 1', avatar: srcs[2] },
+        { name: 'Trevor Hansen', group: 'Group 1', avatar: srcs[3] },
+        { name: 'Tucker Smith', group: 'Group 1', avatar: srcs[2] },
+        { name: 'Britta Holt', group: 'Group 2', avatar: srcs[4] },
+        { name: 'Jane Smith ', group: 'Group 2', avatar: srcs[5] },
+        { name: 'John Smith', group: 'Group 2', avatar: srcs[1] },
+        { name: 'Sandra Williams', group: 'Group 2', avatar: srcs[3] },
+      ],
+      groupItems,
+      serverItems,
+      simple: [
+        {
+          title: 'Name',
+          id: 'name',
+        },
+        {
+          title: 'Two',
+          id: 'two',
+        },
+        {
+          title: 'Three',
+          id: 'three',
+        },
+        {
+          title: 'Four',
+          id: 'four',
+          align: 'end',
+        },
+      ],
+      test: [
+        [
+          {
+            title: 'Group 1',
+            colspan: 1,
+            width: 200,
+            fixed: true,
+          },
+          {
+            title: 'Group 2',
+            colspan: 1,
+            fixed: true,
+          },
+          {
+            title: 'Group 3',
+            colspan: 2,
+          },
+        ],
+        [
+          {
+            title: 'A',
+            id: 'one',
+            fixed: true,
+            width: 200,
+          },
+          {
+            title: 'B',
+            id: 'two',
+            fixed: true,
+            width: 200,
+          },
+          {
+            title: 'C',
+            id: 'three',
+            width: 200,
+          },
+          {
+            title: 'D',
+            id: 'four',
+            width: 200,
+          },
+        ],
+      ],
+      complex: [
+        [
+          {
+            id: 'data-table-select',
+            rowspan: 3,
+            fixed: true,
+            width: 48,
+          },
+          {
+            title: 'Name',
+            id: 'name',
+            rowspan: 3,
+            fixed: true,
+            width: 200,
+          },
+          {
+            title: 'Header',
+            colspan: 4,
+            id: 'header',
+          },
+        ],
+        [
+          {
+            title: 'Section',
+            colspan: 2,
+          },
+          {
+            title: 'Section',
+            colspan: 2,
+          },
+        ],
+        [
+          {
+            title: 'One',
+            id: 'one',
+            width: 200,
+            fixed: true,
+          },
+          {
+            title: 'Two',
+            id: 'two',
+            width: 200,
+          },
+          {
+            title: 'Three',
+            id: 'three',
+          },
+          {
+            title: 'Four',
+            id: 'four',
+          },
+        ],
+      ],
+      search: '',
+      // headers: [
+      //   {
+      //     id: 'end',
+      //     name: 'Two rows',
+      //     maxWidth: '2fr',
+      //   },
+      //   {
+      //     id: 'one',
+      //     name: 'One',
+      //   },
+      //   {
+      //     id: 'two',
+      //     name: 'Two',
+      //   },
+      // ],
+      items,
+      remoteItems: serverItems.slice(0, 10),
+      timeout: null as any,
+      loading: false,
+    }),
+    methods: {
+      getItems ({ startIndex, stopIndex }: any) {
+        this.loading = true
+        clearTimeout(this.timeout)
+        this.timeout = setTimeout(() => {
+          this.remoteItems = serverItems.slice(startIndex, stopIndex)
+          this.loading = false
+        }, 1000)
+      },
+    },
+  })
+</script>
diff --git a/packages/vuetify/dev/Playground.slider.vue b/packages/vuetify/dev/Playground.slider.vue
new file mode 100644
index 00000000000..c161a42920e
--- /dev/null
+++ b/packages/vuetify/dev/Playground.slider.vue
@@ -0,0 +1,301 @@
+<template>
+  <v-app :theme="theme">
+    <div>
+      <v-btn @click="rtl = !rtl">rtl</v-btn>
+      <v-btn @click="theme = theme === 'light' ? 'dark' : 'light'">theme</v-btn>
+      <v-btn @click="disabled = !disabled">disabled</v-btn>
+    </div>
+    <v-locale-provider :rtl="rtl">
+      <div class="ma-10 d-flex flex-column">
+        Regular
+        <v-slider
+          v-model="model"
+          direction="vertical"
+        />
+        <v-slider
+          v-model="model"
+          direction="horizontal"
+        />
+
+        min/max
+        <v-slider
+          v-model="model7"
+          direction="vertical"
+          min="10"
+          max="25"
+          thumb-label="always"
+        />
+        <v-slider
+          v-model="model7"
+          direction="horizontal"
+          min="10"
+          max="25"
+          thumb-label="always"
+        />
+
+        Step size
+        <v-slider
+          v-model="model2"
+          direction="vertical"
+          step-size="5"
+        />
+        <v-slider
+          v-model="model2"
+          direction="horizontal"
+          step-size="5"
+        />
+
+        show-ticks
+        <v-slider
+          v-model="model3"
+          direction="vertical"
+          step-size="5"
+          show-ticks="always"
+        />
+        <v-slider
+          v-model="model3"
+          direction="horizontal"
+          step-size="5"
+          show-ticks="always"
+        />
+
+        custom-ticks
+        <v-slider
+          v-model="model3"
+          direction="vertical"
+          step-size="2"
+          show-ticks="always"
+          :ticks="[0, 10, 90]"
+        />
+        <v-slider
+          v-model="model3"
+          direction="horizontal"
+          step-size="2"
+          show-ticks="always"
+          :ticks="[0, 10, 90]"
+        />
+
+        thumb-label
+        <select v-model="thumbLabel">
+          <option :value="true">true</option>
+          <option value="always">always</option>
+        </select>
+        <v-slider
+          v-model="model4"
+          direction="vertical"
+          :thumb-label="thumbLabel"
+        />
+        <v-slider
+          v-model="model4"
+          direction="horizontal"
+          :thumb-label="thumbLabel"
+        />
+
+        sizes
+        <v-slider
+          v-model="model5"
+          direction="vertical"
+          track-size="20"
+          thumb-size="40"
+          tick-size="8"
+          step-size="10"
+          show-ticks="always"
+        />
+        <v-slider
+          v-model="model5"
+          direction="horizontal"
+          track-size="20"
+          thumb-size="40"
+          tick-size="8"
+          step-size="10"
+          show-ticks="always"
+        />
+
+        disabled
+        <v-slider
+          v-model="model6"
+          direction="vertical"
+          disabled
+        />
+        <v-slider
+          v-model="model6"
+          direction="horizontal"
+          disabled
+        />
+
+        crane
+        <v-slider
+          direction="horizontal"
+          step-size="10"
+          show-ticks="always"
+          rounded="0"
+          color="#E30425"
+        />
+
+        tick-label slot
+        <v-slider
+          direction="horizontal"
+          show-ticks="always"
+          step-size="1"
+          min="0"
+          max="3"
+        >
+          <template #tick-label="props">
+            {{ seasons[props.index] }}
+          </template>
+        </v-slider>
+
+        thumb-label slot
+        <v-slider
+          direction="horizontal"
+          thumb-label="always"
+          step-size="1"
+          min="0"
+          max="3"
+        >
+          <template #thumb-label="props">
+            {{ emojis[props.modelValue] }}
+          </template>
+        </v-slider>
+
+      </div>
+
+      <div class="ma-10 d-flex flex-column">
+        Regular
+        <v-range-slider
+          v-model="model1"
+          direction="vertical"
+        />
+        <v-range-slider
+          v-model="model1"
+          direction="horizontal"
+        />
+
+        min/max
+        <v-range-slider
+          v-model="model17"
+          direction="vertical"
+          min="10"
+          max="25"
+          thumb-label="always"
+        />
+        <v-range-slider
+          v-model="model17"
+          direction="horizontal"
+          min="10"
+          max="25"
+          thumb-label="always"
+        />
+
+        Step size
+        <v-range-slider
+          v-model="model12"
+          direction="vertical"
+          step-size="5"
+        />
+        <v-range-slider
+          v-model="model12"
+          direction="horizontal"
+          step-size="5"
+        />
+
+        Ticks
+        <v-range-slider
+          v-model="model13"
+          direction="vertical"
+          step-size="5"
+          show-ticks="always"
+        />
+        <v-range-slider
+          v-model="model13"
+          direction="horizontal"
+          step-size="5"
+          show-ticks="always"
+        />
+
+        thumb-label
+        <v-range-slider
+          v-model="model14"
+          direction="vertical"
+          thumb-label="always"
+        />
+        <v-range-slider
+          v-model="model14"
+          direction="horizontal"
+          thumb-label="always"
+        />
+
+        sizes
+        <v-range-slider
+          v-model="model15"
+          direction="vertical"
+          track-size="20"
+          thumb-size="40"
+          tick-size="8"
+          step-size="10"
+          show-ticks="always"
+        />
+        <v-range-slider
+          v-model="model15"
+          direction="horizontal"
+          track-size="20"
+          thumb-size="40"
+          tick-size="8"
+          step-size="10"
+          show-ticks="always"
+        />
+
+        disabled
+        <v-range-slider
+          v-model="model16"
+          direction="vertical"
+          disabled
+        />
+        <v-range-slider
+          v-model="model16"
+          direction="horizontal"
+          disabled
+        />
+
+        crane
+        <v-range-slider
+          direction="horizontal"
+          step-size="10"
+          show-ticks="always"
+          rounded="0"
+          color="#E30425"
+        />
+      </div>
+    </v-locale-provider>
+  </v-app>
+</template>
+
+<script>
+  export default {
+    name: 'Playground',
+    data: () => ({
+      thumbLabel: true,
+      arr: [10, 30],
+      foo: null,
+      test: 3,
+      model: 1,
+      model2: 0,
+      model3: 60,
+      model4: 0,
+      model5: 0,
+      model6: 25,
+      model7: 15,
+      model1: [10, 30],
+      model12: [10, 30],
+      model13: [10, 30],
+      model14: [10, 30],
+      model15: [10, 30],
+      model16: [10, 30],
+      model17: [15, 20],
+      seasons: ['spring', 'summer', 'fall', 'winter'],
+      emojis: ['😭', '🙁', '😊', '😍'],
+      theme: 'light',
+      rtl: false,
+    }),
+  }
+</script>
diff --git a/packages/vuetify/src/components/VAlert/VAlertTitle.ts b/packages/vuetify/src/components/VAlert/VAlertTitle.ts
index c96fa9b2256..042f02ab634 100644
--- a/packages/vuetify/src/components/VAlert/VAlertTitle.ts
+++ b/packages/vuetify/src/components/VAlert/VAlertTitle.ts
@@ -3,4 +3,4 @@ import { createSimpleFunctional } from '@/util'
 
 export const VAlertTitle = createSimpleFunctional('v-alert-title')
 
-export type VAlert = InstanceType<typeof VAlertTitle>
+export type VAlertTitle = InstanceType<typeof VAlertTitle>
diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
index f9f3e5be2ba..27681855cc8 100644
--- a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
+++ b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -30,7 +30,9 @@ import type { MakeSlots, SlotsToProps } from '@/util'
 import type { VFieldSlots } from '@/components/VField/VField'
 import type { VInputSlots } from '@/components/VInput/VInput'
 
-function highlightResult (text: string, matches: FilterMatch, length: number) {
+function highlightResult (text: string, matches: FilterMatch | undefined, length: number) {
+  if (matches == null) return text
+
   if (Array.isArray(matches)) throw new Error('Multiple matches is not implemented')
 
   return typeof matches === 'number' && ~matches
@@ -117,7 +119,7 @@ export const VAutocomplete = genericComponent<new <
         return props.multiple ? transformed : (transformed[0] ?? null)
       }
     )
-    const { filteredItems } = useFilter(props, items, computed(() => isPristine.value ? undefined : search.value))
+    const { filteredItems, getMatches } = useFilter(props, items, computed(() => isPristine.value ? undefined : search.value))
     const selections = computed(() => {
       return model.value.map(v => {
         return items.value.find(item => props.valueComparator(item.value, v.value)) || v
@@ -296,7 +298,7 @@ export const VAutocomplete = genericComponent<new <
 
                     { slots['prepend-item']?.() }
 
-                    { filteredItems.value.map(({ item, matches }, index) => slots.item?.({
+                    { filteredItems.value.map((item, index) => slots.item?.({
                       item,
                       index,
                       props: mergeProps(item.props, { onClick: () => select(item) }),
@@ -313,7 +315,7 @@ export const VAutocomplete = genericComponent<new <
                           title: () => {
                             return isPristine.value
                               ? item.title
-                              : highlightResult(item.title, matches.title, search.value?.length ?? 0)
+                              : highlightResult(item.title, getMatches(item)?.title, search.value?.length ?? 0)
                           },
                         }}
                       </VListItem>
diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.tsx b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
index ece3f90713e..e6ede3121c6 100644
--- a/packages/vuetify/src/components/VCombobox/VCombobox.tsx
+++ b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
@@ -32,7 +32,9 @@ import type { InternalItem } from '@/composables/items'
 import type { VFieldSlots } from '@/components/VField/VField'
 import type { VInputSlots } from '@/components/VInput/VInput'
 
-function highlightResult (text: string, matches: FilterMatch, length: number) {
+function highlightResult (text: string, matches: FilterMatch | undefined, length: number) {
+  if (matches == null) return text
+
   if (Array.isArray(matches)) throw new Error('Multiple matches is not implemented')
 
   return typeof matches === 'number' && ~matches
@@ -158,7 +160,7 @@ export const VCombobox = genericComponent<new <
       }
     })
 
-    const { filteredItems } = useFilter(props, items, computed(() => isPristine.value ? undefined : search.value))
+    const { filteredItems, getMatches } = useFilter(props, items, computed(() => isPristine.value ? undefined : search.value))
 
     const selections = computed(() => {
       return model.value.map(v => {
@@ -375,7 +377,7 @@ export const VCombobox = genericComponent<new <
 
                     { slots['prepend-item']?.() }
 
-                    { filteredItems.value.map(({ item, matches }, index) => slots.item?.({
+                    { filteredItems.value.map((item, index) => slots.item?.({
                       item,
                       index,
                       props: mergeProps(item.props, { onClick: () => select(item) }),
@@ -392,7 +394,7 @@ export const VCombobox = genericComponent<new <
                           title: () => {
                             return isPristine.value
                               ? item.title
-                              : highlightResult(item.title, matches.title, search.value?.length ?? 0)
+                              : highlightResult(item.title, getMatches(item)?.title, search.value?.length ?? 0)
                           },
                         }}
                       </VListItem>
diff --git a/packages/vuetify/src/components/VDataTable/MobileRow.ts b/packages/vuetify/src/components/VDataTable/MobileRow.ts
deleted file mode 100644
index 42b210c4978..00000000000
--- a/packages/vuetify/src/components/VDataTable/MobileRow.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-// @ts-nocheck
-/* eslint-disable */
-
-import Vue, { VNode, PropType } from 'vue'
-import { getObjectValueByPath } from '../../util/helpers'
-import { DataTableHeader } from 'vuetify/types'
-
-export default Vue.extend({
-  name: 'row',
-
-  functional: true,
-
-  props: {
-    headers: Array as PropType<DataTableHeader[]>,
-    hideDefaultHeader: Boolean,
-    index: Number,
-    item: Object,
-    rtl: Boolean,
-  },
-
-  render (h, { props, slots, data }): VNode {
-    const computedSlots = slots()
-
-    const columns: VNode[] = props.headers.map((header: DataTableHeader) => {
-      const classes = {
-        'v-data-table__mobile-row': true,
-      }
-
-      const children = []
-      const value = getObjectValueByPath(props.item, header.value)
-
-      const slotName = header.value
-      const scopedSlot = data.scopedSlots && data.scopedSlots[slotName]
-      const regularSlot = computedSlots[slotName]
-
-      if (scopedSlot) {
-        children.push(scopedSlot({
-          item: props.item,
-          isMobile: true,
-          header,
-          index: props.index,
-          value,
-        }))
-      } else if (regularSlot) {
-        children.push(regularSlot)
-      } else {
-        children.push(value == null ? value : String(value))
-      }
-
-      const mobileRowChildren = [
-        h('div', {
-          staticClass: 'v-data-table__mobile-row__cell',
-        }, children),
-      ]
-
-      if (header.value !== 'dataTableSelect' && !props.hideDefaultHeader) {
-        mobileRowChildren.unshift(
-          h('div', {
-            staticClass: 'v-data-table__mobile-row__header',
-          }, [header.text])
-        )
-      }
-
-      return h('td', { class: classes }, mobileRowChildren)
-    })
-
-    return h('tr', { ...data, staticClass: 'v-data-table__mobile-table-row' }, columns)
-  },
-})
diff --git a/packages/vuetify/src/components/VDataTable/Row.ts b/packages/vuetify/src/components/VDataTable/Row.ts
deleted file mode 100644
index 97de4fdad71..00000000000
--- a/packages/vuetify/src/components/VDataTable/Row.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-// @ts-nocheck
-/* eslint-disable */
-
-// Types
-import Vue, { VNode, PropType } from 'vue'
-import { DataTableHeader } from 'vuetify/types'
-
-// Utils
-import { getObjectValueByPath, wrapInArray } from '../../util/helpers'
-
-function needsTd (slot: VNode[] | undefined) {
-  return slot!.length !== 1 ||
-    !['td', 'th'].includes(slot![0]?.tag!)
-}
-
-export default Vue.extend({
-  name: 'row',
-
-  functional: true,
-
-  props: {
-    headers: Array as PropType<DataTableHeader[]>,
-    index: Number,
-    item: Object,
-    rtl: Boolean,
-  },
-
-  render (h, { props, slots, data }): VNode {
-    const computedSlots = slots()
-
-    const columns = props.headers.map((header: DataTableHeader) => {
-      const children = []
-      const value = getObjectValueByPath(props.item, header.value)
-
-      const slotName = header.value
-      const scopedSlot = data.scopedSlots && data.scopedSlots[slotName]
-      const regularSlot = computedSlots[slotName]
-
-      if (scopedSlot) {
-        children.push(...wrapInArray(scopedSlot({
-          item: props.item,
-          isMobile: false,
-          header,
-          index: props.index,
-          value,
-        })))
-      } else if (regularSlot) {
-        children.push(...wrapInArray(regularSlot))
-      } else {
-        children.push(value == null ? value : String(value))
-      }
-
-      const textAlign = `text-${header.align || 'start'}`
-
-      return needsTd(children)
-        ? h('td', {
-          class: [
-            textAlign,
-            header.cellClass,
-            {
-              'v-data-table__divider': header.divider,
-            },
-          ],
-        }, children)
-        : children
-    })
-
-    return h('tr', data, columns)
-  },
-})
diff --git a/packages/vuetify/src/components/VDataTable/RowGroup.ts b/packages/vuetify/src/components/VDataTable/RowGroup.ts
deleted file mode 100644
index 9e72ad135c1..00000000000
--- a/packages/vuetify/src/components/VDataTable/RowGroup.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-// @ts-nocheck
-/* eslint-disable */
-
-import Vue, { VNode } from 'vue'
-
-export default Vue.extend({
-  name: 'row-group',
-
-  functional: true,
-
-  props: {
-    value: {
-      type: Boolean,
-      default: true,
-    },
-    headerClass: {
-      type: String,
-      default: 'v-row-group__header',
-    },
-    contentClass: String,
-    summaryClass: {
-      type: String,
-      default: 'v-row-group__summary',
-    },
-  },
-
-  render (h, { slots, props }): VNode {
-    const computedSlots = slots()
-    const children = []
-
-    if (computedSlots['column.header']) {
-      children.push(h('tr', {
-        staticClass: props.headerClass,
-      }, computedSlots['column.header']))
-    } else if (computedSlots['row.header']) {
-      children.push(...computedSlots['row.header'])
-    }
-
-    if (computedSlots['row.content'] && props.value) children.push(...computedSlots['row.content'])
-
-    if (computedSlots['column.summary']) {
-      children.push(h('tr', {
-        staticClass: props.summaryClass,
-      }, computedSlots['column.summary']))
-    } else if (computedSlots['row.summary']) {
-      children.push(...computedSlots['row.summary'])
-    }
-
-    return children as any
-  },
-})
diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.sass b/packages/vuetify/src/components/VDataTable/VDataTable.sass
deleted file mode 100644
index 40f3caa4193..00000000000
--- a/packages/vuetify/src/components/VDataTable/VDataTable.sass
+++ /dev/null
@@ -1,98 +0,0 @@
-// Imports
-@import './_variables.scss'
-
-// Theme
-+theme(v-data-table) using ($material)
-  tbody
-    tr
-      &.v-data-table__selected
-        background: map-deep-get($material, 'table', 'active')
-
-  .v-row-group
-    &__header, &__summary
-      background: map-deep-get($material, 'table', 'group')
-
-  .v-data-footer
-    border-top: thin solid map-get($material, 'dividers')
-
-  .v-data-table__empty-wrapper
-    color: map-deep-get($material, 'text', 'disabled')
-
-.v-data-table
-  border-radius: $data-table-border-radius
-
-  &--mobile
-    > .v-data-table__wrapper tbody
-      display: flex
-      flex-direction: column
-
-  > .v-data-table__wrapper
-    tbody
-      tr
-        &.v-data-table__expanded
-          border-bottom: 0
-
-        &.v-data-table__expanded__content
-          box-shadow: $data-table-expanded-content-box-shadow
-
-        &:first-child
-          &:hover
-            td
-              &:first-child
-                border-top-left-radius: $data-table-border-radius
-
-              &:last-child
-                border-top-right-radius: $data-table-border-radius
-
-        &:last-child
-          &:hover
-            td
-              &:first-child
-                border-bottom-left-radius: $data-table-border-radius
-
-              &:last-child
-                border-bottom-right-radius: $data-table-border-radius
-
-    .v-data-table__mobile-table-row
-      display: initial
-
-    .v-data-table__mobile-row
-      height: initial
-      min-height: $data-table-mobile-row-min-height
-
-.v-data-table__empty-wrapper
-  text-align: center
-
-.v-data-table__mobile-row
-  align-items: center
-  display: flex
-  justify-content: space-between
-
-  &__header
-    font-weight: $data-table-mobile-row-header-font-weight
-
-    +ltr()
-      padding-right: 16px
-
-    +rtl()
-      padding-left: 16px
-
-  &__cell
-    +ltr()
-      text-align: right
-
-    +rtl()
-      text-align: left
-
-.v-row-group
-  &__header, &__summary
-
-    td
-      height: $data-table-row-group-children-td-height
-
-.v-data-table__expand-icon
-  user-select: none
-  cursor: pointer
-
-  &--active
-    transform: rotate(-180deg)
diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.ts b/packages/vuetify/src/components/VDataTable/VDataTable.ts
deleted file mode 100644
index c81462e2829..00000000000
--- a/packages/vuetify/src/components/VDataTable/VDataTable.ts
+++ /dev/null
@@ -1,653 +0,0 @@
-// @ts-nocheck
-/* eslint-disable */
-
-import './VDataTable.sass'
-
-// Types
-import { VNode, VNodeChildrenArrayContents, VNodeChildren } from 'vue'
-import { PropValidator } from 'vue/types/options'
-import {
-  DataTableHeader,
-  DataTableFilterFunction,
-  DataScopeProps,
-  DataOptions,
-  DataPagination,
-  DataTableCompareFunction,
-  DataItemsPerPageOption,
-  ItemGroup,
-  RowClassFunction,
-  DataTableItemProps,
-} from 'vuetify/types'
-
-// Components
-import { VData } from '../VData'
-import { VDataFooter, VDataIterator } from '../VDataIterator'
-import VBtn from '../VBtn'
-import VDataTableHeader from './VDataTableHeader'
-// import VVirtualTable from './VVirtualTable'
-import VIcon from '../VIcon'
-import Row from './Row'
-import RowGroup from './RowGroup'
-import VSimpleCheckbox from '../VCheckbox/VSimpleCheckbox'
-import VSimpleTable from './VSimpleTable'
-import MobileRow from './MobileRow'
-
-// Mixins
-import Loadable from '../../mixins/loadable'
-
-// Directives
-import ripple from '../../directives/ripple'
-
-// Helpers
-import mixins from '../../util/mixins'
-import { deepEqual, getObjectValueByPath, getPrefixedScopedSlots, getSlot, defaultFilter, camelizeObjectKeys, getPropertyFromItem } from '../../util/helpers'
-import { breaking } from '../../util/console'
-import { mergeClasses } from '../../util/mergeData'
-
-function filterFn (item: any, search: string | null, filter: DataTableFilterFunction) {
-  return (header: DataTableHeader) => {
-    const value = getObjectValueByPath(item, header.value)
-    return header.filter ? header.filter(value, search, item) : filter(value, search, item)
-  }
-}
-
-function searchTableItems (
-  items: any[],
-  search: string | null,
-  headersWithCustomFilters: DataTableHeader[],
-  headersWithoutCustomFilters: DataTableHeader[],
-  customFilter: DataTableFilterFunction
-) {
-  search = typeof search === 'string' ? search.trim() : null
-
-  return items.filter(item => {
-    // Headers with custom filters are evaluated whether or not a search term has been provided.
-    // We need to match every filter to be included in the results.
-    const matchesColumnFilters = headersWithCustomFilters.every(filterFn(item, search, defaultFilter))
-
-    // Headers without custom filters are only filtered by the `search` property if it is defined.
-    // We only need a single column to match the search term to be included in the results.
-    const matchesSearchTerm = !search || headersWithoutCustomFilters.some(filterFn(item, search, customFilter))
-
-    return matchesColumnFilters && matchesSearchTerm
-  })
-}
-
-/* @vue/component */
-export default mixins(
-  VDataIterator,
-  Loadable,
-).extend({
-  name: 'v-data-table',
-
-  // https://github.com/vuejs/vue/issues/6872
-  directives: {
-    ripple,
-  },
-
-  props: {
-    headers: {
-      type: Array,
-      default: () => [],
-    } as PropValidator<DataTableHeader[]>,
-    showSelect: Boolean,
-    checkboxColor: String,
-    showExpand: Boolean,
-    showGroupBy: Boolean,
-    // TODO: Fix
-    // virtualRows: Boolean,
-    height: [Number, String],
-    hideDefaultHeader: Boolean,
-    caption: String,
-    dense: Boolean,
-    headerProps: Object,
-    calculateWidths: Boolean,
-    fixedHeader: Boolean,
-    headersLength: Number,
-    expandIcon: {
-      type: String,
-      default: '$expand',
-    },
-    customFilter: {
-      type: Function,
-      default: defaultFilter,
-    } as PropValidator<typeof defaultFilter>,
-    itemClass: {
-      type: [String, Function],
-      default: () => '',
-    } as PropValidator<RowClassFunction | string>,
-    loaderHeight: {
-      type: [Number, String],
-      default: 4,
-    },
-  },
-
-  data () {
-    return {
-      internalGroupBy: [] as string[],
-      openCache: {} as { [key: string]: boolean },
-      widths: [] as number[],
-    }
-  },
-
-  computed: {
-    computedHeaders (): DataTableHeader[] {
-      if (!this.headers) return []
-      const headers = this.headers.filter(h => h.value === undefined || !this.internalGroupBy.find(v => v === h.value))
-      const defaultHeader = { text: '', sortable: false, width: '1px' }
-
-      if (this.showSelect) {
-        const index = headers.findIndex(h => h.value === 'data-table-select')
-        if (index < 0) headers.unshift({ ...defaultHeader, value: 'data-table-select' })
-        else headers.splice(index, 1, { ...defaultHeader, ...headers[index] })
-      }
-
-      if (this.showExpand) {
-        const index = headers.findIndex(h => h.value === 'data-table-expand')
-        if (index < 0) headers.unshift({ ...defaultHeader, value: 'data-table-expand' })
-        else headers.splice(index, 1, { ...defaultHeader, ...headers[index] })
-      }
-
-      return headers
-    },
-    colspanAttrs (): object | undefined {
-      return this.isMobile ? undefined : {
-        colspan: this.headersLength || this.computedHeaders.length,
-      }
-    },
-    columnSorters (): Record<string, DataTableCompareFunction> {
-      return this.computedHeaders.reduce<Record<string, DataTableCompareFunction>>((acc, header) => {
-        if (header.sort) acc[header.value] = header.sort
-        return acc
-      }, {})
-    },
-    headersWithCustomFilters (): DataTableHeader[] {
-      return this.headers.filter(header => header.filter && (!header.hasOwnProperty('filterable') || header.filterable === true))
-    },
-    headersWithoutCustomFilters (): DataTableHeader[] {
-      return this.headers.filter(header => !header.filter && (!header.hasOwnProperty('filterable') || header.filterable === true))
-    },
-    sanitizedHeaderProps (): Record<string, any> {
-      return camelizeObjectKeys(this.headerProps)
-    },
-    computedItemsPerPage (): number {
-      const itemsPerPage = this.options && this.options.itemsPerPage ? this.options.itemsPerPage : this.itemsPerPage
-      const itemsPerPageOptions: DataItemsPerPageOption[] | undefined = this.sanitizedFooterProps.itemsPerPageOptions
-
-      if (
-        itemsPerPageOptions &&
-        !itemsPerPageOptions.find(item => typeof item === 'number' ? item === itemsPerPage : item.value === itemsPerPage)
-      ) {
-        const firstOption = itemsPerPageOptions[0]
-        return typeof firstOption === 'object' ? firstOption.value : firstOption
-      }
-
-      return itemsPerPage
-    },
-  },
-
-  created () {
-    const breakingProps = [
-      ['sort-icon', 'header-props.sort-icon'],
-      ['hide-headers', 'hide-default-header'],
-      ['select-all', 'show-select'],
-    ]
-
-    /* istanbul ignore next */
-    breakingProps.forEach(([original, replacement]) => {
-      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
-    })
-  },
-
-  mounted () {
-    // if ((!this.sortBy || !this.sortBy.length) && (!this.options.sortBy || !this.options.sortBy.length)) {
-    //   const firstSortable = this.headers.find(h => !('sortable' in h) || !!h.sortable)
-    //   if (firstSortable) this.updateOptions({ sortBy: [firstSortable.value], sortDesc: [false] })
-    // }
-
-    if (this.calculateWidths) {
-      window.addEventListener('resize', this.calcWidths)
-      this.calcWidths()
-    }
-  },
-
-  beforeDestroy () {
-    if (this.calculateWidths) {
-      window.removeEventListener('resize', this.calcWidths)
-    }
-  },
-
-  methods: {
-    calcWidths () {
-      this.widths = Array.from(this.$el.querySelectorAll('th')).map(e => e.clientWidth)
-    },
-    customFilterWithColumns (items: any[], search: string) {
-      return searchTableItems(items, search, this.headersWithCustomFilters, this.headersWithoutCustomFilters, this.customFilter)
-    },
-    customSortWithHeaders (items: any[], sortBy: string[], sortDesc: boolean[], locale: string) {
-      return this.customSort(items, sortBy, sortDesc, locale, this.columnSorters)
-    },
-    createItemProps (item: any, index: number): DataTableItemProps {
-      const props = VDataIterator.options.methods.createItemProps.call(this, item, index)
-
-      return Object.assign(props, { headers: this.computedHeaders })
-    },
-    genCaption (props: DataScopeProps) {
-      if (this.caption) return [this.$createElement('caption', [this.caption])]
-
-      return getSlot(this, 'caption', props, true)
-    },
-    genColgroup (props: DataScopeProps) {
-      return this.$createElement('colgroup', this.computedHeaders.map(header => {
-        return this.$createElement('col', {
-          class: {
-            divider: header.divider,
-          },
-        })
-      }))
-    },
-    genLoading () {
-      const th = this.$createElement('th', {
-        staticClass: 'column',
-        attrs: this.colspanAttrs,
-      }, [this.genProgress()])
-
-      const tr = this.$createElement('tr', {
-        staticClass: 'v-data-table__progress',
-      }, [th])
-
-      return this.$createElement('thead', [tr])
-    },
-    genHeaders (props: DataScopeProps) {
-      const data = {
-        props: {
-          ...this.sanitizedHeaderProps,
-          headers: this.computedHeaders,
-          options: props.options,
-          mobile: this.isMobile,
-          showGroupBy: this.showGroupBy,
-          checkboxColor: this.checkboxColor,
-          someItems: this.someItems,
-          everyItem: this.everyItem,
-          singleSelect: this.singleSelect,
-          disableSort: this.disableSort,
-        },
-        on: {
-          sort: props.sort,
-          group: props.group,
-          'toggle-select-all': this.toggleSelectAll,
-        },
-      }
-
-      // TODO: rename to 'head'? (thead, tbody, tfoot)
-      const children: VNodeChildrenArrayContents = [getSlot(this, 'header', {
-        ...data,
-        isMobile: this.isMobile,
-      })]
-
-      if (!this.hideDefaultHeader) {
-        const scopedSlots = getPrefixedScopedSlots('header.', this.$scopedSlots)
-        children.push(this.$createElement(VDataTableHeader, {
-          ...data,
-          scopedSlots,
-        }))
-      }
-
-      if (this.loading) children.push(this.genLoading())
-
-      return children
-    },
-    genEmptyWrapper (content: VNodeChildrenArrayContents) {
-      return this.$createElement('tr', {
-        staticClass: 'v-data-table__empty-wrapper',
-      }, [
-        this.$createElement('td', {
-          attrs: this.colspanAttrs,
-        }, content),
-      ])
-    },
-    genItems (items: any[], props: DataScopeProps) {
-      const empty = this.genEmpty(props.originalItemsLength, props.pagination.itemsLength)
-      if (empty) return [empty]
-
-      return props.groupedItems
-        ? this.genGroupedRows(props.groupedItems, props)
-        : this.genRows(items, props)
-    },
-    genGroupedRows (groupedItems: ItemGroup<any>[], props: DataScopeProps) {
-      return groupedItems.map(group => {
-        if (!this.openCache.hasOwnProperty(group.name)) this.$set(this.openCache, group.name, true)
-
-        if (this.$scopedSlots.group) {
-          return this.$scopedSlots.group({
-            group: group.name,
-            options: props.options,
-            isMobile: this.isMobile,
-            items: group.items,
-            headers: this.computedHeaders,
-          })
-        } else {
-          return this.genDefaultGroupedRow(group.name, group.items, props)
-        }
-      })
-    },
-    genDefaultGroupedRow (group: string, items: any[], props: DataScopeProps) {
-      const isOpen = !!this.openCache[group]
-      const children: VNodeChildren = [
-        this.$createElement('template', { slot: 'row.content' }, this.genRows(items, props)),
-      ]
-      const toggleFn = () => this.$set(this.openCache, group, !this.openCache[group])
-      const removeFn = () => props.updateOptions({ groupBy: [], groupDesc: [] })
-
-      if (this.$scopedSlots['group.header']) {
-        children.unshift(this.$createElement('template', { slot: 'column.header' }, [
-          this.$scopedSlots['group.header']!({
-            group,
-            groupBy: props.options.groupBy,
-            isMobile: this.isMobile,
-            items,
-            headers: this.computedHeaders,
-            isOpen,
-            toggle: toggleFn,
-            remove: removeFn,
-          }),
-        ]))
-      } else {
-        const toggle = this.$createElement(VBtn, {
-          staticClass: 'ma-0',
-          props: {
-            icon: true,
-            small: true,
-          },
-          on: {
-            click: toggleFn,
-          },
-        }, [this.$createElement(VIcon, [isOpen ? '$minus' : '$plus'])])
-
-        const remove = this.$createElement(VBtn, {
-          staticClass: 'ma-0',
-          props: {
-            icon: true,
-            small: true,
-          },
-          on: {
-            click: removeFn,
-          },
-        }, [this.$createElement(VIcon, ['$close'])])
-
-        const column = this.$createElement('td', {
-          staticClass: 'text-start',
-          attrs: this.colspanAttrs,
-        }, [toggle, `${props.options.groupBy[0]}: ${group}`, remove])
-
-        children.unshift(this.$createElement('template', { slot: 'column.header' }, [column]))
-      }
-
-      if (this.$scopedSlots['group.summary']) {
-        children.push(this.$createElement('template', { slot: 'column.summary' }, [
-          this.$scopedSlots['group.summary']!({
-            group,
-            groupBy: props.options.groupBy,
-            isMobile: this.isMobile,
-            items,
-            headers: this.computedHeaders,
-            isOpen,
-            toggle: toggleFn,
-          }),
-        ]))
-      }
-
-      return this.$createElement(RowGroup, {
-        key: group,
-        props: {
-          value: isOpen,
-        },
-      }, children)
-    },
-    genRows (items: any[], props: DataScopeProps) {
-      return this.$scopedSlots.item ? this.genScopedRows(items, props) : this.genDefaultRows(items, props)
-    },
-    genScopedRows (items: any[], props: DataScopeProps) {
-      const rows = []
-
-      for (let i = 0; i < items.length; i++) {
-        const item = items[i]
-        rows.push(this.$scopedSlots.item!({
-          ...this.createItemProps(item, i),
-          isMobile: this.isMobile,
-        }))
-
-        if (this.isExpanded(item)) {
-          rows.push(this.$scopedSlots['expanded-item']!({
-            headers: this.computedHeaders,
-            isMobile: this.isMobile,
-            index: i,
-            item,
-          }))
-        }
-      }
-
-      return rows
-    },
-    genDefaultRows (items: any[], props: DataScopeProps) {
-      return this.$scopedSlots['expanded-item']
-        ? items.map((item, index) => this.genDefaultExpandedRow(item, index))
-        : items.map((item, index) => this.genDefaultSimpleRow(item, index))
-    },
-    genDefaultExpandedRow (item: any, index: number): VNode {
-      const isExpanded = this.isExpanded(item)
-      const classes = {
-        'v-data-table__expanded v-data-table__expanded__row': isExpanded,
-      }
-      const headerRow = this.genDefaultSimpleRow(item, index, classes)
-      const expandedRow = this.$createElement('tr', {
-        staticClass: 'v-data-table__expanded v-data-table__expanded__content',
-      }, [this.$scopedSlots['expanded-item']!({
-        headers: this.computedHeaders,
-        isMobile: this.isMobile,
-        item,
-      })])
-
-      return this.$createElement(RowGroup, {
-        props: {
-          value: isExpanded,
-        },
-      }, [
-        this.$createElement('template', { slot: 'row.header' }, [headerRow]),
-        this.$createElement('template', { slot: 'row.content' }, [expandedRow]),
-      ])
-    },
-    genDefaultSimpleRow (item: any, index: number, classes: Record<string, boolean> = {}): VNode {
-      const scopedSlots = getPrefixedScopedSlots('item.', this.$scopedSlots)
-
-      const data = this.createItemProps(item, index)
-
-      if (this.showSelect) {
-        const slot = scopedSlots['data-table-select']
-        scopedSlots['data-table-select'] = slot ? () => slot({
-          ...data,
-          isMobile: this.isMobile,
-        }) : () => this.$createElement(VSimpleCheckbox, {
-          staticClass: 'v-data-table__checkbox',
-          props: {
-            value: data.isSelected,
-            disabled: !this.isSelectable(item),
-            color: this.checkboxColor ?? '',
-          },
-          on: {
-            input: (val: boolean) => data.select(val),
-          },
-        })
-      }
-
-      if (this.showExpand) {
-        const slot = scopedSlots['data-table-expand']
-        scopedSlots['data-table-expand'] = slot ? () => slot(data) : () => this.$createElement(VIcon, {
-          staticClass: 'v-data-table__expand-icon',
-          class: {
-            'v-data-table__expand-icon--active': data.isExpanded,
-          },
-          on: {
-            click: (e: MouseEvent) => {
-              e.stopPropagation()
-              data.expand(!data.isExpanded)
-            },
-          },
-        }, [this.expandIcon])
-      }
-
-      return this.$createElement(this.isMobile ? MobileRow : Row, {
-        key: getObjectValueByPath(item, this.itemKey),
-        class: mergeClasses(
-          { ...classes, 'v-data-table__selected': data.isSelected },
-          getPropertyFromItem(item, this.itemClass)
-        ),
-        props: {
-          headers: this.computedHeaders,
-          hideDefaultHeader: this.hideDefaultHeader,
-          index,
-          item,
-          rtl: this.$vuetify.rtl,
-        },
-        scopedSlots,
-        on: {
-          // TODO: for click, the first argument should be the event, and the second argument should be data,
-          // but this is a breaking change so it's for v3
-          click: () => this.$emit('click:row', item, data),
-          contextmenu: (event: MouseEvent) => this.$emit('contextmenu:row', event, data),
-          dblclick: (event: MouseEvent) => this.$emit('dblclick:row', event, data),
-        },
-      })
-    },
-    genBody (props: DataScopeProps): VNode | string | VNodeChildren {
-      const data = {
-        ...props,
-        expand: this.expand,
-        headers: this.computedHeaders,
-        isExpanded: this.isExpanded,
-        isMobile: this.isMobile,
-        isSelected: this.isSelected,
-        select: this.select,
-      }
-
-      if (this.$scopedSlots.body) {
-        return this.$scopedSlots.body!(data)
-      }
-
-      return this.$createElement('tbody', [
-        getSlot(this, 'body.prepend', data, true),
-        this.genItems(props.items, props),
-        getSlot(this, 'body.append', data, true),
-      ])
-    },
-    genFoot (props: DataScopeProps): VNode[] | undefined {
-      return this.$scopedSlots.foot?.(props)
-    },
-    genFooters (props: DataScopeProps) {
-      const data = {
-        props: {
-          options: props.options,
-          pagination: props.pagination,
-          itemsPerPageText: '$vuetify.dataTable.itemsPerPageText',
-          ...this.sanitizedFooterProps,
-        },
-        on: {
-          'update:options': (value: any) => props.updateOptions(value),
-        },
-        widths: this.widths,
-        headers: this.computedHeaders,
-      }
-
-      const children: VNodeChildren = [
-        getSlot(this, 'footer', data, true),
-      ]
-
-      if (!this.hideDefaultFooter) {
-        children.push(this.$createElement(VDataFooter, {
-          ...data,
-          scopedSlots: getPrefixedScopedSlots('footer.', this.$scopedSlots),
-        }))
-      }
-
-      return children
-    },
-    genDefaultScopedSlot (props: DataScopeProps): VNode {
-      const simpleProps = {
-        height: this.height,
-        fixedHeader: this.fixedHeader,
-        dense: this.dense,
-      }
-
-      // if (this.virtualRows) {
-      //   return this.$createElement(VVirtualTable, {
-      //     props: Object.assign(simpleProps, {
-      //       items: props.items,
-      //       height: this.height,
-      //       rowHeight: this.dense ? 24 : 48,
-      //       headerHeight: this.dense ? 32 : 48,
-      //       // TODO: expose rest of props from virtual table?
-      //     }),
-      //     scopedSlots: {
-      //       items: ({ items }) => this.genItems(items, props) as any,
-      //     },
-      //   }, [
-      //     this.proxySlot('body.before', [this.genCaption(props), this.genHeaders(props)]),
-      //     this.proxySlot('bottom', this.genFooters(props)),
-      //   ])
-      // }
-
-      return this.$createElement(VSimpleTable, {
-        props: simpleProps,
-        class: {
-          'v-data-table--mobile': this.isMobile,
-        },
-      }, [
-        this.proxySlot('top', getSlot(this, 'top', {
-          ...props,
-          isMobile: this.isMobile,
-        }, true)),
-        this.genCaption(props),
-        this.genColgroup(props),
-        this.genHeaders(props),
-        this.genBody(props),
-        this.genFoot(props),
-        this.proxySlot('bottom', this.genFooters(props)),
-      ])
-    },
-    proxySlot (slot: string, content: VNodeChildren) {
-      return this.$createElement('template', { slot }, content)
-    },
-  },
-
-  render (): VNode {
-    return this.$createElement(VData, {
-      props: {
-        ...this.$props,
-        customFilter: this.customFilterWithColumns,
-        customSort: this.customSortWithHeaders,
-        itemsPerPage: this.computedItemsPerPage,
-      },
-      on: {
-        'update:options': (v: DataOptions, old: DataOptions) => {
-          this.internalGroupBy = v.groupBy || []
-          !deepEqual(v, old) && this.$emit('update:options', v)
-        },
-        'update:page': (v: number) => this.$emit('update:page', v),
-        'update:items-per-page': (v: number) => this.$emit('update:items-per-page', v),
-        'update:sort-by': (v: string | string[]) => this.$emit('update:sort-by', v),
-        'update:sort-desc': (v: boolean | boolean[]) => this.$emit('update:sort-desc', v),
-        'update:group-by': (v: string | string[]) => this.$emit('update:group-by', v),
-        'update:group-desc': (v: boolean | boolean[]) => this.$emit('update:group-desc', v),
-        pagination: (v: DataPagination, old: DataPagination) => !deepEqual(v, old) && this.$emit('pagination', v),
-        'current-items': (v: any[]) => {
-          this.internalCurrentItems = v
-          this.$emit('current-items', v)
-        },
-        'page-count': (v: number) => this.$emit('page-count', v),
-      },
-      scopedSlots: {
-        default: this.genDefaultScopedSlot,
-      },
-    })
-  },
-})
diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeader.sass b/packages/vuetify/src/components/VDataTable/VDataTableHeader.sass
deleted file mode 100644
index cb716e92601..00000000000
--- a/packages/vuetify/src/components/VDataTable/VDataTableHeader.sass
+++ /dev/null
@@ -1,80 +0,0 @@
-// Imports
-@import './_variables.scss'
-
-// Theme
-+theme(v-data-table) using ($material)
-  .v-data-table-header
-    th.sortable
-      .v-data-table-header__icon
-        color: map-deep-get($material, 'text', 'disabled')
-
-      &:hover,
-      &.active
-        color: map-deep-get($material, 'text', 'primary')
-
-      &.active
-        .v-data-table-header__icon
-          color: map-deep-get($material, 'text', 'primary')
-
-    &__sort-badge
-      background-color: map-get($material, 'dividers')
-      color: map-deep-get($material, 'text', 'primary')
-
-// Block
-.v-data-table-header
-  th
-    &.sortable
-      pointer-events: auto
-      cursor: pointer
-      outline: 0
-      .v-data-table-header__icon
-        line-height: .9
-
-    &.active, &:hover
-      .v-data-table-header__icon
-        transform: none
-        opacity: 1
-
-    &.desc
-      .v-data-table-header__icon
-        transform: rotate(-180deg)
-
-.v-data-table-header__icon
-  display: inline-block
-  opacity: 0
-  transition: .3s map-get($transition, 'swing')
-
-.v-data-table-header__sort-badge
-  display: inline-flex
-  justify-content: center
-  align-items: center
-  border: 0px
-  border-radius: 50%
-  min-width: $data-table-header-sort-badge-min-height
-  min-height: $data-table-header-sort-badge-min-width
-  height: $data-table-header-sort-badge-height
-  width: $data-table-header-sort-badge-width
-
-// Mobile
-.v-data-table-header-mobile
-  th
-    height: initial
-
-.v-data-table-header-mobile__wrapper
-  display: flex
-
-  .v-select
-    margin-bottom: $data-table-header-mobile-select-margin-bottom
-
-    .v-chip
-      height: $data-table-header-mobile-select-chip-height
-
-    .v-chip__close.desc
-      .v-icon
-        transform: rotate(-180deg)
-
-.v-data-table-header-mobile__select
-  min-width: $data-table-header-mobile-select-max-width
-  display: flex
-  align-items: center
-  justify-content: center
diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeader.ts b/packages/vuetify/src/components/VDataTable/VDataTableHeader.ts
deleted file mode 100644
index 3865e4462f3..00000000000
--- a/packages/vuetify/src/components/VDataTable/VDataTableHeader.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-// @ts-nocheck
-/* eslint-disable */
-
-// Styles
-import './VDataTableHeader.sass'
-
-// Components
-import VDataTableHeaderMobile from './VDataTableHeaderMobile'
-import VDataTableHeaderDesktop from './VDataTableHeaderDesktop'
-
-// Mixins
-import header from './mixins/header'
-
-// Utilities
-import dedupeModelListeners from '../../util/dedupeModelListeners'
-import mergeData from '../../util/mergeData'
-import rebuildSlots from '../../util/rebuildFunctionalSlots'
-
-// Types
-import Vue from 'vue'
-
-/* @vue/component */
-export default Vue.extend({
-  name: 'v-data-table-header',
-
-  functional: true,
-
-  props: {
-    ...header.options.props,
-    mobile: Boolean,
-  },
-
-  render (h, { props, data, slots }) {
-    dedupeModelListeners(data)
-    const children = rebuildSlots(slots(), h)
-
-    data = mergeData(data, { props })
-
-    if (props.mobile) {
-      return h(VDataTableHeaderMobile, data, children)
-    } else {
-      return h(VDataTableHeaderDesktop, data, children)
-    }
-  },
-})
diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaderDesktop.ts b/packages/vuetify/src/components/VDataTable/VDataTableHeaderDesktop.ts
deleted file mode 100644
index 0fdb6ce201f..00000000000
--- a/packages/vuetify/src/components/VDataTable/VDataTableHeaderDesktop.ts
+++ /dev/null
@@ -1,124 +0,0 @@
-// @ts-nocheck
-/* eslint-disable */
-
-// Helpers
-import { VNode, VNodeData } from 'vue'
-import mixins from '../../util/mixins'
-import header from './mixins/header'
-import { wrapInArray, convertToUnit } from '../../util/helpers'
-import { DataTableHeader } from 'vuetify/types'
-
-export default mixins(header).extend({
-  name: 'v-data-table-header-desktop',
-
-  methods: {
-    genGroupByToggle (header: DataTableHeader) {
-      return this.$createElement('span', {
-        on: {
-          click: (e: MouseEvent) => {
-            e.stopPropagation()
-            this.$emit('group', header.value)
-          },
-        },
-      }, ['group'])
-    },
-    getAria (beingSorted: boolean, isDesc: boolean) {
-      const $t = (key: string) => this.$vuetify.lang.t(`$vuetify.dataTable.ariaLabel.${key}`)
-
-      let ariaSort = 'none'
-      let ariaLabel = [
-        $t('sortNone'),
-        $t('activateAscending'),
-      ]
-
-      if (!beingSorted) {
-        return { ariaSort, ariaLabel: ariaLabel.join(' ') }
-      }
-
-      if (isDesc) {
-        ariaSort = 'descending'
-        ariaLabel = [
-          $t('sortDescending'),
-          $t(this.options.mustSort ? 'activateAscending' : 'activateNone'),
-        ]
-      } else {
-        ariaSort = 'ascending'
-        ariaLabel = [
-          $t('sortAscending'),
-          $t('activateDescending'),
-        ]
-      }
-
-      return { ariaSort, ariaLabel: ariaLabel.join(' ') }
-    },
-    genHeader (header: DataTableHeader) {
-      const data: Required<Pick<VNodeData, 'attrs' | 'on' | 'class' | 'style'>> = {
-        attrs: {
-          role: 'columnheader',
-          scope: 'col',
-          'aria-label': header.text || '',
-        },
-        style: {
-          width: convertToUnit(header.width),
-          minWidth: convertToUnit(header.width),
-        },
-        class: [
-          `text-${header.align || 'start'}`,
-          ...wrapInArray(header.class),
-          header.divider && 'v-data-table__divider',
-        ],
-        on: {},
-      }
-      const children = []
-
-      if (header.value === 'data-table-select' && !this.singleSelect) {
-        return this.$createElement('th', data, [this.genSelectAll()])
-      }
-
-      children.push(
-        this.$scopedSlots[header.value]
-          ? this.$scopedSlots[header.value]!({ header })
-          : this.$createElement('span', [header.text])
-      )
-
-      if (!this.disableSort && (header.sortable || !header.hasOwnProperty('sortable'))) {
-        data.on.click = () => this.$emit('sort', header.value)
-
-        const sortIndex = this.options.sortBy.findIndex(k => k === header.value)
-        const beingSorted = sortIndex >= 0
-        const isDesc = this.options.sortDesc[sortIndex]
-
-        data.class.push('sortable')
-
-        const { ariaLabel, ariaSort } = this.getAria(beingSorted, isDesc)
-
-        data.attrs['aria-label'] += `${header.text ? ': ' : ''}${ariaLabel}`
-        data.attrs['aria-sort'] = ariaSort
-
-        if (beingSorted) {
-          data.class.push('active')
-          data.class.push(isDesc ? 'desc' : 'asc')
-        }
-
-        if (header.align === 'end') children.unshift(this.genSortIcon())
-        else children.push(this.genSortIcon())
-
-        if (this.options.multiSort && beingSorted) {
-          children.push(this.$createElement('span', { class: 'v-data-table-header__sort-badge' }, [String(sortIndex + 1)]))
-        }
-      }
-
-      if (this.showGroupBy && header.groupable !== false) children.push(this.genGroupByToggle(header))
-
-      return this.$createElement('th', data, children)
-    },
-  },
-
-  render (): VNode {
-    return this.$createElement('thead', {
-      staticClass: 'v-data-table-header',
-    }, [
-      this.$createElement('tr', this.headers.map(header => this.genHeader(header))),
-    ])
-  },
-})
diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaderMobile.ts b/packages/vuetify/src/components/VDataTable/VDataTableHeaderMobile.ts
deleted file mode 100644
index e69280f59a6..00000000000
--- a/packages/vuetify/src/components/VDataTable/VDataTableHeaderMobile.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-// @ts-nocheck
-/* eslint-disable */
-
-import { VNode, VNodeChildrenArrayContents } from 'vue'
-import mixins from '../../util/mixins'
-import VSelect from '../VSelect/VSelect'
-import VChip from '../VChip'
-import header from './mixins/header'
-import { wrapInArray } from '../../util/helpers'
-
-export default mixins(header).extend({
-  name: 'v-data-table-header-mobile',
-
-  props: {
-    sortByText: {
-      type: String,
-      default: '$vuetify.dataTable.sortBy',
-    },
-  },
-
-  methods: {
-    genSortChip (props: any) {
-      const children: VNodeChildrenArrayContents = [props.item.text]
-
-      const sortIndex = this.options.sortBy.findIndex(k => k === props.item.value)
-      const beingSorted = sortIndex >= 0
-      const isDesc = this.options.sortDesc[sortIndex]
-
-      children.push(this.$createElement('div', {
-        staticClass: 'v-chip__close',
-        class: {
-          sortable: true,
-          active: beingSorted,
-          asc: beingSorted && !isDesc,
-          desc: beingSorted && isDesc,
-        },
-      }, [this.genSortIcon()]))
-
-      return this.$createElement(VChip, {
-        staticClass: 'sortable',
-        on: {
-          click: (e: MouseEvent) => {
-            e.stopPropagation()
-            this.$emit('sort', props.item.value)
-          },
-        },
-      }, children)
-    },
-    genSortSelect (items: any[]) {
-      return this.$createElement(VSelect, {
-        props: {
-          label: this.$vuetify.lang.t(this.sortByText),
-          items,
-          hideDetails: true,
-          multiple: this.options.multiSort,
-          value: this.options.multiSort ? this.options.sortBy : this.options.sortBy[0],
-          menuProps: { closeOnContentClick: true },
-        },
-        on: {
-          change: (v: string | string[]) => this.$emit('sort', v),
-        },
-        scopedSlots: {
-          selection: props => this.genSortChip(props),
-        },
-      })
-    },
-  },
-
-  render (h): VNode {
-    const children: VNodeChildrenArrayContents = []
-
-    const header = this.headers.find(h => h.value === 'data-table-select')
-    if (header && !this.singleSelect) {
-      children.push(this.$createElement('div', {
-        class: [
-          'v-data-table-header-mobile__select',
-          ...wrapInArray(header.class),
-        ],
-        attrs: {
-          width: header.width,
-        },
-      }, [this.genSelectAll()]))
-    }
-
-    const sortHeaders = this.headers
-      .filter(h => h.sortable !== false && h.value !== 'data-table-select')
-      .map(h => ({
-        text: h.text,
-        value: h.value,
-      }))
-
-    if (!this.disableSort && sortHeaders.length) {
-      children.push(this.genSortSelect(sortHeaders))
-    }
-
-    const th = children.length
-      ? h('th', [h('div', { staticClass: 'v-data-table-header-mobile__wrapper' }, children)])
-      : undefined
-
-    const tr = h('tr', [th])
-
-    return h('thead', {
-      staticClass: 'v-data-table-header v-data-table-header-mobile',
-    }, [tr])
-  },
-})
diff --git a/packages/vuetify/src/components/VDataTable/VEditDialog.sass b/packages/vuetify/src/components/VDataTable/VEditDialog.sass
deleted file mode 100644
index 875283ad66c..00000000000
--- a/packages/vuetify/src/components/VDataTable/VEditDialog.sass
+++ /dev/null
@@ -1,22 +0,0 @@
-@import './_variables.scss'
-
-+theme(v-small-dialog) using ($material)
-  &__menu-content,
-  &__actions
-    background: map-get($material, 'cards')
-
-.v-small-dialog
-  display: block
-
-  &__activator
-    cursor: pointer
-    &__content
-      display: inline-block
-
-  &__content
-    padding: $edit-dialog-content-padding
-
-  &__actions
-    padding: $edit-dialog-actions-padding
-    text-align: right
-    white-space: pre
diff --git a/packages/vuetify/src/components/VDataTable/VEditDialog.ts b/packages/vuetify/src/components/VDataTable/VEditDialog.ts
deleted file mode 100644
index 9d4437b9bbd..00000000000
--- a/packages/vuetify/src/components/VDataTable/VEditDialog.ts
+++ /dev/null
@@ -1,142 +0,0 @@
-// @ts-nocheck
-/* eslint-disable */
-
-// Styles
-import './VEditDialog.sass'
-
-// Mixins
-import Returnable from '../../mixins/returnable'
-import Themeable from '../../mixins/themeable'
-
-// Utils
-import { keyCodes } from '../../util/helpers'
-
-// Component
-import VBtn from '../VBtn'
-import VMenu from '../VMenu'
-
-// Types
-import { VNode, VNodeChildren } from 'vue'
-import mixins from '../../util/mixins'
-
-/* @vue/component */
-export default mixins(Returnable, Themeable).extend({
-  name: 'v-edit-dialog',
-
-  props: {
-    cancelText: {
-      default: 'Cancel',
-    },
-    large: Boolean,
-    eager: Boolean,
-    persistent: Boolean,
-    saveText: {
-      default: 'Save',
-    },
-    transition: {
-      type: String,
-      default: 'slide-x-reverse-transition',
-    },
-  },
-
-  data () {
-    return {
-      isActive: false,
-    }
-  },
-
-  watch: {
-    isActive (val) {
-      if (val) {
-        this.$emit('open')
-        setTimeout(this.focus, 50) // Give DOM time to paint
-      } else {
-        this.$emit('close')
-      }
-    },
-  },
-
-  methods: {
-    cancel () {
-      this.isActive = false
-      this.$emit('cancel')
-    },
-    focus () {
-      const input = (this.$refs.content as Element).querySelector('input')
-      input && input.focus()
-    },
-    genButton (fn: Function, text: VNodeChildren): VNode {
-      return this.$createElement(VBtn, {
-        props: {
-          text: true,
-          color: 'primary',
-          light: true,
-        },
-        on: { click: fn },
-      }, text)
-    },
-    genActions (): VNode {
-      return this.$createElement('div', {
-        class: 'v-small-dialog__actions',
-      }, [
-        this.genButton(this.cancel, this.cancelText),
-        this.genButton(() => {
-          this.save(this.returnValue)
-          this.$emit('save')
-        }, this.saveText),
-      ])
-    },
-    genContent (): VNode {
-      return this.$createElement('div', {
-        staticClass: 'v-small-dialog__content',
-        on: {
-          keydown: (e: KeyboardEvent) => {
-            e.keyCode === keyCodes.esc && this.cancel()
-            if (e.keyCode === keyCodes.enter) {
-              this.save(this.returnValue)
-              this.$emit('save')
-            }
-          },
-        },
-        ref: 'content',
-      }, [this.$slots.input])
-    },
-  },
-
-  render (h): VNode {
-    return h(VMenu, {
-      staticClass: 'v-small-dialog',
-      class: this.themeClasses,
-      props: {
-        contentClass: 'v-small-dialog__menu-content',
-        transition: this.transition,
-        origin: 'top right',
-        right: true,
-        value: this.isActive,
-        closeOnClick: !this.persistent,
-        closeOnContentClick: false,
-        eager: this.eager,
-        light: this.light,
-        dark: this.dark,
-      },
-      on: {
-        input: (val: boolean) => (this.isActive = val),
-      },
-      scopedSlots: {
-        activator: ({ on }) => {
-          return h('div', {
-            staticClass: 'v-small-dialog__activator',
-            on,
-          }, [
-            h('span', {
-              staticClass: 'v-small-dialog__activator__content',
-            }, this.$slots.default),
-          ])
-        },
-      },
-    }, [
-      this.genContent(),
-      this.large ? this.genActions() : null,
-    ])
-  },
-})
diff --git a/packages/vuetify/src/components/VDataTable/VVirtualTable.sass b/packages/vuetify/src/components/VDataTable/VVirtualTable.sass
deleted file mode 100644
index 24db449c383..00000000000
--- a/packages/vuetify/src/components/VDataTable/VVirtualTable.sass
+++ /dev/null
@@ -1,13 +0,0 @@
-// Imports
-@import './_variables.scss'
-
-.v-virtual-table
-  position: relative
-
-.v-virtual-table__wrapper
-  display: flex
-
-.v-virtual-table__table
-  width: 100%
-  height: 100%
-  overflow-x: auto
diff --git a/packages/vuetify/src/components/VDataTable/VVirtualTable.ts b/packages/vuetify/src/components/VDataTable/VVirtualTable.ts
deleted file mode 100644
index d0ce8d52e00..00000000000
--- a/packages/vuetify/src/components/VDataTable/VVirtualTable.ts
+++ /dev/null
@@ -1,166 +0,0 @@
-// @ts-nocheck
-/* eslint-disable */
-
-import './VVirtualTable.sass'
-
-// Components
-import VSimpleTable from './VSimpleTable'
-
-// Types
-import { VNode, VNodeChildren } from 'vue'
-import { PropValidator } from 'vue/types/options'
-import mixins from '../../util/mixins'
-
-// Utiltiies
-import { convertToUnit, debounce } from '../../util/helpers'
-
-// Types
-const baseMixins = mixins(VSimpleTable)
-
-interface options extends InstanceType<typeof baseMixins> {
-  $refs: {
-    table: HTMLElement
-  }
-  cachedItems: VNodeChildren
-}
-
-export default baseMixins.extend<options>().extend({
-  name: 'v-virtual-table',
-
-  props: {
-    chunkSize: {
-      type: Number,
-      default: 25,
-    },
-    headerHeight: {
-      type: Number,
-      default: 48,
-    },
-    items: {
-      type: Array,
-      default: () => ([]),
-    } as PropValidator<any[]>,
-    rowHeight: {
-      type: Number,
-      default: 48,
-    },
-  },
-
-  data: () => ({
-    scrollTop: 0,
-    oldChunk: 0,
-    scrollDebounce: null as any,
-    invalidateCache: false,
-  }),
-
-  computed: {
-    itemsLength (): number {
-      return this.items.length
-    },
-    totalHeight (): number {
-      return (this.itemsLength * this.rowHeight) + this.headerHeight
-    },
-    topIndex (): number {
-      return Math.floor(this.scrollTop / this.rowHeight)
-    },
-    chunkIndex (): number {
-      return Math.floor(this.topIndex / this.chunkSize)
-    },
-    startIndex (): number {
-      return Math.max(0, (this.chunkIndex * this.chunkSize) - this.chunkSize)
-    },
-    offsetTop (): number {
-      return Math.max(0, this.startIndex * this.rowHeight)
-    },
-    stopIndex (): number {
-      return Math.min(this.startIndex + (this.chunkSize * 3), this.itemsLength)
-    },
-    offsetBottom (): number {
-      return Math.max(0, (this.itemsLength - this.stopIndex - this.startIndex) * this.rowHeight)
-    },
-  },
-
-  watch: {
-    chunkIndex (newValue, oldValue) {
-      this.oldChunk = oldValue
-    },
-    items () {
-      this.cachedItems = null
-      this.$refs.table.scrollTop = 0
-    },
-  },
-
-  created () {
-    this.cachedItems = null
-  },
-
-  mounted () {
-    this.scrollDebounce = debounce(this.onScroll, 50)
-
-    this.$refs.table.addEventListener('scroll', this.scrollDebounce, { passive: true })
-  },
-
-  beforeDestroy () {
-    this.$refs.table.removeEventListener('scroll', this.scrollDebounce)
-  },
-
-  methods: {
-    createStyleHeight (height: number) {
-      return {
-        height: `${height}px`,
-      }
-    },
-    genBody () {
-      if (this.cachedItems === null || this.chunkIndex !== this.oldChunk) {
-        this.cachedItems = this.genItems()
-        this.oldChunk = this.chunkIndex
-      }
-
-      return this.$createElement('tbody', [
-        this.$createElement('tr', { style: this.createStyleHeight(this.offsetTop) }),
-        this.cachedItems,
-        this.$createElement('tr', { style: this.createStyleHeight(this.offsetBottom) }),
-      ])
-    },
-    genItems () {
-      return this.$scopedSlots.items!({ items: this.items.slice(this.startIndex, this.stopIndex) })
-    },
-    onScroll (e: Event) {
-      const target = e.target as Element
-      this.scrollTop = target.scrollTop
-    },
-    genTable () {
-      return this.$createElement('div', {
-        ref: 'table',
-        staticClass: 'v-virtual-table__table',
-      }, [
-        this.$createElement('table', [
-          this.$slots['body.before'],
-          this.genBody(),
-          this.$slots['body.after'],
-        ]),
-      ])
-    },
-    genWrapper () {
-      return this.$createElement('div', {
-        staticClass: 'v-virtual-table__wrapper',
-        style: {
-          height: convertToUnit(this.height),
-        },
-      }, [
-        this.genTable(),
-      ])
-    },
-  },
-
-  render (h): VNode {
-    return h('div', {
-      staticClass: 'v-data-table v-virtual-table',
-      class: this.classes,
-    }, [
-      this.$slots.top,
-      this.genWrapper(),
-      this.$slots.bottom,
-    ])
-  },
-})
diff --git a/packages/vuetify/src/components/VDataTable/_variables.scss b/packages/vuetify/src/components/VDataTable/_variables.scss
deleted file mode 100644
index 2fb95efad50..00000000000
--- a/packages/vuetify/src/components/VDataTable/_variables.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@import '../../styles/styles.sass';
-
-$data-table-border-radius: $border-radius-root !default;
-$data-table-dense-header-height: 32px !default;
-$data-table-dense-row-height: $data-table-dense-header-height !default;
-$data-table-expanded-content-box-shadow: inset 0px 4px 8px -5px rgba(50, 50, 50, 0.75), inset 0px -4px 8px -5px rgba(50, 50, 50, 0.75) !default;
-$data-table-header-mobile-select-chip-height: 24px !default;
-$data-table-header-mobile-select-margin-bottom: 8px !default;
-$data-table-header-mobile-select-max-width: 56px !default;
-$data-table-header-sort-badge-height: 18px !default;
-$data-table-header-sort-badge-min-height: 18px !default;
-$data-table-header-sort-badge-min-width: 18px !default;
-$data-table-header-sort-badge-width: 18px !default;
-$data-table-mobile-row-header-font-weight: 600 !default;
-$data-table-mobile-row-min-height: 48px !default;
-$data-table-progress-border-radius: $data-table-border-radius $data-table-border-radius 0 0 !default;
-$data-table-regular-header-height: 48px !default;
-$data-table-regular-row-height: 48px !default;
-$data-table-row-group-children-td-height: 35px !default;
-$data-table-scroll-bar-width: 17px !default;
-$edit-dialog-content-padding: 0 16px !default;
-$edit-dialog-actions-padding: 8px !default;
-$data-table-regular-header-font-size: map-deep-get($typography, 'caption', 'size') !default;
-$data-table-regular-row-font-size: map-deep-get($typography, 'subtitle-2', 'size') !default;
diff --git a/packages/vuetify/src/components/VDataTable/index.ts b/packages/vuetify/src/components/VDataTable/index.ts
deleted file mode 100644
index e2090ea730b..00000000000
--- a/packages/vuetify/src/components/VDataTable/index.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// @ts-nocheck
-/* eslint-disable */
-
-import { createSimpleFunctional } from '@/util'
-
-import VDataTable from './VDataTable'
-import VDataTableHeader from './VDataTableHeader'
-import VEditDialog from './VEditDialog'
-import VSimpleTable from './VSimpleTable'
-import VVirtualTable from './VVirtualTable'
-
-const VTableOverflow = createSimpleFunctional('v-table__overflow')
-
-export { VDataTable, VEditDialog, VTableOverflow, VDataTableHeader, VSimpleTable, VVirtualTable }
-
-export default {
-  $_vuetify_subcomponents: {
-    VDataTable,
-    VDataTableHeader,
-    VEditDialog,
-    VTableOverflow,
-    VSimpleTable,
-    VVirtualTable,
-  },
-}
diff --git a/packages/vuetify/src/components/VDataTable/mixins/__tests__/__snapshots__/header.spec.ts.snap b/packages/vuetify/src/components/VDataTable/mixins/__tests__/__snapshots__/header.spec.ts.snap
deleted file mode 100644
index a0454e5c008..00000000000
--- a/packages/vuetify/src/components/VDataTable/mixins/__tests__/__snapshots__/header.spec.ts.snap
+++ /dev/null
@@ -1,81 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`VDataTable/header.ts should generate select 1`] = `
-<div>
-  <div class="v-data-table__checkbox v-simple-checkbox">
-    <div class="v-input--selection-controls__input">
-      <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light"
-      >
-        $checkboxOff
-      </i>
-      <div class="v-input--selection-controls__ripple">
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VDataTable/header.ts should generate select 2`] = `
-<div>
-  <div class="v-data-table__checkbox v-simple-checkbox">
-    <div class="v-input--selection-controls__input">
-      <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light"
-      >
-        $checkboxOn
-      </i>
-      <div class="v-input--selection-controls__ripple">
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VDataTable/header.ts should generate select 3`] = `
-<div>
-  <div class="v-data-table__checkbox v-simple-checkbox">
-    <div class="v-input--selection-controls__input">
-      <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light"
-      >
-        $checkboxIndeterminate
-      </i>
-      <div class="v-input--selection-controls__ripple">
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VDataTable/header.ts should generate select scoped slot 1`] = `
-<div>
-  <div class="test">
-    {"props":{"value":false,"indeterminate":false,"color":""},"on":{}}
-  </div>
-</div>
-`;
-
-exports[`VDataTable/header.ts should generate select scoped slot 2`] = `
-<div>
-  <div class="test">
-    {"props":{"value":true,"indeterminate":false,"color":""},"on":{}}
-  </div>
-</div>
-`;
-
-exports[`VDataTable/header.ts should generate select scoped slot 3`] = `
-<div>
-  <div class="test">
-    {"props":{"value":false,"indeterminate":true,"color":""},"on":{}}
-  </div>
-</div>
-`;
-
-exports[`VDataTable/header.ts should generate sort icon 1`] = `
-<i aria-hidden="true"
-   class="v-icon notranslate v-data-table-header__icon mdi mdi-sort theme--light"
-   style="font-size: 18px;"
->
-</i>
-`;
diff --git a/packages/vuetify/src/components/VDataTable/mixins/__tests__/header.spec.ts b/packages/vuetify/src/components/VDataTable/mixins/__tests__/header.spec.ts
deleted file mode 100644
index f7193fe2e12..00000000000
--- a/packages/vuetify/src/components/VDataTable/mixins/__tests__/header.spec.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-// @ts-nocheck
-/* eslint-disable */
-
-// import Header from '../header'
-import {
-  mount,
-  MountOptions,
-  Wrapper,
-} from '@vue/test-utils'
-// import { wrapInArray } from '../../../../util/helpers'
-
-describe.skip('VDataTable/header.ts', () => {
-  type Instance = InstanceType<typeof Header>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
-  beforeEach(() => {
-    mountFunction = (options?: MountOptions<Instance>) => {
-      return mount(Header, {
-        props: {
-          headers: [],
-          ...options.props,
-        },
-        render (h) {
-          return h('div')
-        },
-        ...options,
-      })
-    }
-  })
-
-  it('should generate sort icon', async () => {
-    const wrapper = mountFunction({
-      propsData: {
-        sortIcon: 'mdi-sort',
-      },
-      render () {
-        return this.genSortIcon()
-      },
-    })
-
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-
-  it('should generate select', async () => {
-    const wrapper = mountFunction({
-      render (h) {
-        return h('div', wrapInArray(this.genSelectAll()))
-      },
-    })
-
-    wrapper.setProps({
-      everyItem: false,
-      someItems: false,
-    })
-    expect(wrapper.html()).toMatchSnapshot()
-
-    wrapper.setProps({
-      everyItem: true,
-      someItems: false,
-    })
-    expect(wrapper.html()).toMatchSnapshot()
-
-    wrapper.setProps({
-      everyItem: false,
-      someItems: true,
-    })
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-
-  it('should generate select scoped slot', async () => {
-    const sel = jest.fn()
-    const wrapper = mountFunction({
-      render (h) {
-        return h('div', wrapInArray(this.genSelectAll()))
-      },
-      scopedSlots: {
-        'data-table-select' (props) {
-          return this.$createElement('div', {
-            on: props.on,
-            staticClass: 'test',
-          }, [JSON.stringify(props)])
-        },
-      },
-      listeners: {
-        'toggle-select-all': sel,
-      },
-    })
-
-    wrapper.setProps({
-      everyItem: false,
-      someItems: false,
-    })
-    expect(wrapper.html()).toMatchSnapshot()
-
-    wrapper.setProps({
-      everyItem: true,
-      someItems: false,
-    })
-    expect(wrapper.html()).toMatchSnapshot()
-
-    wrapper.setProps({
-      everyItem: false,
-      someItems: true,
-    })
-    expect(wrapper.html()).toMatchSnapshot()
-
-    const select = wrapper.find('.test')
-    select.trigger('input', { value: true })
-    expect(sel.mock.calls[0][0].value).toBeTruthy()
-    select.trigger('input', { value: false })
-    expect(sel.mock.calls[1][0].value).toBeFalsy()
-  })
-})
diff --git a/packages/vuetify/src/components/VDataTable/mixins/header.ts b/packages/vuetify/src/components/VDataTable/mixins/header.ts
deleted file mode 100644
index 90ddaa77399..00000000000
--- a/packages/vuetify/src/components/VDataTable/mixins/header.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-// @ts-nocheck
-/* eslint-disable */
-
-import { VDataTable } from '../'
-import VIcon from '../../VIcon'
-import VSimpleCheckbox from '../../VCheckbox/VSimpleCheckbox'
-import ripple from '../../../directives/ripple'
-
-import Vue from 'vue'
-import { PropValidator } from 'vue/types/options'
-import mixins from '../../../util/mixins'
-import { DataOptions, DataTableHeader } from 'vuetify/types'
-
-type VDataTableInstance = InstanceType<typeof VDataTable>
-
-interface options extends Vue {
-  dataTable: VDataTableInstance
-}
-
-export default mixins<options>().extend({
-  // https://github.com/vuejs/vue/issues/6872
-  directives: {
-    ripple,
-  },
-
-  props: {
-    headers: {
-      type: Array,
-      default: () => ([]),
-    } as PropValidator<DataTableHeader[]>,
-    options: {
-      type: Object,
-      default: () => ({
-        page: 1,
-        itemsPerPage: 10,
-        sortBy: [],
-        sortDesc: [],
-        groupBy: [],
-        groupDesc: [],
-        multiSort: false,
-        mustSort: false,
-      }),
-    } as PropValidator<DataOptions>,
-    checkboxColor: String,
-    sortIcon: {
-      type: String,
-      default: '$sort',
-    },
-    everyItem: Boolean,
-    someItems: Boolean,
-    showGroupBy: Boolean,
-    singleSelect: Boolean,
-    disableSort: Boolean,
-  },
-
-  methods: {
-    genSelectAll () {
-      const data = {
-        props: {
-          value: this.everyItem,
-          indeterminate: !this.everyItem && this.someItems,
-          color: this.checkboxColor ?? '',
-        },
-        on: {
-          input: (v: boolean) => this.$emit('toggle-select-all', v),
-        },
-      }
-
-      if (this.$scopedSlots['data-table-select']) {
-        return this.$scopedSlots['data-table-select']!(data)
-      }
-
-      return this.$createElement(VSimpleCheckbox, {
-        staticClass: 'v-data-table__checkbox',
-        ...data,
-      })
-    },
-    genSortIcon () {
-      return this.$createElement(VIcon, {
-        staticClass: 'v-data-table-header__icon',
-        props: {
-          size: 18,
-        },
-      }, [this.sortIcon])
-    },
-  },
-})
diff --git a/packages/vuetify/src/components/VTable/VTable.sass b/packages/vuetify/src/components/VTable/VTable.sass
index f6b48014324..79a736e3cb5 100644
--- a/packages/vuetify/src/components/VTable/VTable.sass
+++ b/packages/vuetify/src/components/VTable/VTable.sass
@@ -14,9 +14,9 @@
     > table
       > thead
         > tr
-          &:last-child
-            > th
-              border-bottom: $table-border
+          > th
+            border-bottom: $table-border
+            color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity))
 
       > tbody
         > tr
@@ -60,6 +60,8 @@
 
 // Block
 .v-table
+  --v-table-header-height: $table-header-height
+
   border-radius: inherit
   // Do not inherit line-height
   line-height: $table-line-height
@@ -76,21 +78,13 @@
         > tr
           > td,
           > th
-            padding: 0 16px
+            padding: $table-column-padding
             transition: height settings.$standard-easing
 
           > th
+            font-weight: $table-header-font-weight
             user-select: none
-            font-size: $table-header-font-size
-
-            @include tools.ltr()
-              text-align: left
-
-            @include tools.rtl()
-              text-align: right
-
-          > td
-            font-size: $table-row-font-size
+            text-align: start
 
   @at-root
     @include tools.density('v-table', $table-density) using ($modifier)
@@ -104,13 +98,12 @@
                 height: $table-header-height + $modifier
 
               > td
-                height: $table-row-height + $modifier
+                height: calc($table-row-height + $modifier)
 
 // Elements
 .v-table__wrapper
   border-radius: inherit
-  overflow-x: auto
-  overflow-y: hidden
+  overflow: auto
 
 // Modifiers
 .v-table--has-top
diff --git a/packages/vuetify/src/components/VTable/VTable.tsx b/packages/vuetify/src/components/VTable/VTable.tsx
index 3b3a010c8db..855c34d2fcb 100644
--- a/packages/vuetify/src/components/VTable/VTable.tsx
+++ b/packages/vuetify/src/components/VTable/VTable.tsx
@@ -45,7 +45,7 @@ export const VTable = defineComponent({
       >
         { slots.top?.() }
 
-        { slots.default && (
+        { slots.wrapper ? slots.wrapper() : slots.default && (
           <div
             class="v-table__wrapper"
             style={{ height: convertToUnit(props.height) }}
diff --git a/packages/vuetify/src/components/VTable/_variables.scss b/packages/vuetify/src/components/VTable/_variables.scss
index 62e427175d2..ddaad4f8c30 100644
--- a/packages/vuetify/src/components/VTable/_variables.scss
+++ b/packages/vuetify/src/components/VTable/_variables.scss
@@ -7,14 +7,16 @@
 $table-background: rgb(var(--v-theme-surface)) !default;
 $table-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default;
 $table-density: ('default': 0, 'comfortable': -2, 'compact': -4) !default;
-$table-header-height: 48px !default;
-$table-row-height: $table-header-height !default;
+$table-header-height: 56px !default;
+$table-header-font-weight: 500 !default;
 $table-header-font-size: tools.map-deep-get(settings.$typography, 'caption', 'size') !default;
+$table-row-height: var(--v-table-row-height, 52px) !default;
 $table-row-font-size: tools.map-deep-get(settings.$typography, 'subtitle-2', 'size') !default;
 $table-border-color: rgba(var(--v-border-color), var(--v-border-opacity)) !default;
 $table-border: thin solid $table-border-color !default;
 $table-hover-color: rgba(var(--v-border-color), var(--v-hover-opacity)) !default;
 $table-line-height: 1.5 !default;
+$table-column-padding: 0 16px !default;
 
 // Lists
 $table-theme: (
diff --git a/packages/vuetify/src/composables/__tests__/filter.spec.ts b/packages/vuetify/src/composables/__tests__/filter.spec.ts
index 66bc7c056e2..fe7037efc89 100644
--- a/packages/vuetify/src/composables/__tests__/filter.spec.ts
+++ b/packages/vuetify/src/composables/__tests__/filter.spec.ts
@@ -1,7 +1,7 @@
 // Utilities
 import { defaultFilter, filterItems, useFilter } from '../filter'
 import { describe, expect, it } from '@jest/globals'
-import { ref } from 'vue'
+import { nextTick, ref } from 'vue'
 import { transformItem, transformItems } from '../items'
 
 describe('filter', () => {
@@ -22,7 +22,7 @@ describe('filter', () => {
   })
 
   describe('filterItems', () => {
-    const items = Array.from({ length: 5 }, (v, k) => ({
+    const items = Array.from({ length: 5 }, (v, k) => transformItem({} as any, {
       title: `Foo-${k}`,
       value: `fizz-${k}`,
     }))
@@ -51,7 +51,7 @@ describe('filter', () => {
         title: (s: string, q: string) => s === q,
         value: (s: string) => s === '1',
       }
-      const items = [
+      const items = transformItems({} as any, [
         {
           title: 'foo',
           subtitle: 'bar',
@@ -76,7 +76,7 @@ describe('filter', () => {
           value: '1',
           custom: 'buzz',
         },
-      ]
+      ])
       const filterKeys = ['title', 'value', 'subtitle', 'custom']
 
       expect(filterItems(items, 'foo', {
@@ -132,7 +132,7 @@ describe('filter', () => {
       expect(filteredItems.value).toHaveLength(expected)
     })
 
-    it('should accept a custom filter function', () => {
+    it('should accept a custom filter function', async () => {
       function filterFn (text: string, query?: string, item?: any) {
         if (typeof query !== 'string') return true
         return item.title.toLocaleLowerCase().includes(query.toLocaleLowerCase())
@@ -147,18 +147,17 @@ describe('filter', () => {
       ]))
       const { filteredItems } = useFilter(props, items, query)
 
-      expect(filteredItems.value).toHaveLength(2)
-      expect(filteredItems.value.map(({ item }) => item.raw.title)).toEqual(['fizz', 'buzz'])
+      expect(filteredItems.value.map(item => item.raw.title)).toEqual(['fizz', 'buzz'])
 
       query.value = 'foo'
+      await nextTick()
 
-      expect(filteredItems.value).toHaveLength(1)
-      expect(filteredItems.value.map(({ item }) => item.raw.title)).toEqual(['foo'])
+      expect(filteredItems.value.map(item => item.raw.title)).toEqual(['foo'])
 
       items.value.push(transformItem(itemProps, { title: 'foobar' }))
+      await nextTick()
 
-      expect(filteredItems.value).toHaveLength(2)
-      expect(filteredItems.value.map(({ item }) => item.raw.title)).toEqual(['foo', 'foobar'])
+      expect(filteredItems.value.map(item => item.raw.title)).toEqual(['foo', 'foobar'])
     })
   })
 })
diff --git a/packages/vuetify/src/composables/filter.ts b/packages/vuetify/src/composables/filter.ts
index fd848222bce..030fb892ce0 100644
--- a/packages/vuetify/src/composables/filter.ts
+++ b/packages/vuetify/src/composables/filter.ts
@@ -3,7 +3,7 @@
 
 // Utilities
 import { getPropertyFromItem, propsFactory, wrapInArray } from '@/util'
-import { computed, unref } from 'vue'
+import { computed, ref, unref, watchEffect } from 'vue'
 
 // Types
 import type { PropType, Ref } from 'vue'
@@ -49,7 +49,7 @@ export const makeFilterProps = propsFactory({
 }, 'filter')
 
 export function filterItems (
-  items: any[],
+  items: InternalItem[],
   query: string,
   options?: {
     customKeyFilter?: FilterKeyFunctions
@@ -69,7 +69,7 @@ export function filterItems (
 
   loop:
   for (let i = 0; i < items.length; i++) {
-    const item = items[i]
+    const item = items[i].raw
     const customMatches: Record<string, FilterMatch> = {}
     const defaultMatches: Record<string, FilterMatch> = {}
     let match: FilterMatch = -1
@@ -126,9 +126,9 @@ export function filterItems (
   return array
 }
 
-export function useFilter (
+export function useFilter <T extends InternalItem> (
   props: FilterProps,
-  items: MaybeRef<InternalItem[]>,
+  items: MaybeRef<T[]>,
   query?: Ref<string | undefined>,
 ) {
   const strQuery = computed(() => (
@@ -136,9 +136,15 @@ export function useFilter (
     typeof query?.value !== 'number'
   ) ? '' : String(query.value))
 
-  const filteredItems = computed(() => {
+  const filteredItems: Ref<T[]> = ref([])
+  const filteredMatches: Ref<Map<unknown, Record<string, FilterMatch>>> = ref(new Map())
+
+  watchEffect(() => {
+    filteredItems.value = []
+    filteredMatches.value = new Map()
+
     const transformedItems = unref(items)
-    const matches = filterItems(
+    const results = filterItems(
       transformedItems,
       strQuery.value,
       {
@@ -150,11 +156,16 @@ export function useFilter (
       },
     )
 
-    return matches.map(({ index, matches }) => ({
-      item: transformedItems[index],
-      matches,
-    }))
+    results.forEach(({ index, matches }) => {
+      const item = transformedItems[index]
+      filteredItems.value.push(item)
+      filteredMatches.value.set(item.value, matches)
+    })
   })
 
-  return { filteredItems }
+  function getMatches (item: T) {
+    return filteredMatches.value.get(item.value)
+  }
+
+  return { filteredItems, filteredMatches, getMatches }
 }
diff --git a/packages/vuetify/src/composables/icons.tsx b/packages/vuetify/src/composables/icons.tsx
index 1618d91398b..b235284cdbb 100644
--- a/packages/vuetify/src/composables/icons.tsx
+++ b/packages/vuetify/src/composables/icons.tsx
@@ -28,7 +28,8 @@ export interface IconAliases {
   checkboxOff: IconValue
   checkboxIndeterminate: IconValue
   delimiter: IconValue
-  sort: IconValue
+  sortAsc: IconValue
+  sortDesc: IconValue
   expand: IconValue
   menu: IconValue
   subgroup: IconValue
@@ -100,6 +101,7 @@ export const VComponentIcon = defineComponent({
     }
   },
 })
+export type VComponentIcon = InstanceType<typeof VComponentIcon>
 
 export const VSvgIcon = defineComponent({
   name: 'VSvgIcon',
@@ -126,6 +128,7 @@ export const VSvgIcon = defineComponent({
     }
   },
 })
+export type VSvgIcon = InstanceType<typeof VSvgIcon>
 
 export const VLigatureIcon = defineComponent({
   name: 'VLigatureIcon',
@@ -138,6 +141,7 @@ export const VLigatureIcon = defineComponent({
     }
   },
 })
+export type VLigatureIcon = InstanceType<typeof VLigatureIcon>
 
 export const VClassIcon = defineComponent({
   name: 'VClassIcon',
@@ -150,6 +154,7 @@ export const VClassIcon = defineComponent({
     }
   },
 })
+export type VClassIcon = InstanceType<typeof VClassIcon>
 
 export const defaultSets: Record<string, IconSet> = {
   svg: {
diff --git a/packages/vuetify/src/iconsets/fa.ts b/packages/vuetify/src/iconsets/fa.ts
index aa4e409e9fb..0faec659a2d 100644
--- a/packages/vuetify/src/iconsets/fa.ts
+++ b/packages/vuetify/src/iconsets/fa.ts
@@ -21,7 +21,8 @@ const aliases: IconAliases = {
   checkboxOff: 'far fa-square', // note 'far'
   checkboxIndeterminate: 'fas fa-minus-square',
   delimiter: 'fas fa-circle', // for carousel
-  sort: 'fas fa-sort-up',
+  sortAsc: 'fas fa-sort-up',
+  sortDesc: 'fas fa-sort-down',
   expand: 'fas fa-chevron-down',
   menu: 'fas fa-bars',
   subgroup: 'fas fa-caret-down',
diff --git a/packages/vuetify/src/iconsets/fa4.ts b/packages/vuetify/src/iconsets/fa4.ts
index 587d134cab0..01a3049f333 100644
--- a/packages/vuetify/src/iconsets/fa4.ts
+++ b/packages/vuetify/src/iconsets/fa4.ts
@@ -24,7 +24,8 @@ const aliases: IconAliases = {
   checkboxOff: 'fa-square-o',
   checkboxIndeterminate: 'fa-minus-square',
   delimiter: 'fa-circle', // for carousel
-  sort: 'fa-sort-up',
+  sortAsc: 'fa-sort-up',
+  sortDesc: 'fa-sort-down',
   expand: 'fa-chevron-down',
   menu: 'fa-bars',
   subgroup: 'fa-caret-down',
diff --git a/packages/vuetify/src/iconsets/md.ts b/packages/vuetify/src/iconsets/md.ts
index 3d5f48d5017..de3d1408b72 100644
--- a/packages/vuetify/src/iconsets/md.ts
+++ b/packages/vuetify/src/iconsets/md.ts
@@ -24,7 +24,8 @@ const aliases: IconAliases = {
   checkboxOff: 'check_box_outline_blank',
   checkboxIndeterminate: 'indeterminate_check_box',
   delimiter: 'fiber_manual_record', // for carousel
-  sort: 'arrow_upward',
+  sortAsc: 'arrow_upward',
+  sortDesc: 'arrow_downward',
   expand: 'keyboard_arrow_down',
   menu: 'menu',
   subgroup: 'arrow_drop_down',
diff --git a/packages/vuetify/src/iconsets/mdi-svg.ts b/packages/vuetify/src/iconsets/mdi-svg.ts
index 526e10f9225..0faf506d01f 100644
--- a/packages/vuetify/src/iconsets/mdi-svg.ts
+++ b/packages/vuetify/src/iconsets/mdi-svg.ts
@@ -23,7 +23,8 @@ const aliases: IconAliases = {
   checkboxOff: 'M19,3H5C3.89,3 3,3.89 3,5V19C3,20.1 3.9,21 5,21H19C20.1,21 21,20.1 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z',
   checkboxIndeterminate: 'M17,13H7V11H17M19,3H5C3.89,3 3,3.89 3,5V19C3,20.1 3.9,21 5,21H19C20.1,21 21,20.1 21,19V5C21,3.89 20.1,3 19,3Z',
   delimiter: 'M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2Z', // for carousel
-  sort: 'M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z',
+  sortAsc: 'M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z',
+  sortDesc: 'M11,4H13V16L18.5,10.5L19.92,11.92L12,19.84L4.08,11.92L5.5,10.5L11,16V4Z',
   expand: 'M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z',
   menu: 'M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z',
   subgroup: 'M7,10L12,15L17,10H7Z',
diff --git a/packages/vuetify/src/iconsets/mdi.ts b/packages/vuetify/src/iconsets/mdi.ts
index 6c6d77ada8e..c262df9912a 100644
--- a/packages/vuetify/src/iconsets/mdi.ts
+++ b/packages/vuetify/src/iconsets/mdi.ts
@@ -24,7 +24,8 @@ const aliases: IconAliases = {
   checkboxOff: 'mdi-checkbox-blank-outline',
   checkboxIndeterminate: 'mdi-minus-box',
   delimiter: 'mdi-circle', // for carousel
-  sort: 'mdi-arrow-up',
+  sortAsc: 'mdi-arrow-up',
+  sortDesc: 'mdi-arrow-down',
   expand: 'mdi-chevron-down',
   menu: 'mdi-menu',
   subgroup: 'mdi-menu-down',
diff --git a/packages/vuetify/src/labs/VDataTable/VDataTable.sass b/packages/vuetify/src/labs/VDataTable/VDataTable.sass
new file mode 100644
index 00000000000..a76803daa17
--- /dev/null
+++ b/packages/vuetify/src/labs/VDataTable/VDataTable.sass
@@ -0,0 +1,106 @@
+@use '../../styles/settings'
+@use '../../styles/tools'
+@use './variables' as *
+
+.v-data-table
+  width: 100%
+
+.v-data-table__table
+  width: 100%
+  border-collapse: separate
+  border-spacing: 0
+
+.v-data-table__tr
+  &--focus
+    border: 1px dotted black
+
+.v-data-table
+  .v-table__wrapper
+    > table
+      > thead,
+        tbody
+        > tr
+          > td,
+            th
+            background: rgb(var(--v-theme-surface))
+
+            &.v-data-table-column--align-end
+              text-align: end
+
+              .v-data-table-header__content
+                flex-direction: row-reverse
+
+            &.v-data-table-column--no-padding
+              padding: 0 8px
+
+          > th
+            align-items: center
+
+          > th.v-data-table__th--sortable:hover
+              cursor: pointer
+              color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity))
+
+          > th:not(.v-data-table__th--sorted)
+              .v-data-table-header__sort-icon
+                opacity: 0
+
+              &:hover
+                .v-data-table-header__sort-icon
+                  opacity: 0.5
+
+.v-data-table-column--fixed
+  position: sticky
+  z-index: 2
+  left: 0
+
+.v-data-table-column--last-fixed
+  border-right: 1px solid rgba(var(--v-border-color), var(--v-border-opacity))
+
+.v-data-table-group-header-row
+  td
+    background: lightgrey
+
+    > span
+      padding-left: 5px
+
+.v-data-table--loading
+  .v-data-table__td
+    opacity: 0.3
+
+.v-data-table__progress
+  th
+    position: relative
+    border: none !important
+    height: auto !important
+
+.v-data-table-group-header-row__column
+  padding-left: calc(var(--v-data-table-group-header-row-depth) * 16px) !important
+
+.v-data-table-header__content
+  display: flex
+  align-items: center
+
+.v-data-table-header__sort-badge
+  display: inline-flex
+  justify-content: center
+  align-items: center
+  font-size: 0.875rem
+  padding: 4px
+  border-radius: 50%
+  background: $data-table-header-sort-badge-color
+  min-width: $data-table-header-sort-badge-size
+  min-height: $data-table-header-sort-badge-size
+  width: $data-table-header-sort-badge-size
+  height: $data-table-header-sort-badge-size
+
+.v-data-table-headers__loader
+  bottom: auto
+  top: 0
+  left: 0
+  position: absolute
+  right: 0
+  width: 100%
+  z-index: 1
+
+.v-data-table-rows-no-data
+  text-align: center
diff --git a/packages/vuetify/src/labs/VDataTable/VDataTable.tsx b/packages/vuetify/src/labs/VDataTable/VDataTable.tsx
new file mode 100644
index 00000000000..23abea641e5
--- /dev/null
+++ b/packages/vuetify/src/labs/VDataTable/VDataTable.tsx
@@ -0,0 +1,167 @@
+// Styles
+import './VDataTable.sass'
+
+// Components
+import { VTable } from '@/components/VTable'
+import { VDataTableHeaders } from './VDataTableHeaders'
+import { VDataTableRows } from './VDataTableRows'
+import { VDataTableFooter } from './VDataTableFooter'
+
+// Composables
+import { useProxiedModel } from '@/composables/proxiedModel'
+import { makeDataTableItemProps, useDataTableItems } from './composables/items'
+import { createHeaders, makeDataTableHeaderProps } from './composables/headers'
+import { createSort, makeDataTableSortProps, useSortedItems } from './composables/sort'
+import { createGroupBy, makeDataTableGroupProps, useGroupedItems } from './composables/group'
+import { createPagination, makeDataTablePaginateProps, usePaginatedItems } from './composables/paginate'
+import { createSelection, makeDataTableSelectProps } from './composables/select'
+import { createExpanded, makeDataTableExpandProps } from './composables/expand'
+import { useOptions } from './composables/options'
+import { provideDefaults } from '@/composables/defaults'
+
+// Utilities
+import { computed, toRef } from 'vue'
+import { defineComponent, propsFactory, useRender } from '@/util'
+import { makeFilterProps, useFilter } from '@/composables/filter'
+
+// Types
+import type { DataTableItem } from './types'
+
+export const makeVDataTableProps = propsFactory({
+  ...makeDataTableItemProps(),
+  ...makeDataTableHeaderProps(),
+  hideNoData: Boolean,
+  noDataText: {
+    type: String,
+    default: '$vuetify.noDataText',
+  },
+  height: [String, Number],
+  width: [String, Number],
+  fixedHeader: Boolean,
+  fixedFooter: Boolean,
+}, 'v-data-table')
+
+export const VDataTable = defineComponent({
+  name: 'VDataTable',
+
+  props: {
+    search: String,
+
+    ...makeVDataTableProps(),
+    ...makeDataTableExpandProps(),
+    ...makeDataTableGroupProps(),
+    ...makeDataTableSelectProps(),
+    ...makeDataTableSortProps(),
+    ...makeDataTablePaginateProps(),
+    ...makeFilterProps(),
+  },
+
+  emits: {
+    'update:modelValue': (value: any[]) => true,
+    'update:page': (value: number) => true,
+    'update:itemsPerPage': (value: number) => true,
+    'update:sortBy': (value: any) => true,
+    'update:options': (value: any) => true,
+    'update:groupBy': (value: any) => true,
+    'update:expanded': (value: any) => true,
+  },
+
+  setup (props, { slots }) {
+    const groupBy = useProxiedModel(props, 'groupBy')
+
+    const { columns } = createHeaders(props, {
+      groupBy,
+      showSelect: toRef(props, 'showSelect'),
+      showExpand: toRef(props, 'showExpand'),
+    })
+
+    const { items } = useDataTableItems(props, columns)
+
+    const { filteredItems } = useFilter<DataTableItem>(props, items, toRef(props, 'search'))
+
+    const { sortBy } = createSort(props)
+    const { sortByWithGroups, opened, extractRows } = createGroupBy(props, groupBy, sortBy)
+
+    const { sortedItems } = useSortedItems(filteredItems, sortByWithGroups, columns)
+    const { flatItems } = useGroupedItems(sortedItems, groupBy, opened)
+
+    const { page, itemsPerPage, startIndex, stopIndex, pageCount } = createPagination(props, flatItems)
+    const { paginatedItems } = usePaginatedItems(flatItems, startIndex, stopIndex, itemsPerPage)
+
+    const paginatedItemsWithoutGroups = computed(() => extractRows(paginatedItems.value))
+
+    createSelection(props, paginatedItemsWithoutGroups)
+
+    createExpanded(props)
+
+    useOptions({
+      page,
+      itemsPerPage,
+      sortBy,
+      pageCount,
+      startIndex,
+      stopIndex,
+    })
+
+    provideDefaults({
+      VDataTableRows: {
+        hideNoData: toRef(props, 'hideNoData'),
+        noDataText: toRef(props, 'noDataText'),
+      },
+    })
+
+    useRender(() => (
+      <VTable
+        class={[
+          'v-data-table',
+          {
+            'v-data-table--show-select': props.showSelect,
+          },
+        ]}
+        fixedHeader={ props.fixedHeader }
+        fixedFooter={ props.fixedFooter }
+        height={ props.height }
+      >
+        {{
+          top: slots.top,
+          default: slots.default ? slots.default() : () => (
+            <>
+              { slots.colgroup?.({ columns }) }
+              <thead>
+                { slots.headers ? slots.headers() : (
+                  <VDataTableHeaders
+                    sticky={ props.fixedHeader }
+                    multiSort={ props.multiSort }
+                    v-slots={ slots }
+                  />
+                ) }
+              </thead>
+              { slots.thead?.() }
+              <tbody>
+                { slots.body ? slots.body() : (
+                  <VDataTableRows
+                    items={ paginatedItems.value }
+                    v-slots={ slots }
+                  />
+                ) }
+              </tbody>
+              { slots.tbody?.() }
+              { slots.tfoot?.() }
+            </>
+          ),
+          bottom: slots.bottom ? slots.bottom() : () => (
+            <VDataTableFooter
+              v-slots={{
+                prepend: slots['footer.prepend'],
+              }}
+            />
+          ),
+        }}
+      </VTable>
+    ))
+
+    return {}
+  },
+})
+
+export type VDataTable = InstanceType<typeof VDataTable>
diff --git a/packages/vuetify/src/labs/VDataTable/VDataTableColumn.tsx b/packages/vuetify/src/labs/VDataTable/VDataTableColumn.tsx
new file mode 100644
index 00000000000..5bae6fc1462
--- /dev/null
+++ b/packages/vuetify/src/labs/VDataTable/VDataTableColumn.tsx
@@ -0,0 +1,39 @@
+import { convertToUnit, defineFunctionalComponent } from '@/util'
+import type { PropType } from 'vue'
+
+export const VDataTableColumn = defineFunctionalComponent({
+  align: {
+    type: String as PropType<'start' | 'center' | 'end'>,
+    default: 'start',
+  },
+  fixed: Boolean,
+  fixedOffset: [Number, String],
+  height: [Number, String],
+  lastFixed: Boolean,
+  noPadding: Boolean,
+  tag: String,
+  width: [Number, String],
+}, (props, { slots, attrs }) => {
+  const Tag = props.tag ?? 'td'
+  return (
+    <Tag
+      class={[
+        'v-data-table__td',
+        {
+          'v-data-table-column--fixed': props.fixed,
+          'v-data-table-column--last-fixed': props.lastFixed,
+          'v-data-table-column--no-padding': props.noPadding,
+        },
+        `v-data-table-column--align-${props.align}`,
+      ]}
+      style={{
+        height: convertToUnit(props.height),
+        width: convertToUnit(props.width),
+        left: convertToUnit(props.fixedOffset || null),
+      }}
+      { ...attrs }
+    >
+      { slots.default?.() }
+    </Tag>
+  )
+})
diff --git a/packages/vuetify/src/labs/VDataTable/VDataTableFooter.sass b/packages/vuetify/src/labs/VDataTable/VDataTableFooter.sass
new file mode 100644
index 00000000000..b999e225b1d
--- /dev/null
+++ b/packages/vuetify/src/labs/VDataTable/VDataTableFooter.sass
@@ -0,0 +1,23 @@
+@forward './variables'
+@use '../../styles/tools'
+@use './variables' as *
+
+.v-data-table-footer
+  display: flex
+  align-items: center
+  flex-wrap: wrap
+  padding: $data-table-footer-padding
+  justify-content: flex-end
+
+.v-data-table-footer__items-per-page
+  padding-inline-end: 24px
+  display: flex
+  align-items: center
+  justify-content: space-between
+
+  > span
+    padding-inline-end: 24px
+
+.v-data-table-footer__info
+  display: flex
+  padding-inline-end: 24px
diff --git a/packages/vuetify/src/labs/VDataTable/VDataTableFooter.tsx b/packages/vuetify/src/labs/VDataTable/VDataTableFooter.tsx
new file mode 100644
index 00000000000..cdde2e0082c
--- /dev/null
+++ b/packages/vuetify/src/labs/VDataTable/VDataTableFooter.tsx
@@ -0,0 +1,105 @@
+// Styles
+import './VDataTableFooter.sass'
+
+// Components
+import { VBtn } from '@/components/VBtn'
+import { VSelect } from '@/components/VSelect'
+
+// Composables
+import { usePagination } from './composables/paginate'
+
+// Utilities
+import { defineComponent } from '@/util'
+
+// Types
+import type { PropType } from 'vue'
+import type { InternalItem } from '@/composables/items'
+
+export const VDataTableFooter = defineComponent({
+  name: 'VDataTableFooter',
+
+  props: {
+    prevIcon: {
+      type: String,
+      default: '$prev',
+    },
+    nextIcon: {
+      type: String,
+      default: '$next',
+    },
+    firstIcon: {
+      type: String,
+      default: '$first',
+    },
+    lastIcon: {
+      type: String,
+      default: '$last',
+    },
+    itemsPerPageOptions: {
+      type: Array as PropType<InternalItem[]>,
+      default: () => ([
+        { value: 10, title: '10' },
+        { value: 25, title: '25' },
+        { value: 50, title: '50' },
+        { value: 100, title: '100' },
+        { value: -1, title: 'All' },
+      ]),
+    },
+    showCurrentPage: Boolean,
+  },
+
+  setup (props, { slots }) {
+    const { page, pageCount, startIndex, stopIndex, itemsLength, itemsPerPage } = usePagination()
+
+    return () => (
+      <div
+        class="v-data-table-footer"
+      >
+        { slots.prepend?.() }
+        <div class="v-data-table-footer__items-per-page">
+          <span>Items per page:</span>
+          <VSelect
+            items={ props.itemsPerPageOptions }
+            modelValue={ itemsPerPage.value }
+            onUpdate:modelValue={ v => itemsPerPage.value = Number(v) }
+            density="compact"
+            variant="outlined"
+            hide-details
+          />
+        </div>
+        <div class="v-data-table-footer__info">
+          <div>{ (startIndex.value ?? -1) + 1 } - { stopIndex.value ?? 0 } of { itemsLength.value ?? 0 }</div>
+        </div>
+        <div class="v-data-table-footer__pagination">
+          <VBtn
+            icon={ props.firstIcon }
+            variant="plain"
+            onClick={ () => page.value = 1 }
+            disabled={ page.value === 1 }
+          />
+          <VBtn
+            icon={ props.prevIcon }
+            variant="plain"
+            onClick={ () => page.value = Math.max(1, page.value - 1) }
+            disabled={ page.value === 1 }
+          />
+          { props.showCurrentPage && (
+            <div key="page">page.value</div>
+          ) }
+          <VBtn
+            icon={ props.nextIcon }
+            variant="plain"
+            onClick={ () => page.value = Math.min(pageCount.value, page.value + 1) }
+            disabled={ page.value === pageCount.value }
+          />
+          <VBtn
+            icon={ props.lastIcon }
+            variant="plain"
+            onClick={ () => page.value = pageCount.value }
+            disabled={ page.value === pageCount.value }
+          />
+        </div>
+      </div>
+    )
+  },
+})
diff --git a/packages/vuetify/src/labs/VDataTable/VDataTableGroupHeaderRow.tsx b/packages/vuetify/src/labs/VDataTable/VDataTableGroupHeaderRow.tsx
new file mode 100644
index 00000000000..41ee213ca95
--- /dev/null
+++ b/packages/vuetify/src/labs/VDataTable/VDataTableGroupHeaderRow.tsx
@@ -0,0 +1,84 @@
+// Components
+import { VBtn } from '@/components/VBtn'
+import { VCheckboxBtn } from '@/components/VCheckbox'
+import { VDataTableColumn } from './VDataTableColumn'
+
+// Composables
+import { useHeaders } from './composables/headers'
+import { useSelection } from './composables/select'
+import { useGroupBy } from './composables/group'
+
+// Utilities
+import { computed } from 'vue'
+import { defineComponent } from '@/util'
+
+// Types
+import type { PropType } from 'vue'
+import type { GroupHeaderItem } from './types'
+
+export const VDataTableGroupHeaderRow = defineComponent({
+  name: 'VDataTableGroupHeaderRow',
+
+  props: {
+    item: {
+      type: Object as PropType<GroupHeaderItem>,
+      required: true,
+    },
+  },
+
+  setup (props, { slots }) {
+    const { opened, toggleGroup, extractRows } = useGroupBy()
+    const { isSelected, isSomeSelected, select } = useSelection()
+    const { columns } = useHeaders()
+
+    const rows = computed(() => {
+      return extractRows([props.item])
+    })
+
+    return () => (
+      <tr
+        class="v-data-table-group-header-row"
+        style={{
+          '--v-data-table-group-header-row-depth': props.item.depth,
+        }}
+      >
+        { columns.value.map(column => {
+          if (column.key === 'data-table-group') {
+            const icon = opened.value.has(props.item.id) ? '$expand' : '$next'
+            const onClick = () => toggleGroup(props.item.id)
+
+            return slots['data-table-group']?.({ item: props.item, count: rows.value.length, props: { icon, onClick } }) ?? (
+              <VDataTableColumn class="v-data-table-group-header-row__column">
+                <VBtn
+                  size="small"
+                  variant="text"
+                  icon={ icon }
+                  onClick={ onClick }
+                />
+                <span>{ props.item.value }</span>
+                <span>({ rows.value.length })</span>
+              </VDataTableColumn>
+            )
+          }
+
+          if (column.key === 'data-table-select') {
+            const modelValue = isSelected(rows.value)
+            const indeterminate = isSomeSelected(rows.value) && !modelValue
+            const selectGroup = (v: boolean) => select(rows.value, v)
+            return slots['data-table-select']?.({ props: { modelValue, indeterminate, 'onUpdate:modelValue': selectGroup } }) ?? (
+              <td>
+                <VCheckboxBtn
+                  modelValue={ modelValue }
+                  indeterminate={ indeterminate }
+                  onUpdate:modelValue={ selectGroup }
+                />
+              </td>
+            )
+          }
+
+          return <td />
+        })}
+      </tr>
+    )
+  },
+})
diff --git a/packages/vuetify/src/labs/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/labs/VDataTable/VDataTableHeaders.tsx
new file mode 100644
index 00000000000..e4c9c9ea2a5
--- /dev/null
+++ b/packages/vuetify/src/labs/VDataTable/VDataTableHeaders.tsx
@@ -0,0 +1,170 @@
+// Components
+import { VCheckboxBtn } from '@/components/VCheckbox'
+import { VDataTableColumn } from './VDataTableColumn'
+import { VIcon } from '@/components/VIcon'
+
+// Composables
+import { IconValue } from '@/composables/icons'
+import { LoaderSlot, makeLoaderProps, useLoader } from '@/composables/loader'
+import { useBackgroundColor } from '@/composables/color'
+import { useHeaders } from './composables/headers'
+import { useSelection } from './composables/select'
+import { useSort } from './composables/sort'
+
+// Utilities
+import { convertToUnit, defineComponent, useRender } from '@/util'
+
+// Types
+import type { InternalDataTableHeader } from './types'
+
+export const VDataTableHeaders = defineComponent({
+  name: 'VDataTableHeaders',
+
+  props: {
+    color: String,
+    sticky: Boolean,
+    multiSort: Boolean,
+    sortAscIcon: {
+      type: IconValue,
+      default: '$sortAsc',
+    },
+    sortDescIcon: {
+      type: IconValue,
+      default: '$sortDesc',
+    },
+
+    ...makeLoaderProps(),
+  },
+
+  setup (props, { slots, emit }) {
+    const { toggleSort, sortBy } = useSort()
+    const { someSelected, allSelected, selectAll } = useSelection()
+    const { columns, headers } = useHeaders()
+    const { loaderClasses } = useLoader(props)
+
+    const getFixedStyles = (column: InternalDataTableHeader, y: number) => {
+      if (!props.sticky && !column.fixed) return null
+
+      return {
+        position: 'sticky',
+        zIndex: column.fixed ? 4 : props.sticky ? 3 : undefined, // TODO: This needs to account for possible previous fixed columns.
+        left: column.fixed ? convertToUnit(column.fixedOffset) : undefined, // TODO: This needs to account for possible row/colspan of previous columns
+        top: props.sticky ? `calc(var(--v-table-header-height) * ${y})` : undefined,
+      }
+    }
+
+    function getSortIcon (id: string) {
+      const item = sortBy.value.find(item => item.key === id)
+
+      if (!item) return props.sortAscIcon
+
+      return item.order === 'asc' ? props.sortAscIcon : props.sortDescIcon
+    }
+
+    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, 'color')
+
+    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 (
+        <VDataTableColumn
+          tag="th"
+          align={ column.align }
+          class={[
+            'v-data-table__th',
+            {
+              'v-data-table__th--sortable': column.sortable,
+              'v-data-table__th--sorted': isSorted,
+            },
+            loaderClasses.value,
+          ]}
+          style={{
+            width: convertToUnit(column.width),
+            minWidth: convertToUnit(column.width),
+            ...getFixedStyles(column, y),
+          }}
+          colspan={column.colspan}
+          rowspan={column.rowspan}
+          onClick={column.sortable ? () => toggleSort(column.key) : undefined}
+          lastFixed={column.lastFixed}
+          noPadding={noPadding}
+        >
+          {{
+            default: () => {
+              const slotName = `column.${column.key}`
+              const slotProps = {
+                column,
+                selectAll,
+              }
+
+              if (slots[slotName]) return slots[slotName]!(slotProps)
+
+              if (column.key === 'data-table-select') {
+                return slots['column.data-table-select']?.(slotProps) ?? (
+                  <VCheckboxBtn
+                    modelValue={ allSelected.value }
+                    indeterminate={ someSelected.value && !allSelected.value }
+                    onUpdate:modelValue={ selectAll }
+                  />
+                )
+              }
+
+              return (
+                <div class="v-data-table-header__content">
+                  <span>{ column.title }</span>
+                  { column.sortable && (
+                    <VIcon
+                      key="icon"
+                      class="v-data-table-header__sort-icon"
+                      icon={ getSortIcon(column.key) }
+                    />
+                  )}
+                  { props.multiSort && isSorted && (
+                    <div
+                      key="badge"
+                      class={[
+                        'v-data-table-header__sort-badge',
+                        ...backgroundColorClasses.value,
+                      ]}
+                      style={backgroundColorStyles.value}
+                    >
+                      {sortBy.value.findIndex(x => x.key === column.key) + 1}
+                    </div>
+                  ) }
+                </div>
+              )
+            },
+          }}
+        </VDataTableColumn>
+      )
+    }
+
+    useRender(() => (
+      <>
+        { headers.value.map((row, y) => (
+          <tr>
+            { row.map((column, x) => (
+              <VDataTableHeaderCell column={ column} x={ x } y={ y } />
+            )) }
+          </tr>
+        )) }
+
+        { 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 }}
+            />
+            </th>
+          </tr>
+        )}
+      </>
+    ))
+  },
+})
diff --git a/packages/vuetify/src/labs/VDataTable/VDataTableRow.tsx b/packages/vuetify/src/labs/VDataTable/VDataTableRow.tsx
new file mode 100644
index 00000000000..1a460c17d12
--- /dev/null
+++ b/packages/vuetify/src/labs/VDataTable/VDataTableRow.tsx
@@ -0,0 +1,97 @@
+// Components
+import { VBtn } from '@/components/VBtn'
+import { VCheckboxBtn } from '@/components/VCheckbox'
+
+// Composables
+import { useExpanded } from './composables/expand'
+import { useHeaders } from './composables/headers'
+import { useSelection } from './composables/select'
+import { VDataTableColumn } from './VDataTableColumn'
+
+// Utilities
+import { defineComponent, useRender } from '@/util'
+
+// Types
+import type { PropType } from 'vue'
+import type { DataTableItem } from './types'
+
+export const VDataTableRow = defineComponent({
+  name: 'VDataTableRow',
+
+  props: {
+    item: Object as PropType<DataTableItem>,
+  },
+
+  setup (props, { slots }) {
+    const { isSelected, toggleSelect } = useSelection()
+    const { isExpanded, toggleExpand } = useExpanded()
+    const { columns } = useHeaders()
+
+    useRender(() => (
+      <tr
+        class={[
+          'v-data-table__tr',
+        ]}
+      >
+        { !columns.value.length && (
+          <VDataTableColumn
+            key="no-data"
+            v-slots={ slots }
+          />
+        ) }
+
+        { props.item && columns.value.map((column, i) => (
+          <VDataTableColumn
+            align={ column.align }
+            fixed={ column.fixed }
+            fixedOffset={ column.fixedOffset }
+            lastFixed={ column.lastFixed }
+            noPadding={ column.key === 'data-table-select' || column.key === 'data-table-expand' }
+            width={ column.width }
+          >
+            {{
+              default: () => {
+                const item = props.item!
+                const slotName = `item.${column.key}`
+                const slotProps = {
+                  item: props.item,
+                  columns: columns.value,
+                  isSelected,
+                  toggleSelect,
+                  isExpanded,
+                  toggleExpand,
+                }
+
+                if (slots[slotName]) return slots[slotName]!(slotProps)
+
+                if (column.key === 'data-table-select') {
+                  return slots['item.data-table-select']?.(slotProps) ?? (
+                    <VCheckboxBtn
+                      modelValue={ isSelected([item]) }
+                      onClick={ () => toggleSelect(item) }
+                    />
+                  )
+                }
+
+                if (column.key === 'data-table-expand') {
+                  return slots['item.data-table-expand']?.(slotProps) ?? (
+                    <VBtn
+                      icon={isExpanded(item) ? '$collapse' : '$expand' }
+                      size="small"
+                      variant="text"
+                      onClick={ () => toggleExpand(item) }
+                    />
+                  )
+                }
+
+                return item.columns[column.key]
+              },
+            }}
+          </VDataTableColumn>
+        )) }
+      </tr>
+    ))
+  },
+})
+
+export type VDataTableRow = InstanceType<typeof VDataTableRow>
diff --git a/packages/vuetify/src/labs/VDataTable/VDataTableRows.tsx b/packages/vuetify/src/labs/VDataTable/VDataTableRows.tsx
new file mode 100644
index 00000000000..c9bbf1d4dbd
--- /dev/null
+++ b/packages/vuetify/src/labs/VDataTable/VDataTableRows.tsx
@@ -0,0 +1,94 @@
+// Components
+import { VDataTableGroupHeaderRow } from './VDataTableGroupHeaderRow'
+import { VDataTableRow } from './VDataTableRow'
+
+// Composables
+import { useExpanded } from './composables/expand'
+import { useHeaders } from './composables/headers'
+import { useLocale } from '@/composables/locale'
+
+// Utilities
+import { defineComponent, useRender } from '@/util'
+
+// Types
+import type { PropType } from 'vue'
+import type { InternalDataTableItem } from './types'
+
+export const VDataTableRows = defineComponent({
+  name: 'VDataTableRows',
+
+  props: {
+    loading: [Boolean, String],
+    loadingText: {
+      type: String,
+      default: '$vuetify.dataIterator.loadingText',
+    },
+    hideNoData: Boolean,
+    items: {
+      type: Array as PropType<InternalDataTableItem[]>,
+      default: () => ([]),
+    },
+    noDataText: {
+      type: String,
+      default: '$vuetify.noDataText',
+    },
+    rowHeight: Number,
+  },
+
+  setup (props, { slots }) {
+    const { columns } = useHeaders()
+    const { expanded, expand, expandOnClick } = useExpanded()
+    const { t } = useLocale()
+
+    useRender(() => (
+      <>
+        { props.loading ? slots.loading?.() ?? (
+          <VDataTableRow
+            class="v-data-table-rows-no-data"
+            key="loading"
+          >
+            { t(props.loadingText) }
+          </VDataTableRow>
+        ) : undefined }
+
+        { !props.loading && !props.items.length && !props.hideNoData && (slots['no-data']?.() ?? (
+          <VDataTableRow
+            class="v-data-table-rows-no-data"
+            key="no-data"
+          >
+            { t(props.noDataText) }
+          </VDataTableRow>
+        )) }
+
+        { props.items.map((item, index) => {
+          if (item.type === 'group-header') {
+            return (
+              <VDataTableGroupHeaderRow
+                key={ `group-header_${item.id}` }
+                item={ item }
+                v-slots={ slots }
+              />
+            )
+          }
+
+          return (
+            <>
+              <VDataTableRow
+                key={ `item_${item.value}` }
+                onClick={ expandOnClick.value ? () => expand(item, !expanded.value.has(item.value)) : undefined }
+                item={ item }
+                v-slots={ slots }
+              />
+
+              { expanded.value.has(item.value) && slots['expanded-row']?.({ item, columns: columns.value }) }
+            </>
+          )
+        }) }
+      </>
+    ))
+
+    return {}
+  },
+})
+
+export type VDataTableRows = InstanceType<typeof VDataTableRows>
diff --git a/packages/vuetify/src/labs/VDataTable/VDataTableServer.tsx b/packages/vuetify/src/labs/VDataTable/VDataTableServer.tsx
new file mode 100644
index 00000000000..b4a25d20663
--- /dev/null
+++ b/packages/vuetify/src/labs/VDataTable/VDataTableServer.tsx
@@ -0,0 +1,142 @@
+// Components
+import { VTable } from '@/components/VTable'
+import { VDataTableFooter } from './VDataTableFooter'
+import { VDataTableHeaders } from './VDataTableHeaders'
+import { VDataTableRows } from './VDataTableRows'
+
+// Composables
+import { createExpanded, makeDataTableExpandProps } from './composables/expand'
+import { createHeaders, makeDataTableHeaderProps } from './composables/headers'
+import { makeDataTableItemProps, useDataTableItems } from './composables/items'
+import { createSort, makeDataTableSortProps } from './composables/sort'
+import { createPagination, makeDataTablePaginateProps } from './composables/paginate'
+import { createSelection, makeDataTableSelectProps } from './composables/select'
+import { useOptions } from './composables/options'
+import { provideDefaults } from '@/composables/defaults'
+
+// Utilities
+import { provide, toRef } from 'vue'
+import { defineComponent, useRender } from '@/util'
+import { makeVDataTableProps } from './VDataTable'
+
+export const VDataTableServer = defineComponent({
+  name: 'VDataTableServer',
+
+  props: {
+    color: String,
+    loading: [Boolean, String],
+    loadingText: {
+      type: String,
+      default: '$vuetify.dataIterator.loadingText',
+    },
+    itemsLength: [Number, String],
+
+    ...makeVDataTableProps(),
+    ...makeDataTableExpandProps(),
+    ...makeDataTableHeaderProps(),
+    ...makeDataTableItemProps(),
+    ...makeDataTableSelectProps(),
+    ...makeDataTableSortProps(),
+    ...makeDataTablePaginateProps(),
+  },
+
+  emits: {
+    'update:modelValue': (value: any[]) => true,
+    'update:page': (page: number) => true,
+    'update:itemsPerPage': (page: number) => true,
+    'update:sortBy': (sortBy: any) => true,
+    'update:options': (options: any) => true,
+    'update:expanded': (options: any) => true,
+  },
+
+  setup (props, { slots }) {
+    createExpanded(props)
+
+    const { columns } = createHeaders(props, {
+      showSelect: toRef(props, 'showSelect'),
+      showExpand: toRef(props, 'showExpand'),
+    })
+
+    const { items } = useDataTableItems(props, columns)
+
+    const { sortBy, toggleSort } = createSort(props)
+
+    const { page, itemsPerPage, startIndex, stopIndex, pageCount } = createPagination(props, items)
+
+    createSelection(props, items)
+
+    useOptions({
+      page,
+      itemsPerPage,
+      sortBy,
+      startIndex,
+      stopIndex,
+      pageCount,
+    })
+
+    provide('v-data-table', {
+      toggleSort,
+      sortBy,
+    })
+
+    provideDefaults({
+      VDataTableRows: {
+        hideNoData: toRef(props, 'hideNoData'),
+        noDataText: toRef(props, 'noDataText'),
+        loading: toRef(props, 'loading'),
+        loadingText: toRef(props, 'loadingText'),
+      },
+    })
+
+    useRender(() => (
+      <VTable
+        class={[
+          'v-data-table',
+          {
+            'v-data-table--loading': props.loading,
+          },
+        ]}
+        fixedHeader={ props.fixedHeader }
+        fixedFooter={ props.fixedFooter }
+        height={ props.height }
+      >
+        {{
+          top: slots.top,
+          default: slots.default ? slots.default() : () => (
+            <>
+              <thead class="v-data-table__thead" role="rowgroup">
+                { slots.headers ? slots.headers() : (
+                  <VDataTableHeaders
+                    sticky={ props.fixedHeader }
+                    loading={ props.loading }
+                    color={ props.color }
+                  />
+                ) }
+              </thead>
+              { slots.thead?.() }
+              <tbody class="v-data-table__tbody" role="rowgroup">
+                { slots.body ? slots.body() : (
+                  <VDataTableRows
+                    items={ items.value }
+                    v-slots={ slots }
+                  />
+                ) }
+              </tbody>
+              { slots.tbody?.() }
+              { slots.tfoot?.() }
+            </>
+          ),
+          bottom: slots.bottom ? slots.bottom() : () => (
+            <VDataTableFooter
+              v-slots={{
+                prepend: slots['footer.prepend'],
+              }}
+            />
+          ),
+        }}
+      </VTable>
+    ))
+  },
+})
+
+export type VDataTableServer = InstanceType<typeof VDataTableServer>
diff --git a/packages/vuetify/src/labs/VDataTable/VDataTableVirtual.tsx b/packages/vuetify/src/labs/VDataTable/VDataTableVirtual.tsx
new file mode 100644
index 00000000000..cd6cc03aa83
--- /dev/null
+++ b/packages/vuetify/src/labs/VDataTable/VDataTableVirtual.tsx
@@ -0,0 +1,157 @@
+// Components
+import { VTable } from '@/components/VTable'
+import { VDataTableHeaders } from './VDataTableHeaders'
+import { VDataTableRows } from './VDataTableRows'
+
+// Composables
+import { useProxiedModel } from '@/composables/proxiedModel'
+import { createHeaders, makeDataTableHeaderProps } from './composables/headers'
+import { makeDataTableItemProps, useDataTableItems } from './composables/items'
+import { createExpanded, makeDataTableExpandProps } from './composables/expand'
+import { createSort, makeDataTableSortProps, useSortedItems } from './composables/sort'
+import { createGroupBy, makeDataTableGroupProps, useGroupedItems } from './composables/group'
+import { createSelection, makeDataTableSelectProps } from './composables/select'
+import { makeDataTableVirtualProps, useVirtual } from './composables/virtual'
+import { useOptions } from './composables/options'
+import { makeFilterProps, useFilter } from '@/composables/filter'
+import { provideDefaults } from '@/composables/defaults'
+
+// Utlities
+import { computed, ref, toRef } from 'vue'
+import { convertToUnit, defineComponent, useRender } from '@/util'
+import { makeVDataTableProps } from './VDataTable'
+
+// Types
+import type { DataTableItem } from './types'
+
+export const VDataTableVirtual = defineComponent({
+  name: 'VDataTableVirtual',
+
+  props: {
+    search: String,
+
+    ...makeVDataTableProps(),
+    ...makeVDataTableProps(),
+    ...makeDataTableGroupProps(),
+    ...makeDataTableExpandProps(),
+    ...makeDataTableHeaderProps(),
+    ...makeDataTableItemProps(),
+    ...makeDataTableSelectProps(),
+    ...makeDataTableSortProps(),
+    ...makeDataTableVirtualProps(),
+    ...makeFilterProps(),
+  },
+
+  emits: {
+    'update:modelValue': (value: any[]) => true,
+    'update:sortBy': (value: any) => true,
+    'update:options': (value: any) => true,
+    'update:groupBy': (value: any) => true,
+    'update:expanded': (value: any) => true,
+  },
+
+  setup (props, { slots }) {
+    const groupBy = useProxiedModel(props, 'groupBy')
+    const { columns } = createHeaders(props, {
+      groupBy,
+      showSelect: toRef(props, 'showSelect'),
+      showExpand: toRef(props, 'showExpand'),
+    })
+    const { items } = useDataTableItems(props, columns)
+
+    const { filteredItems } = useFilter<DataTableItem>(props, items, toRef(props, 'search'))
+
+    const { sortBy } = createSort(props)
+    const { sortByWithGroups, opened, extractRows } = createGroupBy(props, groupBy, sortBy)
+
+    const { sortedItems } = useSortedItems(filteredItems, sortByWithGroups, columns)
+    const { flatItems } = useGroupedItems(sortedItems, groupBy, opened)
+
+    const allRows = computed(() => extractRows(flatItems.value))
+
+    createSelection(props, allRows)
+    createExpanded(props)
+
+    const {
+      containerRef,
+      paddingTop,
+      paddingBottom,
+      startIndex,
+      stopIndex,
+      itemHeight,
+      handleScroll,
+    } = useVirtual(props, flatItems)
+
+    const visibleItems = computed(() => {
+      return flatItems.value.slice(startIndex.value, stopIndex.value)
+    })
+
+    useOptions({
+      sortBy,
+      page: ref(1),
+      startIndex: ref(0),
+      stopIndex: computed(() => flatItems.value.length - 1),
+      pageCount: ref(1),
+      itemsPerPage: ref(-1),
+    })
+
+    provideDefaults({
+      VDataTableRows: {
+        hideNoData: toRef(props, 'hideNoData'),
+        noDataText: toRef(props, 'noDataText'),
+      },
+    })
+
+    useRender(() => (
+      <VTable
+        class="v-data-table"
+        style={{
+          '--v-table-row-height': convertToUnit(itemHeight.value),
+        }}
+        height={ props.height }
+        fixedHeader={ props.fixedHeader }
+      >
+        {{
+          top: slots.top,
+          wrapper: () => (
+            <div
+              ref={ containerRef }
+              onScroll={ handleScroll }
+              class="v-table__wrapper"
+              style={{
+                height: convertToUnit(props.height),
+              }}
+            >
+              <table>
+                <thead>
+                  <VDataTableHeaders
+                    sticky={ props.fixedHeader }
+                    multiSort={ props.multiSort }
+                    v-slots={ slots }
+                  />
+                </thead>
+                <tbody>
+                  <tr style={{ height: convertToUnit(paddingTop.value), border: 0 }}>
+                    <td colspan={columns.value.length} style={{ height: convertToUnit(paddingTop.value), border: 0 }}></td>
+                  </tr>
+
+                  <VDataTableRows
+                    items={visibleItems.value}
+                    v-slots={ slots }
+                  />
+
+                  <tr style={{ height: convertToUnit(paddingBottom.value), border: 0 }}>
+                    <td colspan={columns.value.length} style={{ height: convertToUnit(paddingBottom.value), border: 0 }}></td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          ),
+          bottom: slots.bottom,
+        }}
+      </VTable>
+    ))
+  },
+})
+
+export type VDataTableVirtual = InstanceType<typeof VDataTableVirtual>
diff --git a/packages/vuetify/src/components/VDataTable/__tests__/MobileRow.spec.ts b/packages/vuetify/src/labs/VDataTable/__tests__/MobileRow.spec.ts
similarity index 100%
rename from packages/vuetify/src/components/VDataTable/__tests__/MobileRow.spec.ts
rename to packages/vuetify/src/labs/VDataTable/__tests__/MobileRow.spec.ts
diff --git a/packages/vuetify/src/components/VDataTable/__tests__/Row.spec.ts b/packages/vuetify/src/labs/VDataTable/__tests__/Row.spec.ts
similarity index 100%
rename from packages/vuetify/src/components/VDataTable/__tests__/Row.spec.ts
rename to packages/vuetify/src/labs/VDataTable/__tests__/Row.spec.ts
diff --git a/packages/vuetify/src/components/VDataTable/__tests__/RowGroup.spec.ts b/packages/vuetify/src/labs/VDataTable/__tests__/RowGroup.spec.ts
similarity index 100%
rename from packages/vuetify/src/components/VDataTable/__tests__/RowGroup.spec.ts
rename to packages/vuetify/src/labs/VDataTable/__tests__/RowGroup.spec.ts
diff --git a/packages/vuetify/src/components/VDataTable/__tests__/VDataTable.spec.ts b/packages/vuetify/src/labs/VDataTable/__tests__/VDataTable.spec.ts
similarity index 100%
rename from packages/vuetify/src/components/VDataTable/__tests__/VDataTable.spec.ts
rename to packages/vuetify/src/labs/VDataTable/__tests__/VDataTable.spec.ts
diff --git a/packages/vuetify/src/components/VDataTable/__tests__/VDataTableHeader.spec.ts b/packages/vuetify/src/labs/VDataTable/__tests__/VDataTableHeader.spec.ts
similarity index 100%
rename from packages/vuetify/src/components/VDataTable/__tests__/VDataTableHeader.spec.ts
rename to packages/vuetify/src/labs/VDataTable/__tests__/VDataTableHeader.spec.ts
diff --git a/packages/vuetify/src/components/VDataTable/__tests__/VEditDialog.spec.ts b/packages/vuetify/src/labs/VDataTable/__tests__/VEditDialog.spec.ts
similarity index 100%
rename from packages/vuetify/src/components/VDataTable/__tests__/VEditDialog.spec.ts
rename to packages/vuetify/src/labs/VDataTable/__tests__/VEditDialog.spec.ts
diff --git a/packages/vuetify/src/components/VDataTable/__tests__/VSimpleTable.spec.ts b/packages/vuetify/src/labs/VDataTable/__tests__/VSimpleTable.spec.ts
similarity index 100%
rename from packages/vuetify/src/components/VDataTable/__tests__/VSimpleTable.spec.ts
rename to packages/vuetify/src/labs/VDataTable/__tests__/VSimpleTable.spec.ts
diff --git a/packages/vuetify/src/components/VDataTable/__tests__/VVirtualTable.spec.ts b/packages/vuetify/src/labs/VDataTable/__tests__/VVirtualTable.spec.ts
similarity index 100%
rename from packages/vuetify/src/components/VDataTable/__tests__/VVirtualTable.spec.ts
rename to packages/vuetify/src/labs/VDataTable/__tests__/VVirtualTable.spec.ts
diff --git a/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/MobileRow.spec.ts.snap b/packages/vuetify/src/labs/VDataTable/__tests__/__snapshots__/MobileRow.spec.ts.snap
similarity index 100%
rename from packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/MobileRow.spec.ts.snap
rename to packages/vuetify/src/labs/VDataTable/__tests__/__snapshots__/MobileRow.spec.ts.snap
diff --git a/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/Row.spec.ts.snap b/packages/vuetify/src/labs/VDataTable/__tests__/__snapshots__/Row.spec.ts.snap
similarity index 100%
rename from packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/Row.spec.ts.snap
rename to packages/vuetify/src/labs/VDataTable/__tests__/__snapshots__/Row.spec.ts.snap
diff --git a/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/RowGroup.spec.ts.snap b/packages/vuetify/src/labs/VDataTable/__tests__/__snapshots__/RowGroup.spec.ts.snap
similarity index 100%
rename from packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/RowGroup.spec.ts.snap
rename to packages/vuetify/src/labs/VDataTable/__tests__/__snapshots__/RowGroup.spec.ts.snap
diff --git a/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap b/packages/vuetify/src/labs/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap
similarity index 100%
rename from packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap
rename to packages/vuetify/src/labs/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap
diff --git a/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTableHeader.spec.ts.snap b/packages/vuetify/src/labs/VDataTable/__tests__/__snapshots__/VDataTableHeader.spec.ts.snap
similarity index 100%
rename from packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTableHeader.spec.ts.snap
rename to packages/vuetify/src/labs/VDataTable/__tests__/__snapshots__/VDataTableHeader.spec.ts.snap
diff --git a/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VEditDialog.spec.ts.snap b/packages/vuetify/src/labs/VDataTable/__tests__/__snapshots__/VEditDialog.spec.ts.snap
similarity index 100%
rename from packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VEditDialog.spec.ts.snap
rename to packages/vuetify/src/labs/VDataTable/__tests__/__snapshots__/VEditDialog.spec.ts.snap
diff --git a/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VSimpleTable.spec.ts.snap b/packages/vuetify/src/labs/VDataTable/__tests__/__snapshots__/VSimpleTable.spec.ts.snap
similarity index 100%
rename from packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VSimpleTable.spec.ts.snap
rename to packages/vuetify/src/labs/VDataTable/__tests__/__snapshots__/VSimpleTable.spec.ts.snap
diff --git a/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VVirtualTable.spec.ts.snap b/packages/vuetify/src/labs/VDataTable/__tests__/__snapshots__/VVirtualTable.spec.ts.snap
similarity index 100%
rename from packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VVirtualTable.spec.ts.snap
rename to packages/vuetify/src/labs/VDataTable/__tests__/__snapshots__/VVirtualTable.spec.ts.snap
diff --git a/packages/vuetify/src/labs/VDataTable/__tests__/sort.spec.ts b/packages/vuetify/src/labs/VDataTable/__tests__/sort.spec.ts
new file mode 100644
index 00000000000..fe6b3e6adcf
--- /dev/null
+++ b/packages/vuetify/src/labs/VDataTable/__tests__/sort.spec.ts
@@ -0,0 +1,204 @@
+import { sortItems } from '../composables/sort'
+
+// Utilities
+import { describe, expect, it } from '@jest/globals'
+import { transformItems } from '@/composables/items'
+
+describe('VDataTable - sorting', () => {
+  it('should sort items by single column', () => {
+    const items = transformItems({} as any, [
+      { string: 'foo', number: 1 },
+      { string: 'bar', number: 2 },
+      { string: 'baz', number: 4 },
+      { string: 'fizzbuzz', number: 3 },
+    ])
+
+    expect(
+      sortItems(items, [{ key: 'string', order: 'asc' }], 'en')
+        .map(i => i.raw)
+    ).toStrictEqual([
+      { string: 'bar', number: 2 },
+      { string: 'baz', number: 4 },
+      { string: 'fizzbuzz', number: 3 },
+      { string: 'foo', number: 1 },
+    ])
+
+    expect(
+      sortItems(items, [{ key: 'string', order: 'desc' }], 'en')
+        .map(i => i.raw)
+    ).toStrictEqual([
+      { string: 'foo', number: 1 },
+      { string: 'fizzbuzz', number: 3 },
+      { string: 'baz', number: 4 },
+      { string: 'bar', number: 2 },
+    ])
+
+    expect(
+      sortItems(items, [{ key: 'number', order: 'asc' }], 'en')
+        .map(i => i.raw)
+    ).toStrictEqual([
+      { string: 'foo', number: 1 },
+      { string: 'bar', number: 2 },
+      { string: 'fizzbuzz', number: 3 },
+      { string: 'baz', number: 4 },
+    ])
+
+    expect(
+      sortItems(items, [{ key: 'number', order: 'desc' }], 'en')
+        .map(i => i.raw)
+    ).toStrictEqual([
+      { string: 'baz', number: 4 },
+      { string: 'fizzbuzz', number: 3 },
+      { string: 'bar', number: 2 },
+      { string: 'foo', number: 1 },
+    ])
+
+    expect(
+      sortItems(items, [{ key: 'number', order: 'asc' }], 'en', { number: (a, b) => b - a })
+        .map(i => i.raw)
+    ).toStrictEqual([
+      { string: 'baz', number: 4 },
+      { string: 'fizzbuzz', number: 3 },
+      { string: 'bar', number: 2 },
+      { string: 'foo', number: 1 },
+    ])
+
+    expect(
+      sortItems(items, [{ key: 'number', order: 'desc' }], 'en', { number: (a, b) => b - a })
+        .map(i => i.raw)
+    ).toStrictEqual([
+      { string: 'foo', number: 1 },
+      { string: 'bar', number: 2 },
+      { string: 'fizzbuzz', number: 3 },
+      { string: 'baz', number: 4 },
+    ])
+  })
+
+  it('should sort items with deep structure', () => {
+    const items = transformItems({} as any, [{ foo: { bar: { baz: 3 } } }, { foo: { bar: { baz: 1 } } }, { foo: { bar: { baz: 2 } } }])
+
+    expect(
+      sortItems(items, [{ key: 'foo.bar.baz', order: 'asc' }], 'en')
+        .map(i => i.raw)
+    ).toStrictEqual([{ foo: { bar: { baz: 1 } } }, { foo: { bar: { baz: 2 } } }, { foo: { bar: { baz: 3 } } }])
+  })
+
+  it('should sort items by multiple columns', () => {
+    const items = transformItems({} as any, [
+      { string: 'foo', number: 1 },
+      { string: 'bar', number: 3 },
+      { string: 'baz', number: 2 },
+      { string: 'baz', number: 1 },
+    ])
+
+    expect(
+      sortItems(items, [{ key: 'string', order: 'asc' }, { key: 'number', order: 'asc' }], 'en')
+        .map(i => i.raw)
+    ).toStrictEqual([
+      { string: 'bar', number: 3 },
+      { string: 'baz', number: 1 },
+      { string: 'baz', number: 2 },
+      { string: 'foo', number: 1 },
+    ])
+
+    // { string: 'foo', number: 1 },
+    // { string: 'bar', number: 3 },
+    // { string: 'baz', number: 2 },
+    // { string: 'baz', number: 1 },
+
+    // { string: 'bar', number: 3 },
+    // { string: 'baz', number: 2 },
+    // { string: 'baz', number: 1 },
+    // { string: 'foo', number: 1 },
+
+    expect(
+      sortItems(items, [{ key: 'string', order: 'desc' }, { key: 'number', order: 'asc' }], 'en')
+        .map(i => i.raw)
+    ).toStrictEqual([
+      { string: 'foo', number: 1 },
+      { string: 'baz', number: 1 },
+      { string: 'baz', number: 2 },
+      { string: 'bar', number: 3 },
+    ])
+
+    expect(
+      sortItems(items, [{ key: 'string', order: 'asc' }, { key: 'number', order: 'desc' }], 'en')
+        .map(i => i.raw)
+    ).toStrictEqual([
+      { string: 'bar', number: 3 },
+      { string: 'baz', number: 2 },
+      { string: 'baz', number: 1 },
+      { string: 'foo', number: 1 },
+    ])
+
+    expect(
+      sortItems(items, [{ key: 'string', order: 'desc' }, { key: 'number', order: 'desc' }], 'en')
+        .map(i => i.raw)
+    ).toStrictEqual([
+      { string: 'foo', number: 1 },
+      { string: 'baz', number: 2 },
+      { string: 'baz', number: 1 },
+      { string: 'bar', number: 3 },
+    ])
+
+    expect(
+      sortItems(items, [{ key: 'number', order: 'asc' }, { key: 'string', order: 'asc' }], 'en')
+        .map(i => i.raw)
+    ).toStrictEqual([
+      { string: 'baz', number: 1 },
+      { string: 'foo', number: 1 },
+      { string: 'baz', number: 2 },
+      { string: 'bar', number: 3 },
+    ])
+
+    expect(
+      sortItems(items, [{ key: 'number', order: 'desc' }, { key: 'string', order: 'asc' }], 'en')
+        .map(i => i.raw)
+    ).toStrictEqual([
+      { string: 'bar', number: 3 },
+      { string: 'baz', number: 2 },
+      { string: 'baz', number: 1 },
+      { string: 'foo', number: 1 },
+    ])
+
+    expect(
+      sortItems(items, [{ key: 'number', order: 'asc' }, { key: 'string', order: 'desc' }], 'en')
+        .map(i => i.raw)
+    ).toStrictEqual([
+      { string: 'foo', number: 1 },
+      { string: 'baz', number: 1 },
+      { string: 'baz', number: 2 },
+      { string: 'bar', number: 3 },
+    ])
+
+    expect(
+      sortItems(items, [{ key: 'number', order: 'desc' }, { key: 'string', order: 'desc' }], 'en')
+        .map(i => i.raw)
+    ).toStrictEqual([
+      { string: 'bar', number: 3 },
+      { string: 'baz', number: 2 },
+      { string: 'foo', number: 1 },
+      { string: 'baz', number: 1 },
+    ])
+
+    expect(
+      sortItems(items, [{ key: 'string', order: 'asc' }, { key: 'number', order: 'asc' }], 'en', { number: (a, b) => b - a })
+        .map(i => i.raw)
+    ).toStrictEqual([
+      { string: 'bar', number: 3 },
+      { string: 'baz', number: 2 },
+      { string: 'baz', number: 1 },
+      { string: 'foo', number: 1 },
+    ])
+
+    expect(
+      sortItems(items, [{ key: 'number', order: 'asc' }, { key: 'string', order: 'asc' }], 'en', { number: (a, b) => b - a })
+        .map(i => i.raw)
+    ).toStrictEqual([
+      { string: 'bar', number: 3 },
+      { string: 'baz', number: 2 },
+      { string: 'baz', number: 1 },
+      { string: 'foo', number: 1 },
+    ])
+  })
+})
diff --git a/packages/vuetify/src/labs/VDataTable/_variables.scss b/packages/vuetify/src/labs/VDataTable/_variables.scss
new file mode 100644
index 00000000000..384587d7249
--- /dev/null
+++ b/packages/vuetify/src/labs/VDataTable/_variables.scss
@@ -0,0 +1,6 @@
+@use '../../styles/settings';
+@use '../../styles/tools';
+
+$data-table-footer-padding: 0 8px !default;
+$data-table-header-sort-badge-size: 20px !default;
+$data-table-header-sort-badge-color: rgba(var(--v-border-color), var(--v-border-opacity)) !default;
diff --git a/packages/vuetify/src/labs/VDataTable/composables/expand.ts b/packages/vuetify/src/labs/VDataTable/composables/expand.ts
new file mode 100644
index 00000000000..4faf3a2e386
--- /dev/null
+++ b/packages/vuetify/src/labs/VDataTable/composables/expand.ts
@@ -0,0 +1,76 @@
+// Utilities
+import { inject, provide, toRef } from 'vue'
+import { propsFactory } from '@/util'
+
+// Composables
+import { useProxiedModel } from '@/composables/proxiedModel'
+
+// Types
+import type { InjectionKey, PropType, Ref } from 'vue'
+import type { DataTableItem } from '../types'
+
+export const makeDataTableExpandProps = propsFactory({
+  expandOnClick: Boolean,
+  showExpand: Boolean,
+  expanded: {
+    type: Array as PropType<string[]>,
+    default: () => ([]),
+  },
+}, 'v-data-table-expand')
+
+export const VDataTableExpandedKey: InjectionKey<{
+  expand: (item: DataTableItem, value: boolean) => void
+  expanded: Ref<Set<string>>
+  expandOnClick: Ref<boolean | undefined>
+  isExpanded: (item: DataTableItem) => boolean
+  toggleExpand: (item: DataTableItem) => void
+}> = Symbol.for('vuetify:datatable:expanded')
+
+type ExpandProps = {
+  expandOnClick: boolean
+  expanded: string[]
+  'onUpdate:expanded': ((value: any[]) => void) | undefined
+}
+
+export function createExpanded (props: ExpandProps) {
+  const expandOnClick = toRef(props, 'expandOnClick')
+  const expanded = useProxiedModel(props, 'expanded', props.expanded, v => {
+    return new Set(v)
+  }, v => {
+    return [...v.values()]
+  })
+
+  function expand (item: DataTableItem, value: boolean) {
+    const newExpanded = new Set(expanded.value)
+
+    if (!value) {
+      newExpanded.delete(item.value)
+    } else {
+      newExpanded.add(item.value)
+    }
+
+    expanded.value = newExpanded
+  }
+
+  function isExpanded (item: DataTableItem) {
+    return expanded.value.has(item.value)
+  }
+
+  function toggleExpand (item: DataTableItem) {
+    expand(item, !isExpanded(item))
+  }
+
+  const data = { expand, expanded, expandOnClick, isExpanded, toggleExpand }
+
+  provide(VDataTableExpandedKey, data)
+
+  return data
+}
+
+export function useExpanded () {
+  const data = inject(VDataTableExpandedKey)
+
+  if (!data) throw new Error('foo')
+
+  return data
+}
diff --git a/packages/vuetify/src/labs/VDataTable/composables/group.ts b/packages/vuetify/src/labs/VDataTable/composables/group.ts
new file mode 100644
index 00000000000..cbe348a4005
--- /dev/null
+++ b/packages/vuetify/src/labs/VDataTable/composables/group.ts
@@ -0,0 +1,151 @@
+// Utilities
+import { computed, inject, provide, ref } from 'vue'
+import { getObjectValueByPath, propsFactory } from '@/util'
+
+// Types
+import type { InjectionKey, PropType, Ref } from 'vue'
+import type { DataTableItem, GroupHeaderItem } from '../types'
+import type { SortItem } from './sort'
+
+export const makeDataTableGroupProps = propsFactory({
+  groupBy: {
+    type: Array as PropType<SortItem[]>,
+    default: () => ([]),
+  },
+}, 'data-table-group')
+
+const VDataTableGroupSymbol: InjectionKey<{
+  opened: Ref<Set<string>>
+  toggleGroup: (group: string, value?: boolean) => void
+  sortByWithGroups: Ref<SortItem[]>
+  groupBy: Ref<readonly SortItem[]>
+  extractRows: (items: (DataTableItem | GroupHeaderItem)[]) => DataTableItem[]
+}> = Symbol.for('vuetify:data-table-group')
+
+type GroupProps = {
+}
+
+export function createGroupBy (props: GroupProps, groupBy: Ref<readonly SortItem[]>, sortBy: Ref<readonly SortItem[]>) {
+  const opened = ref(new Set<string>())
+
+  const sortByWithGroups = computed(() => {
+    return groupBy.value.map<SortItem>(val => ({
+      ...val,
+      order: val.order ?? false,
+    })).concat(sortBy.value)
+  })
+
+  function toggleGroup (group: string, value?: boolean) {
+    const open = value == null ? !opened.value.has(group) : value
+    if (open) opened.value.add(group)
+    else opened.value.delete(group)
+  }
+
+  function extractRows (items: (DataTableItem | GroupHeaderItem)[]) {
+    function dive (group: GroupHeaderItem): DataTableItem[] {
+      const arr = []
+
+      for (const item of group.items) {
+        if (item.type === 'item') arr.push(item)
+        else {
+          arr.push(...dive(item))
+        }
+      }
+
+      return arr
+    }
+    return dive({ type: 'group-header', items, id: 'dummy', key: 'dummy', value: 'dummy', depth: 0 })
+  }
+
+  // onBeforeMount(() => {
+  //   for (const key of groupedItems.value.keys()) {
+  //     opened.value.add(key)
+  //   }
+  // })
+
+  const data = { sortByWithGroups, toggleGroup, opened, groupBy, extractRows }
+
+  provide(VDataTableGroupSymbol, data)
+
+  return data
+}
+
+export function useGroupBy () {
+  const data = inject(VDataTableGroupSymbol)
+
+  if (!data) throw new Error('Missing group!')
+
+  return data
+}
+
+function groupItemsByProperty (items: DataTableItem[], groupBy: string) {
+  if (!items.length) return []
+
+  const groups = new Map<any, DataTableItem[]>()
+  for (const item of items) {
+    const value = getObjectValueByPath(item.raw, groupBy)
+
+    if (!groups.has(value)) {
+      groups.set(value, [])
+    }
+    groups.get(value)!.push(item)
+  }
+
+  return groups
+}
+
+function groupItems (items: DataTableItem[], groupBy: string[], depth = 0, prefix = 'root') {
+  if (!groupBy.length) return []
+
+  const groupedItems = groupItemsByProperty(items, groupBy[0])
+  const groups: GroupHeaderItem[] = []
+
+  const rest = groupBy.slice(1)
+  groupedItems.forEach((items, value) => {
+    const key = groupBy[0]
+    const id = `${prefix}_${key}_${value}`
+    groups.push({
+      depth,
+      id,
+      key,
+      value,
+      items: rest.length ? groupItems(items, rest, depth + 1, id) : items,
+      type: 'group-header',
+    })
+  })
+
+  return groups
+}
+
+function flattenItems (items: (DataTableItem | GroupHeaderItem)[], opened: Set<string>) {
+  const flatItems: (DataTableItem | GroupHeaderItem)[] = []
+
+  for (const item of items) {
+    // TODO: make this better
+    if (item.type === 'group-header') {
+      if (item.value != null) {
+        flatItems.push(item)
+      }
+
+      if (opened.has(item.id) || item.value == null) {
+        flatItems.push(...flattenItems(item.items, opened))
+      }
+    } else {
+      flatItems.push(item)
+    }
+  }
+
+  return flatItems
+}
+
+export function useGroupedItems (items: Ref<DataTableItem[]>, groupBy: Ref<readonly SortItem[]>, opened: Ref<Set<string>>) {
+  const flatItems = computed(() => {
+    if (!groupBy.value.length) return items.value
+
+    const groupedItems = groupItems(items.value, groupBy.value.map(item => item.key))
+
+    return flattenItems(groupedItems, opened.value)
+  })
+
+  return { flatItems }
+}
diff --git a/packages/vuetify/src/labs/VDataTable/composables/headers.ts b/packages/vuetify/src/labs/VDataTable/composables/headers.ts
new file mode 100644
index 00000000000..0034203d151
--- /dev/null
+++ b/packages/vuetify/src/labs/VDataTable/composables/headers.ts
@@ -0,0 +1,126 @@
+// Utilities
+import { inject, provide, ref, watch } from 'vue'
+import { createRange, propsFactory } from '@/util'
+
+// Types
+import type { InjectionKey, PropType, Ref } from 'vue'
+import type { DataTableHeader, InternalDataTableHeader } from '../types'
+import type { SortItem } from './sort'
+
+export const makeDataTableHeaderProps = propsFactory({
+  headers: {
+    type: Array as PropType<DataTableHeader[] | DataTableHeader[][]>,
+    default: () => ([]),
+  },
+}, 'v-data-table-header')
+
+export const VDataTableHeadersSymbol: InjectionKey<{
+  headers: Ref<InternalDataTableHeader[][]>
+  columns: Ref<InternalDataTableHeader[]>
+}> = Symbol.for('vuetify:data-table-headers')
+
+type HeaderProps = {
+  headers: DataTableHeader[] | DataTableHeader[][]
+}
+
+export function createHeaders (
+  props: HeaderProps,
+  options?: {
+    groupBy?: Ref<readonly SortItem[]>
+    showSelect?: Ref<boolean>
+    showExpand?: Ref<boolean>
+  }
+) {
+  const headers = ref<InternalDataTableHeader[][]>([])
+  const columns = ref<InternalDataTableHeader[]>([])
+
+  watch(() => props.headers, () => {
+    const wrapped = !props.headers.length
+      ? []
+      : Array.isArray(props.headers[0])
+        ? props.headers as DataTableHeader[][]
+        : [props.headers as DataTableHeader[]]
+    const flat = wrapped.flatMap((row, index) => row.map(column => ({ column, row: index })))
+
+    const rowCount = wrapped.length
+    const defaultHeader = { title: '', sortable: false }
+    const defaultActionHeader = { ...defaultHeader, width: 48 }
+
+    if (options?.groupBy?.value.length) {
+      const index = flat.findIndex(({ column }) => column.key === 'data-table-group')
+      if (index < 0) flat.unshift({ column: { ...defaultHeader, key: 'data-table-group', title: 'Group', rowspan: rowCount }, row: 0 })
+      else flat.splice(index, 1, { column: { ...defaultHeader, ...flat[index].column }, row: flat[index].row })
+    }
+
+    if (options?.showSelect?.value) {
+      const index = flat.findIndex(({ column }) => column.key === 'data-table-select')
+      if (index < 0) flat.unshift({ column: { ...defaultActionHeader, key: 'data-table-select', rowspan: rowCount }, row: 0 })
+      else flat.splice(index, 1, { column: { ...defaultActionHeader, ...flat[index].column }, row: flat[index].row })
+    }
+
+    if (options?.showExpand?.value) {
+      const index = flat.findIndex(({ column }) => column.key === 'data-table-expand')
+      if (index < 0) flat.push({ column: { ...defaultActionHeader, key: 'data-table-expand', rowspan: rowCount }, row: 0 })
+      else flat.splice(index, 1, { column: { ...defaultActionHeader, ...flat[index].column }, row: flat[index].row })
+    }
+
+    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++}`
+      for (let i = row; i <= row + (column.rowspan ?? 1) - 1; i++) {
+        fixedRows[i].push({
+          ...column,
+          key: id,
+          fixedOffset: fixedOffsets[i],
+          sortable: column.sortable ?? !!column.key,
+        })
+
+        fixedOffsets[i] += column.width ?? 0
+      }
+    })
+
+    fixedRows.forEach(row => {
+      for (let i = row.length; i--; i >= 0) {
+        if (row[i].fixed) {
+          row[i].lastFixed = true
+          return
+        }
+      }
+    })
+
+    const seen = new Set()
+    headers.value = fixedRows.map(row => {
+      const filtered = []
+      for (const column of row) {
+        if (!seen.has(column.key)) {
+          seen.add(column.key)
+          filtered.push(column)
+        }
+      }
+
+      return filtered
+    })
+
+    columns.value = fixedRows.at(-1) ?? []
+  }, {
+    deep: true,
+    immediate: true,
+  })
+
+  const data = { headers, columns }
+
+  provide(VDataTableHeadersSymbol, data)
+
+  return data
+}
+
+export function useHeaders () {
+  const data = inject(VDataTableHeadersSymbol)
+
+  if (!data) throw new Error('Missing headers!')
+
+  return data
+}
diff --git a/packages/vuetify/src/labs/VDataTable/composables/items.ts b/packages/vuetify/src/labs/VDataTable/composables/items.ts
new file mode 100644
index 00000000000..371eca44af1
--- /dev/null
+++ b/packages/vuetify/src/labs/VDataTable/composables/items.ts
@@ -0,0 +1,36 @@
+// Composables
+import { makeItemsProps, useItems } from '@/composables/items'
+
+// Utilities
+import { computed } from 'vue'
+import { getPropertyFromItem, propsFactory } from '@/util'
+
+// Types
+import type { Ref } from 'vue'
+import type { ItemProps } from '@/composables/items'
+import type { DataTableItem, InternalDataTableHeader } from '../types'
+
+export const makeDataTableItemProps = propsFactory({
+  // TODO: Worth it to make specific datatable implementation
+  // without title, children?
+  ...makeItemsProps({
+    itemValue: 'id',
+  }),
+}, 'v-data-table-item')
+
+export function useDataTableItems (props: ItemProps, columns: Ref<InternalDataTableHeader[]>) {
+  const { items } = useItems(props)
+
+  const dataTableItems = computed<DataTableItem[]>(() => items.value.map(item => {
+    return {
+      ...item,
+      type: 'item',
+      columns: columns.value.reduce((obj, column) => {
+        obj[column.key] = getPropertyFromItem(item.raw, column.value ?? column.key)
+        return obj
+      }, {} as Record<string, unknown>),
+    }
+  }))
+
+  return { items: dataTableItems }
+}
diff --git a/packages/vuetify/src/labs/VDataTable/composables/options.ts b/packages/vuetify/src/labs/VDataTable/composables/options.ts
new file mode 100644
index 00000000000..5bfb0fd2e83
--- /dev/null
+++ b/packages/vuetify/src/labs/VDataTable/composables/options.ts
@@ -0,0 +1,51 @@
+// Utilities
+import { computed, watch } from 'vue'
+import { deepEqual, getCurrentInstance } from '@/util'
+
+// Types
+import type { Ref } from 'vue'
+import type { SortItem } from './sort'
+
+export function useOptions ({
+  page,
+  itemsPerPage,
+  sortBy,
+  startIndex,
+  stopIndex,
+  pageCount,
+}: {
+  page: Ref<number>
+  itemsPerPage: Ref<number>
+  sortBy: Ref<readonly SortItem[]>
+  startIndex: Ref<number>
+  stopIndex: Ref<number>
+  pageCount: Ref<number>
+}) {
+  const vm = getCurrentInstance('VDataTable')
+
+  const options = computed(() => ({
+    page: page.value,
+    itemsPerPage: itemsPerPage.value,
+    startIndex: startIndex.value,
+    stopIndex: stopIndex.value,
+    pageCount: pageCount.value,
+    sortBy: sortBy.value,
+  }))
+
+  // Reset page when sorting changes
+  watch(sortBy, () => {
+    page.value = 1
+  }, { deep: true })
+
+  // Reset page when items-per-page changes
+  watch(itemsPerPage, () => {
+    page.value = 1
+  })
+
+  let oldOptions: unknown = null
+  watch(options, () => {
+    if (deepEqual(oldOptions, options.value)) return
+    vm.emit('update:options', options.value)
+    oldOptions = options.value
+  }, { deep: true, immediate: true })
+}
diff --git a/packages/vuetify/src/labs/VDataTable/composables/paginate.ts b/packages/vuetify/src/labs/VDataTable/composables/paginate.ts
new file mode 100644
index 00000000000..d773a037098
--- /dev/null
+++ b/packages/vuetify/src/labs/VDataTable/composables/paginate.ts
@@ -0,0 +1,95 @@
+// Composables
+import { useProxiedModel } from '@/composables/proxiedModel'
+
+// Utilities
+import { computed, inject, provide, watchEffect } from 'vue'
+import { propsFactory } from '@/util'
+
+// Types
+import type { InjectionKey, Ref } from 'vue'
+
+export const makeDataTablePaginateProps = propsFactory({
+  page: {
+    type: [Number, String],
+    default: 1,
+  },
+  itemsPerPage: {
+    type: [Number, String],
+    default: 10,
+  },
+}, 'v-data-table-paginate')
+
+const VDataTablePaginationSymbol: InjectionKey<{
+  page: Ref<number>
+  itemsPerPage: Ref<number>
+  startIndex: Ref<number>
+  stopIndex: Ref<number>
+  pageCount: Ref<number>
+  itemsLength: Ref<number>
+}> = Symbol.for('vuetify:data-table-pagination')
+
+type PaginationProps = {
+  page: number | string
+  'onUpdate:page': ((val: any) => void) | undefined
+  itemsPerPage: number | string
+  'onUpdate:itemsPerPage': ((val: any) => void) | undefined
+  itemsLength?: number | string
+}
+
+export function createPagination (props: PaginationProps, items: Ref<any[]>) {
+  const page = useProxiedModel(props, 'page', undefined, value => +(value ?? 1))
+  const itemsPerPage = useProxiedModel(props, 'itemsPerPage', undefined, value => +(value ?? 10))
+  const itemsLength = computed(() => +(props.itemsLength ?? items.value.length))
+
+  const startIndex = computed(() => {
+    if (itemsPerPage.value === -1) return 0
+
+    return itemsPerPage.value * (page.value - 1)
+  })
+  const stopIndex = computed(() => {
+    if (itemsPerPage.value === -1) return itemsLength.value
+
+    return Math.min(itemsLength.value, startIndex.value + itemsPerPage.value)
+  })
+
+  const pageCount = computed(() => {
+    if (itemsPerPage.value === -1) return 1
+
+    return Math.ceil(itemsLength.value / itemsPerPage.value)
+  })
+
+  watchEffect(() => {
+    if (startIndex.value > itemsLength.value) {
+      page.value = 1
+    }
+  })
+
+  const data = { page, itemsPerPage, startIndex, stopIndex, pageCount, itemsLength }
+
+  provide(VDataTablePaginationSymbol, data)
+
+  return data
+}
+
+export function usePagination () {
+  const data = inject(VDataTablePaginationSymbol)
+
+  if (!data) throw new Error('Missing pagination!')
+
+  return data
+}
+
+export function usePaginatedItems (
+  items: Ref<any[]>,
+  startIndex: Ref<number>,
+  stopIndex: Ref<number>,
+  itemsPerPage: Ref<number>
+) {
+  const paginatedItems = computed(() => {
+    if (itemsPerPage.value <= 0) return items.value
+
+    return items.value.slice(startIndex.value, stopIndex.value)
+  })
+
+  return { paginatedItems }
+}
diff --git a/packages/vuetify/src/labs/VDataTable/composables/select.ts b/packages/vuetify/src/labs/VDataTable/composables/select.ts
new file mode 100644
index 00000000000..bfc7493db9c
--- /dev/null
+++ b/packages/vuetify/src/labs/VDataTable/composables/select.ts
@@ -0,0 +1,83 @@
+// Composables
+import { useProxiedModel } from '@/composables/proxiedModel'
+
+// Utilities
+import { computed, inject, provide } from 'vue'
+import { propsFactory } from '@/util'
+
+// Types
+import type { InjectionKey, PropType, Ref } from 'vue'
+import type { ItemProps } from '@/composables/items'
+import type { DataTableItem } from '../types'
+
+export const makeDataTableSelectProps = propsFactory({
+  showSelect: Boolean,
+  modelValue: {
+    type: Array as PropType<any[]>,
+    default: () => ([]),
+  },
+}, 'v-data-table-select')
+
+export const VDataTableSelectionSymbol: InjectionKey<{
+  toggleSelect: (item: DataTableItem) => void
+  select: (items: DataTableItem[], value: boolean) => void
+  selectAll: (value: boolean) => void
+  isSelected: (items: DataTableItem[]) => boolean
+  isSomeSelected: (items: DataTableItem[]) => boolean
+  someSelected: Ref<boolean>
+  allSelected: Ref<boolean>
+}> = Symbol.for('vuetify:data-table-selection')
+
+type SelectionProps = Pick<ItemProps, 'itemValue'> & { modelValue: any[], 'onUpdate:modelValue': ((value: any[]) => void) | undefined }
+
+export function createSelection (props: SelectionProps, allItems: Ref<DataTableItem[]>) {
+  const selected = useProxiedModel(props, 'modelValue', props.modelValue, v => {
+    return new Set(v)
+  }, v => {
+    return [...v.values()]
+  })
+
+  function isSelected (items: DataTableItem[]) {
+    return items.every(item => selected.value.has(item.value))
+  }
+
+  function isSomeSelected (items: DataTableItem[]) {
+    return items.some(item => selected.value.has(item.value))
+  }
+
+  function select (items: DataTableItem[], value: boolean) {
+    const newSelected = new Set(selected.value)
+
+    for (const item of items) {
+      if (value) newSelected.add(item.value)
+      else newSelected.delete(item.value)
+    }
+
+    selected.value = newSelected
+  }
+
+  function toggleSelect (item: DataTableItem) {
+    select([item], !isSelected([item]))
+  }
+
+  function selectAll (value: boolean) {
+    select(allItems.value, value)
+  }
+
+  const someSelected = computed(() => selected.value.size > 0)
+  const allSelected = computed(() => isSelected(allItems.value))
+
+  const data = { toggleSelect, select, selectAll, isSelected, isSomeSelected, someSelected, allSelected }
+
+  provide(VDataTableSelectionSymbol, data)
+
+  return data
+}
+
+export function useSelection () {
+  const data = inject(VDataTableSelectionSymbol)
+
+  if (!data) throw new Error('Missing selection!')
+
+  return data
+}
diff --git a/packages/vuetify/src/labs/VDataTable/composables/sort.ts b/packages/vuetify/src/labs/VDataTable/composables/sort.ts
new file mode 100644
index 00000000000..35c1a34ac72
--- /dev/null
+++ b/packages/vuetify/src/labs/VDataTable/composables/sort.ts
@@ -0,0 +1,141 @@
+// Composables
+import { useProxiedModel } from '@/composables/proxiedModel'
+
+// Utilities
+import { computed, inject, provide } from 'vue'
+import { getObjectValueByPath, propsFactory } from '@/util'
+
+// Types
+import type { InjectionKey, PropType, Ref } from 'vue'
+import type { InternalItem } from '@/composables/items'
+import type { DataTableCompareFunction, DataTableItem, InternalDataTableHeader } from '../types'
+
+export const makeDataTableSortProps = propsFactory({
+  sortBy: {
+    type: Array as PropType<SortItem[]>,
+    default: () => ([]),
+  },
+  multiSort: Boolean,
+  mustSort: Boolean,
+}, 'v-data-table-sort')
+
+const VDataTableSortSymbol: InjectionKey<{
+  sortBy: Ref<readonly SortItem[]>
+  toggleSort: (key: string) => void
+}> = Symbol.for('vuetify:data-table-sort')
+
+export type SortItem = { key: string, order?: boolean | 'asc' | 'desc' }
+
+export function createSort (props: {
+  sortBy: SortItem[]
+  'onUpdate:sortBy': ((value: any) => void) | undefined
+  mustSort?: boolean
+  multiSort?: boolean
+}) {
+  const sortBy = useProxiedModel(props, 'sortBy')
+
+  const toggleSort = (key: string) => {
+    let newSortBy = sortBy.value?.map(x => ({ ...x })) ?? []
+    const item = newSortBy.find(x => x.key === key)
+
+    if (!item) {
+      if (props.multiSort) newSortBy = [...newSortBy, { key, order: 'asc' }]
+      else newSortBy = [{ key, order: 'asc' }]
+    } else if (item.order === 'desc') {
+      if (props.mustSort) {
+        item.order = 'asc'
+      } else {
+        newSortBy = newSortBy.filter(x => x.key !== key)
+      }
+    } else {
+      item.order = 'desc'
+    }
+
+    sortBy.value = newSortBy
+  }
+
+  const data = { sortBy, toggleSort }
+
+  provide(VDataTableSortSymbol, data)
+
+  return data
+}
+
+export function useSort () {
+  const data = inject(VDataTableSortSymbol)
+
+  if (!data) throw new Error('Missing sort!')
+
+  return data
+}
+
+export function useSortedItems (items: Ref<DataTableItem[]>, sortBy: Ref<readonly SortItem[]>, columns: Ref<InternalDataTableHeader[]>) {
+  // TODO: Put this in separate prop customKeySort to match filter composable?
+  const customSorters = computed(() => {
+    return columns.value.reduce<Record<string, DataTableCompareFunction>>((obj, item) => {
+      if (item.sort) obj[item.key] = item.sort
+
+      return obj
+    }, {})
+  })
+
+  const sortedItems = computed(() => {
+    if (!sortBy.value?.length) return items.value
+
+    return sortItems(items.value, sortBy.value, 'en', customSorters.value)
+  })
+
+  return { sortedItems }
+}
+
+export function sortItems<T extends InternalItem> (
+  items: T[],
+  sortByItems: readonly SortItem[],
+  locale: string,
+  customSorters?: Record<string, DataTableCompareFunction>
+): T[] {
+  const stringCollator = new Intl.Collator(locale, { sensitivity: 'accent', usage: 'sort' })
+
+  return [...items].sort((a, b) => {
+    for (let i = 0; i < sortByItems.length; i++) {
+      const sortKey = sortByItems[i].key
+      const sortOrder = sortByItems[i].order
+
+      if (sortOrder === false) continue
+
+      let sortA = getObjectValueByPath(a.raw, sortKey)
+      let sortB = getObjectValueByPath(b.raw, sortKey)
+
+      if (sortOrder === 'desc') {
+        [sortA, sortB] = [sortB, sortA]
+      }
+
+      if (customSorters?.[sortKey]) {
+        const customResult = customSorters[sortKey](sortA, sortB)
+
+        if (!customResult) continue
+
+        return customResult
+      }
+
+      // Check if both cannot be evaluated
+      if (sortA == null || sortB == null) {
+        continue
+      }
+
+      // Dates should be compared numerically
+      if (sortA instanceof Date && sortB instanceof Date) {
+        return sortA.getTime() - sortB.getTime()
+      }
+
+      [sortA, sortB] = [sortA, sortB].map(s => (s || '').toString().toLocaleLowerCase())
+
+      if (sortA !== sortB) {
+        if (!isNaN(sortA) && !isNaN(sortB)) return Number(sortA) - Number(sortB)
+        return stringCollator.compare(sortA, sortB)
+      }
+    }
+
+    return 0
+  })
+}
diff --git a/packages/vuetify/src/labs/VDataTable/composables/virtual.ts b/packages/vuetify/src/labs/VDataTable/composables/virtual.ts
new file mode 100644
index 00000000000..93ed0ccaba1
--- /dev/null
+++ b/packages/vuetify/src/labs/VDataTable/composables/virtual.ts
@@ -0,0 +1,99 @@
+// Utilities
+import { computed, ref } from 'vue'
+import { propsFactory } from '@/util'
+
+// Types
+import type { Ref } from 'vue'
+
+export const makeDataTableVirtualProps = propsFactory({
+  visibleItems: {
+    type: [String, Number],
+    default: 20,
+  },
+  itemHeight: {
+    type: [String, Number],
+    default: 52,
+  },
+}, 'virtual')
+
+type VirtualProps = {
+  itemHeight: string | number
+  visibleItems: string | number
+}
+
+const UP = -1
+const DOWN = 1
+
+// TODO: Replace this with composable from v-virtual-scroll
+export function useVirtual (props: VirtualProps, items: Ref<any[]>) {
+  const startIndex = ref(0)
+  const itemHeight = computed(() => parseInt(props.itemHeight, 10))
+  const visibleItems = computed(() => parseInt(props.visibleItems, 10))
+  const containerRef = ref<HTMLDivElement>()
+  const isScrolling = ref(false)
+
+  function calculateOffset (index: number) {
+    return index * itemHeight.value
+  }
+
+  function calculateMidPointIndex (scrollTop: number) {
+    let start = 0
+    let end = items.value.length
+
+    while (start <= end) {
+      const middle = start + Math.floor((end - start) / 2)
+      const middleOffset = calculateOffset(middle)
+
+      if (middleOffset === scrollTop) {
+        return middle
+      } else if (middleOffset < scrollTop) {
+        start = middle + 1
+      } else if (middleOffset > scrollTop) {
+        end = middle - 1
+      }
+    }
+
+    return start
+  }
+
+  let lastScrollTop = 0
+  let scrollTimeout: any
+  function handleScroll () {
+    if (!containerRef.value) return
+
+    isScrolling.value = true
+    clearTimeout(scrollTimeout)
+    scrollTimeout = setTimeout(() => {
+      isScrolling.value = false
+    }, 100)
+
+    const scrollTop = containerRef.value.scrollTop
+    const direction = scrollTop < lastScrollTop ? UP : DOWN
+
+    const midPointIndex = calculateMidPointIndex(scrollTop)
+
+    const buffer = Math.round(visibleItems.value / 3)
+    if (direction === UP && midPointIndex <= startIndex.value) {
+      startIndex.value = Math.max(midPointIndex - buffer, 0)
+    } else if (direction === DOWN && midPointIndex >= startIndex.value + (buffer * 2)) {
+      startIndex.value = Math.min(Math.max(0, midPointIndex - buffer), items.value.length - visibleItems.value)
+    }
+
+    lastScrollTop = containerRef.value.scrollTop
+  }
+
+  const stopIndex = computed(() => Math.min(items.value.length, startIndex.value + visibleItems.value))
+  const paddingTop = computed(() => calculateOffset(startIndex.value))
+  const paddingBottom = computed(() => calculateOffset(items.value.length) - calculateOffset(stopIndex.value))
+
+  return {
+    startIndex,
+    stopIndex,
+    paddingTop,
+    paddingBottom,
+    handleScroll,
+    containerRef,
+    itemHeight,
+    isScrolling,
+  }
+}
diff --git a/packages/vuetify/src/labs/VDataTable/index.ts b/packages/vuetify/src/labs/VDataTable/index.ts
new file mode 100644
index 00000000000..ef9582e2a45
--- /dev/null
+++ b/packages/vuetify/src/labs/VDataTable/index.ts
@@ -0,0 +1,5 @@
+export { VDataTable } from './VDataTable'
+export { VDataTableRows } from './VDataTableRows'
+export { VDataTableRow } from './VDataTableRow'
+export { VDataTableVirtual } from './VDataTableVirtual'
+export { VDataTableServer } from './VDataTableServer'
diff --git a/packages/vuetify/src/labs/VDataTable/types.ts b/packages/vuetify/src/labs/VDataTable/types.ts
new file mode 100644
index 00000000000..23d8cfdfaca
--- /dev/null
+++ b/packages/vuetify/src/labs/VDataTable/types.ts
@@ -0,0 +1,43 @@
+import type { InternalItem } from '@/composables/items'
+import type { SelectItemKey } from '@/util'
+
+export type DataTableCompareFunction<T = any> = (a: T, b: T) => number
+
+export type DataTableHeader = {
+  key: string
+  value?: SelectItemKey
+  title: string
+
+  colspan?: number
+  rowspan?: number
+
+  fixed?: boolean
+  align?: 'start' | 'end'
+
+  width?: number
+  minWidth?: string
+  maxWidth?: string
+
+  sortable?: boolean
+  sort?: DataTableCompareFunction
+}
+
+export type InternalDataTableHeader = DataTableHeader & {
+  sortable: boolean
+
+  fixedOffset?: number
+  lastFixed?: boolean
+}
+
+export type DataTableItem = InternalItem & { type: 'item', columns: Record<string, unknown> }
+
+export type GroupHeaderItem = {
+  type: 'group-header'
+  id: string
+  key: string
+  value: string
+  depth: number
+  items: (GroupHeaderItem | DataTableItem)[]
+}
+
+export type InternalDataTableItem = DataTableItem | GroupHeaderItem
diff --git a/packages/vuetify/src/labs/components.ts b/packages/vuetify/src/labs/components.ts
index a98fdf9916d..b3a6415fe3b 100644
--- a/packages/vuetify/src/labs/components.ts
+++ b/packages/vuetify/src/labs/components.ts
@@ -1,3 +1 @@
-// export * from './VDataTable'
-
-export {}
+export * from './VDataTable'
diff --git a/packages/vuetify/src/util/__tests__/helpers.spec.ts b/packages/vuetify/src/util/__tests__/helpers.spec.ts
index 62cffc2f85b..441ff1d1d58 100644
--- a/packages/vuetify/src/util/__tests__/helpers.spec.ts
+++ b/packages/vuetify/src/util/__tests__/helpers.spec.ts
@@ -10,7 +10,6 @@ import {
   getPropertyFromItem,
   humanReadableFileSize,
   mergeDeep,
-  sortItems,
 } from '../helpers'
 import { isProxy, isRef, ref } from 'vue'
 
@@ -257,175 +256,6 @@ describe('helpers', () => {
     expect(humanReadableFileSize(2000000000)).toBe('2.0 GB')
   })
 
-  it('should sort items by single column', () => {
-    let items
-    const getItems = () => [
-      { string: 'foo', number: 1 },
-      { string: 'bar', number: 2 },
-      { string: 'baz', number: 4 },
-      { string: 'fizzbuzz', number: 3 },
-    ]
-
-    sortItems(items = getItems(), ['string'], [], 'en')
-    expect(items).toStrictEqual([
-      { string: 'bar', number: 2 },
-      { string: 'baz', number: 4 },
-      { string: 'fizzbuzz', number: 3 },
-      { string: 'foo', number: 1 },
-    ])
-
-    sortItems(items = getItems(), ['string'], [true], 'en')
-    expect(items).toStrictEqual([
-      { string: 'foo', number: 1 },
-      { string: 'fizzbuzz', number: 3 },
-      { string: 'baz', number: 4 },
-      { string: 'bar', number: 2 },
-    ])
-
-    sortItems(items = getItems(), ['number'], [], 'en')
-    expect(items)
-      .toStrictEqual([
-        { string: 'foo', number: 1 },
-        { string: 'bar', number: 2 },
-        { string: 'fizzbuzz', number: 3 },
-        { string: 'baz', number: 4 },
-      ])
-
-    sortItems(items = getItems(), ['number'], [true], 'en')
-    expect(items)
-      .toStrictEqual([
-        { string: 'baz', number: 4 },
-        { string: 'fizzbuzz', number: 3 },
-        { string: 'bar', number: 2 },
-        { string: 'foo', number: 1 },
-      ])
-
-    sortItems(items = getItems(), ['number'], [], 'en', { number: (a, b) => b - a })
-    expect(items)
-      .toStrictEqual([
-        { string: 'baz', number: 4 },
-        { string: 'fizzbuzz', number: 3 },
-        { string: 'bar', number: 2 },
-        { string: 'foo', number: 1 },
-      ])
-
-    sortItems(items = getItems(), ['number'], [true], 'en', { number: (a, b) => b - a })
-    expect(items)
-      .toStrictEqual([
-        { string: 'foo', number: 1 },
-        { string: 'bar', number: 2 },
-        { string: 'fizzbuzz', number: 3 },
-        { string: 'baz', number: 4 },
-      ])
-  })
-
-  it('should sort items with deep structure', () => {
-    const items = [{ foo: { bar: { baz: 3 } } }, { foo: { bar: { baz: 1 } } }, { foo: { bar: { baz: 2 } } }]
-
-    sortItems(items, ['foo.bar.baz'], [], 'en')
-    expect(items).toStrictEqual([{ foo: { bar: { baz: 1 } } }, { foo: { bar: { baz: 2 } } }, { foo: { bar: { baz: 3 } } }])
-  })
-
-  it('should sort items by multiple columns', () => {
-    let items
-    const getItems = () => [
-      { string: 'foo', number: 1 },
-      { string: 'bar', number: 3 },
-      { string: 'baz', number: 2 },
-      { string: 'baz', number: 1 },
-    ]
-
-    sortItems(items = getItems(), ['string', 'number'], [], 'en')
-    expect(items)
-      .toStrictEqual([
-        { string: 'bar', number: 3 },
-        { string: 'baz', number: 1 },
-        { string: 'baz', number: 2 },
-        { string: 'foo', number: 1 },
-      ])
-
-    sortItems(items = getItems(), ['string', 'number'], [true, false], 'en')
-    expect(items)
-      .toStrictEqual([
-        { string: 'foo', number: 1 },
-        { string: 'baz', number: 1 },
-        { string: 'baz', number: 2 },
-        { string: 'bar', number: 3 },
-      ])
-
-    sortItems(items = getItems(), ['string', 'number'], [false, true], 'en')
-    expect(items)
-      .toStrictEqual([
-        { string: 'bar', number: 3 },
-        { string: 'baz', number: 2 },
-        { string: 'baz', number: 1 },
-        { string: 'foo', number: 1 },
-      ])
-
-    sortItems(items = getItems(), ['string', 'number'], [true, true], 'en')
-    expect(items)
-      .toStrictEqual([
-        { string: 'foo', number: 1 },
-        { string: 'baz', number: 2 },
-        { string: 'baz', number: 1 },
-        { string: 'bar', number: 3 },
-      ])
-
-    sortItems(items = getItems(), ['number', 'string'], [], 'en')
-    expect(items)
-      .toStrictEqual([
-        { string: 'baz', number: 1 },
-        { string: 'foo', number: 1 },
-        { string: 'baz', number: 2 },
-        { string: 'bar', number: 3 },
-      ])
-
-    sortItems(items = getItems(), ['number', 'string'], [true, false], 'en')
-    expect(items)
-      .toStrictEqual([
-        { string: 'bar', number: 3 },
-        { string: 'baz', number: 2 },
-        { string: 'baz', number: 1 },
-        { string: 'foo', number: 1 },
-      ])
-
-    sortItems(items = getItems(), ['number', 'string'], [false, true], 'en')
-    expect(items)
-      .toStrictEqual([
-        { string: 'foo', number: 1 },
-        { string: 'baz', number: 1 },
-        { string: 'baz', number: 2 },
-        { string: 'bar', number: 3 },
-      ])
-
-    sortItems(items = getItems(), ['number', 'string'], [true, true], 'en')
-    expect(items)
-      .toStrictEqual([
-        { string: 'bar', number: 3 },
-        { string: 'baz', number: 2 },
-        { string: 'foo', number: 1 },
-        { string: 'baz', number: 1 },
-      ])
-
-    sortItems(items = getItems(), ['string', 'number'], [], 'en', { number: (a, b) => b - a })
-    expect(items)
-      .toStrictEqual([
-        { string: 'bar', number: 3 },
-        { string: 'baz', number: 2 },
-        { string: 'baz', number: 1 },
-        { string: 'foo', number: 1 },
-      ])
-
-    sortItems(items = getItems(), ['number', 'string'], [], 'en', { number: (a, b) => b - a })
-    expect(items)
-      .toStrictEqual([
-        { string: 'bar', number: 3 },
-        { string: 'baz', number: 2 },
-        { string: 'baz', number: 1 },
-        { string: 'foo', number: 1 },
-      ])
-  })
-
   describe('mergeDeep', () => {
     it('should include all properties from both source and target', () => {
       expect(mergeDeep({ a: 'foo' }, { b: 'bar' })).toEqual({ a: 'foo', b: 'bar' })
diff --git a/packages/vuetify/src/util/defineComponent.tsx b/packages/vuetify/src/util/defineComponent.tsx
index 4ae8d49ca79..fc15a268033 100644
--- a/packages/vuetify/src/util/defineComponent.tsx
+++ b/packages/vuetify/src/util/defineComponent.tsx
@@ -15,6 +15,7 @@ import { useToggleScope } from '@/composables/toggleScope'
 
 // Types
 import type {
+  ComponentObjectPropsOptions,
   ComponentOptions,
   ComponentOptionsMixin,
   ComponentOptionsWithObjectProps,
@@ -22,6 +23,9 @@ import type {
   ComputedOptions,
   DefineComponent,
   EmitsOptions,
+  ExtractDefaultPropTypes,
+  ExtractPropTypes,
+  FunctionalComponent,
   MethodOptions,
   VNode,
   VNodeChild,
@@ -134,3 +138,13 @@ export function genericComponent<T extends (new () => {
 >(options: ComponentOptionsWithObjectProps<PropsOptions, RawBindings, D, C, M, Mixin, Extends, E, EE>) => Base & T {
   return options => (exposeDefaults ? defineComponent : _defineComponent)(options) as any
 }
+
+export function defineFunctionalComponent<
+  T extends FunctionalComponent<Props>,
+  PropsOptions = ComponentObjectPropsOptions,
+  Defaults = ExtractDefaultPropTypes<PropsOptions>,
+  Props = Readonly<ExtractPropTypes<PropsOptions>>,
+> (props: PropsOptions, render: T): FunctionalComponent<Partial<Defaults> & Omit<Props, keyof Defaults>> {
+  render.props = props as any
+  return render as any
+}
diff --git a/packages/vuetify/src/util/helpers.ts b/packages/vuetify/src/util/helpers.ts
index ecd300dc141..4a1fb9872ec 100644
--- a/packages/vuetify/src/util/helpers.ts
+++ b/packages/vuetify/src/util/helpers.ts
@@ -305,58 +305,6 @@ export function wrapInArray<T> (v: T | T[] | null | undefined): T[] {
       ? v : [v]
 }
 
-type DataTableCompareFunction<T = any> = (a: T, b: T) => number
-export function sortItems<T extends any, K extends keyof T> (
-  items: T[],
-  sortBy: string[],
-  sortDesc: boolean[],
-  locale: string,
-  customSorters?: Record<K, DataTableCompareFunction<T[K]>>
-): T[] {
-  if (sortBy === null || !sortBy.length) return items
-  const stringCollator = new Intl.Collator(locale, { sensitivity: 'accent', usage: 'sort' })
-
-  return items.sort((a, b) => {
-    for (let i = 0; i < sortBy.length; i++) {
-      const sortKey = sortBy[i]
-
-      let sortA = getObjectValueByPath(a, sortKey)
-      let sortB = getObjectValueByPath(b, sortKey)
-
-      if (sortDesc[i]) {
-        [sortA, sortB] = [sortB, sortA]
-      }
-
-      if (customSorters?.[sortKey as K]) {
-        const customResult = customSorters[sortKey as K](sortA, sortB)
-
-        if (!customResult) continue
-
-        return customResult
-      }
-
-      // Check if both cannot be evaluated
-      if (sortA === null && sortB === null) {
-        continue
-      }
-
-      // Dates should be compared numerically
-      if (sortA instanceof Date && sortB instanceof Date) {
-        return sortA.getTime() - sortB.getTime()
-      }
-
-      [sortA, sortB] = [sortA, sortB].map(s => (s || '').toString().toLocaleLowerCase())
-
-      if (sortA !== sortB) {
-        if (!isNaN(sortA) && !isNaN(sortB)) return Number(sortA) - Number(sortB)
-        return stringCollator.compare(sortA, sortB)
-      }
-    }
-
-    return 0
-  })
-}
-
 export function defaultFilter (value: any, search: string | null, item: any) {
   return value != null &&
     search != null &&