From 31a8f4d7349b3b6df5e6c5c082419758a0a33136 Mon Sep 17 00:00:00 2001
From: Albert Kaaman <albert@kaaman.nu>
Date: Fri, 19 May 2023 13:09:44 +0200
Subject: [PATCH] feat: add VDataIterator to labs (#16839)

closes #13478

Co-authored-by: John Leider <john@vuetifyjs.com>
Co-authored-by: Kael <kaelwd@gmail.com>
---
 .../locale/en/{item.json => list-items.json}  |   0
 packages/api-generator/src/types.ts           |  22 +-
 packages/docs/src/data/301.json               |   1 -
 packages/docs/src/data/nav.json               |   4 +
 .../examples/v-data-iterator/misc-filter.vue  | 305 +++++----
 .../examples/v-data-iterator/slot-default.vue | 131 ++--
 .../slot-header-and-footer.vue                | 217 ++++---
 .../src/examples/v-data-iterator/usage.vue    | 377 +++--------
 .../examples/v-data-table/prop-grouping.vue   |   4 +-
 packages/docs/src/pages/en/components/all.md  |   6 +
 .../src/pages/en/components/data-iterators.md |  59 +-
 .../pages/en/getting-started/upgrade-guide.md |   2 +-
 .../VAutocomplete/VAutocomplete.tsx           |  12 +-
 .../src/components/VCombobox/VCombobox.tsx    |  12 +-
 .../vuetify/src/components/VData/VData.ts     | 384 -----------
 .../components/VData/__tests__/VData.spec.ts  | 602 ------------------
 .../__snapshots__/VData.spec.ts.snap          | 159 -----
 .../vuetify/src/components/VData/index.ts     |   5 -
 .../components/VDataIterator/VDataFooter.sass |  71 ---
 .../components/VDataIterator/VDataFooter.ts   | 232 -------
 .../components/VDataIterator/VDataIterator.ts | 361 -----------
 .../__tests__/VDataFooter.spec.ts             | 204 ------
 .../__tests__/VDataIterator.spec.ts           | 353 ----------
 .../__snapshots__/VDataFooter.spec.ts.snap    | 450 -------------
 .../__snapshots__/VDataIterator.spec.ts.snap  | 428 -------------
 .../components/VDataIterator/_variables.scss  |  13 -
 .../src/components/VDataIterator/index.ts     |  10 -
 .../vuetify/src/components/VList/VList.tsx    |   6 +-
 .../VList/__tests__/VListItem.spec.ts         |  38 --
 .../__snapshots__/VListItem.spec.ts.snap      |  12 -
 .../src/components/VSelect/VSelect.tsx        |  12 +-
 packages/vuetify/src/components/index.ts      |   1 -
 .../src/composables/__tests__/filter.spec.ts  |   2 +-
 .../src/composables/__tests__/items.spec.ts   |   2 +-
 packages/vuetify/src/composables/filter.ts    |  17 +-
 .../composables/{items.ts => list-items.ts}   |  26 +-
 .../src/labs/VDataIterator/VDataIterator.tsx  | 170 +++++
 .../__tests__/VDataIterator.spec.cy.tsx       | 105 +++
 .../labs/VDataIterator/composables/items.ts   |  63 ++
 .../vuetify/src/labs/VDataIterator/index.ts   |   1 +
 .../src/labs/VDataTable/VDataTable.tsx        |  12 +-
 .../VDataTable/VDataTableGroupHeaderRow.tsx   |   6 +-
 .../src/labs/VDataTable/VDataTableRows.tsx    |  31 +-
 .../src/labs/VDataTable/VDataTableVirtual.tsx |   8 +-
 .../labs/VDataTable/__tests__/sort.spec.ts    |   2 +-
 .../src/labs/VDataTable/composables/group.ts  |  63 +-
 .../src/labs/VDataTable/composables/items.ts  |  80 ++-
 .../labs/VDataTable/composables/paginate.ts   |  23 +-
 .../src/labs/VDataTable/composables/select.ts |  28 +-
 .../src/labs/VDataTable/composables/sort.ts   |  27 +-
 .../labs/VDataTable/composables/virtual.ts    |   2 +-
 packages/vuetify/src/labs/VDataTable/index.ts |   2 +-
 packages/vuetify/src/labs/VDataTable/types.ts |  19 +-
 packages/vuetify/src/labs/components.ts       |   1 +
 packages/vuetify/src/util/helpers.ts          |  28 -
 55 files changed, 1031 insertions(+), 4180 deletions(-)
 rename packages/api-generator/src/locale/en/{item.json => list-items.json} (100%)
 delete mode 100644 packages/vuetify/src/components/VData/VData.ts
 delete mode 100644 packages/vuetify/src/components/VData/__tests__/VData.spec.ts
 delete mode 100644 packages/vuetify/src/components/VData/__tests__/__snapshots__/VData.spec.ts.snap
 delete mode 100644 packages/vuetify/src/components/VData/index.ts
 delete mode 100644 packages/vuetify/src/components/VDataIterator/VDataFooter.sass
 delete mode 100644 packages/vuetify/src/components/VDataIterator/VDataFooter.ts
 delete mode 100644 packages/vuetify/src/components/VDataIterator/VDataIterator.ts
 delete mode 100644 packages/vuetify/src/components/VDataIterator/__tests__/VDataFooter.spec.ts
 delete mode 100644 packages/vuetify/src/components/VDataIterator/__tests__/VDataIterator.spec.ts
 delete mode 100644 packages/vuetify/src/components/VDataIterator/__tests__/__snapshots__/VDataFooter.spec.ts.snap
 delete mode 100644 packages/vuetify/src/components/VDataIterator/__tests__/__snapshots__/VDataIterator.spec.ts.snap
 delete mode 100644 packages/vuetify/src/components/VDataIterator/_variables.scss
 delete mode 100644 packages/vuetify/src/components/VDataIterator/index.ts
 delete mode 100644 packages/vuetify/src/components/VList/__tests__/VListItem.spec.ts
 delete mode 100644 packages/vuetify/src/components/VList/__tests__/__snapshots__/VListItem.spec.ts.snap
 rename packages/vuetify/src/composables/{items.ts => list-items.ts} (79%)
 create mode 100644 packages/vuetify/src/labs/VDataIterator/VDataIterator.tsx
 create mode 100644 packages/vuetify/src/labs/VDataIterator/__tests__/VDataIterator.spec.cy.tsx
 create mode 100644 packages/vuetify/src/labs/VDataIterator/composables/items.ts
 create mode 100644 packages/vuetify/src/labs/VDataIterator/index.ts

diff --git a/packages/api-generator/src/locale/en/item.json b/packages/api-generator/src/locale/en/list-items.json
similarity index 100%
rename from packages/api-generator/src/locale/en/item.json
rename to packages/api-generator/src/locale/en/list-items.json
diff --git a/packages/api-generator/src/types.ts b/packages/api-generator/src/types.ts
index 703f8d0b57c..efea17b04f4 100644
--- a/packages/api-generator/src/types.ts
+++ b/packages/api-generator/src/types.ts
@@ -247,12 +247,22 @@ const allowedRefs = [
   'ValidationRule',
   'FormValidationResult',
   'SortItem',
-  'InternalItem',
-  'InternalDataTableItem',
+  'ListItem',
+  'Group',
   'DataTableItem',
   'DataTableHeader',
   'InternalDataTableHeader',
   'FilterFunction',
+  'DataIteratorItem',
+]
+const plainRefs = [
+  'Component',
+  'ComponentPublicInstance',
+  'ComponentInternalInstance',
+  'FunctionalComponent',
+  'DataTableItem',
+  'Group',
+  'DataIteratorItem',
 ]
 
 function formatDefinition (definition: Definition) {
@@ -290,7 +300,7 @@ function formatDefinition (definition: Definition) {
       }, []).join('; ')} }`
       break
     case 'ref':
-      if (['Component', 'ComponentPublicInstance', 'ComponentInternalInstance', 'FunctionalComponent'].includes(definition.ref)) {
+      if (plainRefs.includes(definition.ref)) {
         formatted = definition.ref
       } else {
         formatted = definition.text
@@ -308,8 +318,8 @@ function formatDefinition (definition: Definition) {
 
   definition.formatted = formatted
 
-  if (allowedRefs.includes(definition.text)) {
-    definition.formatted = `<a href="https://github.com/vuetifyjs/vuetify/blob/master/packages/${definition.source}" target="_blank">${definition.text}</a>`
+  if (allowedRefs.includes(formatted)) {
+    definition.formatted = `<a href="https://github.com/vuetifyjs/vuetify/blob/master/packages/${definition.source}" target="_blank">${formatted}</a>`
   }
 }
 
@@ -336,7 +346,7 @@ function generateDefinition (node: Node<ts.Node>, recursed: string[], project: P
 
   if (
     count(recursed, type.getText()) > 1 ||
-    allowedRefs.includes(type.getAliasSymbol()?.getName()) ||
+    allowedRefs.includes(symbol?.getName()) ||
     isExternalDeclaration(declaration, definition.text)
   ) {
     definition = definition as RefDefinition
diff --git a/packages/docs/src/data/301.json b/packages/docs/src/data/301.json
index dd32eddae24..5d8fe0c3b88 100644
--- a/packages/docs/src/data/301.json
+++ b/packages/docs/src/data/301.json
@@ -118,7 +118,6 @@
   "components/application": "/features/application-layout",
   "components/simple-tables": "/components/tables",
   "components/data-tables": "/labs/introduction",
-  "components/data-iterators": "/introduction/roadmap",
   "components/date-pickers": "/introduction/roadmap",
   "components/date-pickers-month": "/introduction/roadmap",
   "components/time-pickers": "/introduction/roadmap",
diff --git a/packages/docs/src/data/nav.json b/packages/docs/src/data/nav.json
index 9b3505e5093..ec5445ddb85 100644
--- a/packages/docs/src/data/nav.json
+++ b/packages/docs/src/data/nav.json
@@ -191,6 +191,10 @@
         "title": "bottom-sheets",
         "subfolder": "components"
       },
+      {
+        "title": "data-iterators",
+        "subfolder": "components"
+      },
       {
         "title": "data-tables",
         "subfolder": "components",
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 94cc653f914..4387b37403c 100644
--- a/packages/docs/src/examples/v-data-iterator/misc-filter.vue
+++ b/packages/docs/src/examples/v-data-iterator/misc-filter.vue
@@ -1,177 +1,155 @@
 <template>
-  <v-container fluid>
-    <v-data-iterator
-      v-model:items-per-page="itemsPerPage"
-      v-model:page="page"
-      :items="items"
-      :search="search"
-      :sort-by="sortBy"
-      hide-default-footer
-    >
-      <template v-slot:header>
-        <v-toolbar
-          dark
-          color="blue-darken-3"
-          class="mb-1"
+  <v-data-iterator
+    v-model:items-per-page="itemsPerPage"
+    v-model:page="page"
+    :items="desserts"
+    :search="search"
+    :sort-by="sortBy"
+  >
+    <template v-slot:header>
+      <v-toolbar
+        dark
+        color="blue-darken-3"
+        class="px-2 mb-2"
+      >
+        <v-text-field
+          v-model="search"
+          clearable
+          hide-details
+          prepend-inner-icon="mdi-magnify"
+          placeholder="Search"
+          variant="solo"
+          density="comfortable"
+        ></v-text-field>
+        <v-spacer></v-spacer>
+        <v-select
+          v-model="sortKey"
+          hide-details
+          :items="keys"
+          :item-value="item => item.toLowerCase()"
+          prepend-inner-icon="mdi-sort"
+          label="Sort by"
+          density="comfortable"
+        ></v-select>
+        <v-spacer></v-spacer>
+        <v-btn-toggle
+          v-model="sortOrder"
+          mandatory
         >
-          <v-text-field
-            v-model="search"
-            clearable
-            flat
-            solo-inverted
-            hide-details
-            prepend-inner-icon="mdi-magnify"
-            label="Search"
-          ></v-text-field>
-          <template v-if="$vuetify.breakpoint.mdAndUp">
-            <v-spacer></v-spacer>
-            <v-select
-              v-model="sortBy"
-              flat
-              solo-inverted
-              hide-details
-              :items="keys"
-              prepend-inner-icon="mdi-magnify"
-              label="Sort by"
-            ></v-select>
-            <v-spacer></v-spacer>
-            <v-btn-toggle
-              v-model="sortDesc"
-              mandatory
-            >
-              <v-btn
-                size="large"
-                variant="flat"
-                color="blue"
-                :value="false"
-              >
-                <v-icon>mdi-arrow-up</v-icon>
-              </v-btn>
-              <v-btn
-                size="large"
-                variant="flat"
-                color="blue"
-                :value="true"
-              >
-                <v-icon>mdi-arrow-down</v-icon>
-              </v-btn>
-            </v-btn-toggle>
-          </template>
-        </v-toolbar>
-      </template>
-
-      <template v-slot:default="props">
-        <v-row>
-          <v-col
-            v-for="item in props.items"
-            :key="item.name"
-            cols="12"
-            sm="6"
-            md="4"
-            lg="3"
+          <v-btn
+            color="blue"
+            value="asc"
           >
-            <v-card>
-              <v-card-title class="subheading font-weight-bold">
-                {{ item.name }}
-              </v-card-title>
-
-              <v-divider></v-divider>
+            <v-icon>mdi-arrow-up</v-icon>
+          </v-btn>
+          <v-btn
+            color="blue"
+            value="desc"
+          >
+            <v-icon>mdi-arrow-down</v-icon>
+          </v-btn>
+        </v-btn-toggle>
+      </v-toolbar>
+    </template>
 
-              <v-list dense>
-                <v-list-item
-                  v-for="(key, index) in filteredKeys"
-                  :key="index"
-                >
-                  <v-list-item-content :class="{ 'blue--text': sortBy === key }">
-                    {{ key }}:
-                  </v-list-item-content>
-                  <v-list-item-content
-                    class="align-end"
-                    :class="{ 'blue--text': sortBy === key }"
-                  >
-                    {{ item[key.toLowerCase()] }}
-                  </v-list-item-content>
-                </v-list-item>
-              </v-list>
-            </v-card>
-          </v-col>
-        </v-row>
-      </template>
+    <template v-slot:no-data>
+      <v-alert class="ma-2" type="warning">No results</v-alert>
+    </template>
 
-      <template v-slot:footer>
-        <v-row
-          class="mt-2"
-          align="center"
-          justify="center"
+    <template v-slot:default="props">
+      <v-row>
+        <v-col
+          v-for="item in props.items"
+          :key="item.name"
+          cols="12"
+          sm="6"
+          md="4"
+          lg="3"
         >
-          <span class="text-grey">Items per page</span>
-          <v-menu offset-y>
-            <template v-slot:activator="{ on, attrs }">
-              <v-btn
-                dark
-                variant="text"
-                color="primary"
-                class="ms-2"
-                v-bind="attrs"
-                v-on="on"
-              >
-                {{ itemsPerPage }}
-                <v-icon>mdi-chevron-down</v-icon>
-              </v-btn>
-            </template>
-            <v-list>
+          <v-card>
+            <v-card-title class="subheading font-weight-bold">
+              {{ item.raw.name }}
+            </v-card-title>
+
+            <v-divider></v-divider>
+
+            <v-list density="compact">
               <v-list-item
-                v-for="(number, index) in itemsPerPageArray"
+                v-for="(key, index) in filteredKeys"
                 :key="index"
-                @click="updateItemsPerPage(number)"
-              >
-                <v-list-item-title>{{ number }}</v-list-item-title>
-              </v-list-item>
+                :title="key"
+                :subtitle="String(item.raw[key.toLowerCase()])"
+                :class="{ 'text-blue': sortKey === key.toLowerCase() }"
+              ></v-list-item>
             </v-list>
-          </v-menu>
+          </v-card>
+        </v-col>
+      </v-row>
+    </template>
 
-          <v-spacer></v-spacer>
+    <template v-slot:footer>
+      <div class="d-flex align-center justify-space-around pa-4">
+        <span class="grey--text">Items per page</span>
+        <v-menu>
+          <template v-slot:activator="{ props }">
+            <v-btn
+              variant="text"
+              color="primary"
+              class="ml-2"
+              append-icon="mdi-chevron-down"
+              v-bind="props"
+            >
+              {{ itemsPerPage }}
+            </v-btn>
+          </template>
+          <v-list>
+            <v-list-item
+              v-for="(number, index) in itemsPerPageArray"
+              :key="index"
+              :title="number"
+              @click="itemsPerPage = number"
+            ></v-list-item>
+          </v-list>
+        </v-menu>
 
-          <span
-            class="me-4 text-grey"
-          >
-            Page {{ page }} of {{ numberOfPages }}
-          </span>
-          <v-btn
-            fab
-            dark
-            color="blue-darken-3"
-            class="me-1"
-            @click="formerPage"
-          >
-            <v-icon>mdi-chevron-left</v-icon>
-          </v-btn>
-          <v-btn
-            fab
-            dark
-            color="blue-darken-3"
-            class="ms-1"
-            @click="nextPage"
-          >
-            <v-icon>mdi-chevron-right</v-icon>
-          </v-btn>
-        </v-row>
-      </template>
-    </v-data-iterator>
-  </v-container>
+        <v-spacer></v-spacer>
+
+        <span
+          class="mr-4
+          grey--text"
+        >
+          Page {{ page }} of {{ numberOfPages }}
+        </span>
+        <v-btn
+          icon
+          size="small"
+          @click="prevPage"
+        >
+          <v-icon>mdi-chevron-left</v-icon>
+        </v-btn>
+        <v-btn
+          icon
+          size="small"
+          class="ml-2"
+          @click="nextPage"
+        >
+          <v-icon>mdi-chevron-right</v-icon>
+        </v-btn>
+      </div>
+    </template>
+  </v-data-iterator>
 </template>
 
 <script>
   export default {
     data () {
       return {
-        itemsPerPageArray: [4, 8, 12],
-        search: '',
-        filter: {},
-        sortDesc: false,
+        itemsPerPageArray: [3, 6, 9],
+        itemsPerPage: 3,
         page: 1,
-        itemsPerPage: 4,
-        sortBy: [{ key: 'name', order: 'asc' }],
+        search: '',
+        sortKey: 'name',
+        sortOrder: 'asc',
         keys: [
           'Name',
           'Calories',
@@ -182,7 +160,7 @@
           'Calcium',
           'Iron',
         ],
-        items: [
+        desserts: [
           {
             name: 'Frozen Yogurt',
             calories: 159,
@@ -288,22 +266,25 @@
     },
     computed: {
       numberOfPages () {
-        return Math.ceil(this.items.length / this.itemsPerPage)
+        return Math.ceil(this.desserts.length / this.itemsPerPage)
       },
       filteredKeys () {
         return this.keys.filter(key => key !== 'Name')
       },
+      sortBy () {
+        return [{
+          key: this.sortKey,
+          order: this.sortOrder,
+        }]
+      },
     },
     methods: {
       nextPage () {
         if (this.page + 1 <= this.numberOfPages) this.page += 1
       },
-      formerPage () {
+      prevPage () {
         if (this.page - 1 >= 1) this.page -= 1
       },
-      updateItemsPerPage (number) {
-        this.itemsPerPage = number
-      },
     },
   }
 </script>
diff --git a/packages/docs/src/examples/v-data-iterator/slot-default.vue b/packages/docs/src/examples/v-data-iterator/slot-default.vue
index 7116d3642de..ddbdaea3ef1 100644
--- a/packages/docs/src/examples/v-data-iterator/slot-default.vue
+++ b/packages/docs/src/examples/v-data-iterator/slot-default.vue
@@ -1,96 +1,53 @@
 <template>
-  <v-container fluid>
-    <v-switch
-      v-model="singleExpand"
-      label="Expand Single Item"
-    ></v-switch>
-    <v-data-iterator
-      :items="desserts"
-      item-key="name"
-      :items-per-page="4"
-      :single-expand="singleExpand"
-      hide-default-footer
-    >
-      <template v-slot:default="{ items, isExpanded, expand }">
-        <v-row>
-          <v-col
-            v-for="item in items"
-            :key="item.name"
-            cols="12"
-            sm="6"
-            md="4"
-            lg="3"
-          >
-            <v-card>
-              <v-card-title>
-                <h4>{{ item.name }}</h4>
-              </v-card-title>
-              <v-switch
-                :model-value="isExpanded(item)"
-                :label="isExpanded(item) ? 'Expanded' : 'Closed'"
-                class="ps-4 mt-0"
-                @update:model-value="v => expand(item, v)"
-              ></v-switch>
-              <v-divider></v-divider>
-              <v-list
-                v-if="isExpanded(item)"
-                dense
-              >
-                <v-list-item>
-                  <v-list-item-content>Calories:</v-list-item-content>
-                  <v-list-item-content class="align-end">
-                    {{ item.calories }}
-                  </v-list-item-content>
-                </v-list-item>
-                <v-list-item>
-                  <v-list-item-content>Fat:</v-list-item-content>
-                  <v-list-item-content class="align-end">
-                    {{ item.fat }}
-                  </v-list-item-content>
-                </v-list-item>
-                <v-list-item>
-                  <v-list-item-content>Carbs:</v-list-item-content>
-                  <v-list-item-content class="align-end">
-                    {{ item.carbs }}
-                  </v-list-item-content>
-                </v-list-item>
-                <v-list-item>
-                  <v-list-item-content>Protein:</v-list-item-content>
-                  <v-list-item-content class="align-end">
-                    {{ item.protein }}
-                  </v-list-item-content>
-                </v-list-item>
-                <v-list-item>
-                  <v-list-item-content>Sodium:</v-list-item-content>
-                  <v-list-item-content class="align-end">
-                    {{ item.sodium }}
-                  </v-list-item-content>
-                </v-list-item>
-                <v-list-item>
-                  <v-list-item-content>Calcium:</v-list-item-content>
-                  <v-list-item-content class="align-end">
-                    {{ item.calcium }}
-                  </v-list-item-content>
-                </v-list-item>
-                <v-list-item>
-                  <v-list-item-content>Iron:</v-list-item-content>
-                  <v-list-item-content class="align-end">
-                    {{ item.iron }}
-                  </v-list-item-content>
-                </v-list-item>
-              </v-list>
-            </v-card>
-          </v-col>
-        </v-row>
-      </template>
-    </v-data-iterator>
-  </v-container>
+  <v-data-iterator
+    :items="desserts"
+    item-value="name"
+    :items-per-page="3"
+  >
+    <template v-slot:default="{ items, isExpanded, toggleExpand }">
+      <v-row>
+        <v-col
+          v-for="item in items"
+          :key="item.raw.name"
+          cols="12"
+          sm="6"
+          md="4"
+          lg="3"
+        >
+          <v-card>
+            <v-card-title>
+              <h4>{{ item.raw.name }}</h4>
+            </v-card-title>
+            <v-switch
+              color="primary"
+              :model-value="isExpanded(item)"
+              :label="isExpanded(item) ? 'Expanded' : 'Closed'"
+              class="pl-4 mt-0"
+              @click="() => toggleExpand(item)"
+            ></v-switch>
+            <v-divider></v-divider>
+            <v-list
+              v-if="isExpanded(item)"
+              dense
+            >
+              <v-list-item title="Calories:" :subtitle="item.raw.calories"></v-list-item>
+              <v-list-item title="Fat:" :subtitle="item.raw.fat"></v-list-item>
+              <v-list-item title="Carbs:" :subtitle="item.raw.carbs"></v-list-item>
+              <v-list-item title="Protein:" :subtitle="item.raw.protein"></v-list-item>
+              <v-list-item title="Sodium:" :subtitle="item.raw.sodium"></v-list-item>
+              <v-list-item title="Calcium:" :subtitle="item.raw.calcium"></v-list-item>
+              <v-list-item title="Iron:" :subtitle="item.raw.iron"></v-list-item>
+            </v-list>
+          </v-card>
+        </v-col>
+      </v-row>
+    </template>
+  </v-data-iterator>
 </template>
 
 <script>
   export default {
     data: () => ({
-      singleExpand: false,
       desserts: [
         {
           name: 'Frozen Yogurt',
diff --git a/packages/docs/src/examples/v-data-iterator/slot-header-and-footer.vue b/packages/docs/src/examples/v-data-iterator/slot-header-and-footer.vue
index 0c9c6f60515..4d616ae9bd8 100644
--- a/packages/docs/src/examples/v-data-iterator/slot-header-and-footer.vue
+++ b/packages/docs/src/examples/v-data-iterator/slot-header-and-footer.vue
@@ -1,114 +1,58 @@
 <template>
-  <v-container fluid>
-    <v-data-iterator
-      v-model:items-per-page="itemsPerPage"
-      :items="items"
-      hide-default-footer
-    >
-      <template v-slot:header>
-        <v-toolbar
-          class="mb-2"
-          color="indigo darken-5"
-          dark
-          flat
-        >
-          <v-toolbar-title>This is a header</v-toolbar-title>
-        </v-toolbar>
-      </template>
-
-      <template v-slot:default="props">
-        <v-row>
-          <v-col
-            v-for="item in props.items"
-            :key="item.name"
-            cols="12"
-            sm="6"
-            md="4"
-            lg="3"
-          >
-            <v-card>
-              <v-card-title class="subheading font-weight-bold">
-                {{ item.name }}
-              </v-card-title>
-
-              <v-divider></v-divider>
-
-              <v-list dense>
-                <v-list-item>
-                  <v-list-item-content>Calories:</v-list-item-content>
-                  <v-list-item-content class="align-end">
-                    {{ item.calories }}
-                  </v-list-item-content>
-                </v-list-item>
-
-                <v-list-item>
-                  <v-list-item-content>Fat:</v-list-item-content>
-                  <v-list-item-content class="align-end">
-                    {{ item.fat }}
-                  </v-list-item-content>
-                </v-list-item>
-
-                <v-list-item>
-                  <v-list-item-content>Carbs:</v-list-item-content>
-                  <v-list-item-content class="align-end">
-                    {{ item.carbs }}
-                  </v-list-item-content>
-                </v-list-item>
+  <v-data-iterator
+    :items="desserts"
+    :items-per-page="3"
+  >
+    <template v-slot:header>
+      <div class="bg-primary pa-2 mb-2">
+        Header
+      </div>
+    </template>
 
-                <v-list-item>
-                  <v-list-item-content>Protein:</v-list-item-content>
-                  <v-list-item-content class="align-end">
-                    {{ item.protein }}
-                  </v-list-item-content>
-                </v-list-item>
-
-                <v-list-item>
-                  <v-list-item-content>Sodium:</v-list-item-content>
-                  <v-list-item-content class="align-end">
-                    {{ item.sodium }}
-                  </v-list-item-content>
-                </v-list-item>
+    <template v-slot:default="{ items }">
+      <v-row>
+        <v-col
+          v-for="item in items"
+          :key="item.raw.name"
+          cols="12"
+          sm="6"
+          md="4"
+          lg="3"
+        >
+          <v-card class="fill-height">
+            <v-card-title class="subheading font-weight-bold d-flex align-center justify-space-between">
+              {{ item.raw.name }}
+            </v-card-title>
 
-                <v-list-item>
-                  <v-list-item-content>Calcium:</v-list-item-content>
-                  <v-list-item-content class="align-end">
-                    {{ item.calcium }}
-                  </v-list-item-content>
-                </v-list-item>
+            <v-divider></v-divider>
 
-                <v-list-item>
-                  <v-list-item-content>Iron:</v-list-item-content>
-                  <v-list-item-content class="align-end">
-                    {{ item.iron }}
-                  </v-list-item-content>
-                </v-list-item>
-              </v-list>
-            </v-card>
-          </v-col>
-        </v-row>
-      </template>
+            <v-list density="compact">
+              <v-list-item title="Calories" :subtitle="String(item.raw.calories)"></v-list-item>
+              <v-list-item title="Fat" :subtitle="String(item.raw.fat)"></v-list-item>
+              <v-list-item title="Carbs" :subtitle="String(item.raw.carbs)"></v-list-item>
+              <v-list-item title="Protein" :subtitle="String(item.raw.protein)"></v-list-item>
+              <v-list-item title="Sodium" :subtitle="String(item.raw.sodium)"></v-list-item>
+              <v-list-item title="Calcium" :subtitle="String(item.raw.calcium)"></v-list-item>
+              <v-list-item title="Iron" :subtitle="String(item.raw.iron)"></v-list-item>
+            </v-list>
+          </v-card>
+        </v-col>
+      </v-row>
+    </template>
 
-      <template v-slot:footer>
-        <v-toolbar
-          class="mt-2"
-          color="indigo"
-          dark
-          flat
-        >
-          <v-toolbar-title class="subheading">
-            This is a footer
-          </v-toolbar-title>
-        </v-toolbar>
-      </template>
-    </v-data-iterator>
-  </v-container>
+    <template v-slot:footer>
+      <div class="bg-primary pa-2 mt-2">
+        Footer
+      </div>
+    </template>
+  </v-data-iterator>
 </template>
 
 <script>
   export default {
     data: () => ({
-      itemsPerPage: 4,
-      items: [
+      itemsPerPageArray: [3, 6, 9],
+      desserts: [
         {
           name: 'Frozen Yogurt',
           calories: 159,
@@ -149,7 +93,78 @@
           calcium: '3%',
           iron: '8%',
         },
+        {
+          name: 'Gingerbread',
+          calories: 356,
+          fat: 16.0,
+          carbs: 49,
+          protein: 3.9,
+          sodium: 327,
+          calcium: '7%',
+          iron: '16%',
+        },
+        {
+          name: 'Jelly bean',
+          calories: 375,
+          fat: 0.0,
+          carbs: 94,
+          protein: 0.0,
+          sodium: 50,
+          calcium: '0%',
+          iron: '0%',
+        },
+        {
+          name: 'Lollipop',
+          calories: 392,
+          fat: 0.2,
+          carbs: 98,
+          protein: 0,
+          sodium: 38,
+          calcium: '0%',
+          iron: '2%',
+        },
+        {
+          name: 'Honeycomb',
+          calories: 408,
+          fat: 3.2,
+          carbs: 87,
+          protein: 6.5,
+          sodium: 562,
+          calcium: '0%',
+          iron: '45%',
+        },
+        {
+          name: 'Donut',
+          calories: 452,
+          fat: 25.0,
+          carbs: 51,
+          protein: 4.9,
+          sodium: 326,
+          calcium: '2%',
+          iron: '22%',
+        },
+        {
+          name: 'KitKat',
+          calories: 518,
+          fat: 26.0,
+          carbs: 65,
+          protein: 7,
+          sodium: 54,
+          calcium: '12%',
+          iron: '6%',
+        },
       ],
     }),
+    computed: {
+      filteredKeys () {
+        return this.keys.filter(key => key !== 'Name')
+      },
+      sortBy () {
+        return [{
+          key: this.sortKey,
+          order: this.sortOrder,
+        }]
+      },
+    },
   }
 </script>
diff --git a/packages/docs/src/examples/v-data-iterator/usage.vue b/packages/docs/src/examples/v-data-iterator/usage.vue
index 15b57e93542..f8b4d657a7f 100644
--- a/packages/docs/src/examples/v-data-iterator/usage.vue
+++ b/packages/docs/src/examples/v-data-iterator/usage.vue
@@ -1,305 +1,88 @@
 <template>
-  <v-container class="fill-height">
-    <v-data-iterator
-      v-model:items-per-page="itemsPerPage"
-      :footer-props="{ itemsPerPageOptions }"
-      :items="items"
-      :page="page"
-      :search="search"
-      :sort-by="sortBy"
-      v-bind="$attrs"
-    >
-      <template v-slot:header>
-        <v-toolbar
-          dark
-          color="blue-darken-3"
-          class="mb-1"
-        >
-          <v-text-field
-            v-model="search"
-            clearable
-            flat
-            solo-inverted
-            hide-details
-            prepend-inner-icon="mdi-magnify"
-            label="Search"
-          ></v-text-field>
-          <template v-if="$vuetify.breakpoint.mdAndUp">
-            <v-spacer></v-spacer>
-            <v-select
-              v-model="sortKey"
-              class="mx-2"
-              flat
-              solo-inverted
-              hide-details
-              :items="keys"
-              prepend-inner-icon="mdi-magnify"
-              label="Sort by"
-            ></v-select>
-            <v-spacer></v-spacer>
-            <v-btn-toggle
-              v-model="sortDesc"
-              mandatory
-            >
-              <v-btn
-                size="large"
-                variant="flat"
-                color="blue"
-                :value="false"
-              >
-                <v-icon>mdi-arrow-up</v-icon>
-              </v-btn>
-              <v-btn
-                size="large"
-                variant="flat"
-                color="blue"
-                :value="true"
-              >
-                <v-icon>mdi-arrow-down</v-icon>
-              </v-btn>
-            </v-btn-toggle>
-          </template>
-        </v-toolbar>
-      </template>
-      <template v-slot:default="props">
-        <v-row>
-          <v-col
-            v-for="item in props.items"
-            :key="item.name"
-            cols="12"
-            sm="6"
+  <usage-example
+    v-model="model"
+    :code="code"
+    :script="script"
+    :name="name"
+    :options="options"
+  >
+    <div>
+      <v-data-iterator
+        v-bind="props"
+        :items="cards"
+        :page="page"
+        items-per-page="3"
+      >
+        <template v-slot:default="{ items }">
+          <template
+            v-for="(item, i) in items"
+            :key="i"
           >
-            <v-card>
-              <v-card-title>
-                <h5>{{ item.name }}</h5>
-              </v-card-title>
-              <v-divider></v-divider>
-              <v-list dense>
-                <v-list-item>
-                  <v-row justify="space-between">
-                    <v-col cols="auto">
-                      <v-list-item-content>Calories:</v-list-item-content>
-                    </v-col>
-                    <v-col cols="auto">
-                      <v-list-item-content>{{ item.calories }}</v-list-item-content>
-                    </v-col>
-                  </v-row>
-                </v-list-item>
-                <v-list-item>
-                  <v-row justify="space-between">
-                    <v-col cols="auto">
-                      <v-list-item-content>Fat:</v-list-item-content>
-                    </v-col>
-                    <v-col cols="auto">
-                      <v-list-item-content>{{ item.fat }}</v-list-item-content>
-                    </v-col>
-                  </v-row>
-                </v-list-item>
-                <v-list-item>
-                  <v-row justify="space-between">
-                    <v-col cols="auto">
-                      <v-list-item-content>Carbs:</v-list-item-content>
-                    </v-col>
-                    <v-col cols="auto">
-                      <v-list-item-content>{{ item.carbs }}</v-list-item-content>
-                    </v-col>
-                  </v-row>
-                </v-list-item>
-                <v-list-item>
-                  <v-row justify="space-between">
-                    <v-col cols="auto">
-                      <v-list-item-content>Protein:</v-list-item-content>
-                    </v-col>
-                    <v-col cols="auto">
-                      <v-list-item-content>{{ item.protein }}</v-list-item-content>
-                    </v-col>
-                  </v-row>
-                </v-list-item>
-                <v-list-item>
-                  <v-row justify="space-between">
-                    <v-col cols="auto">
-                      <v-list-item-content>Sodium:</v-list-item-content>
-                    </v-col>
-                    <v-col cols="auto">
-                      <v-list-item-content>{{ item.sodium }}</v-list-item-content>
-                    </v-col>
-                  </v-row>
-                </v-list-item>
-                <v-list-item>
-                  <v-row justify="space-between">
-                    <v-col cols="auto">
-                      <v-list-item-content>Calcium:</v-list-item-content>
-                    </v-col>
-                    <v-col cols="auto">
-                      <v-list-item-content>{{ item.calcium }}</v-list-item-content>
-                    </v-col>
-                  </v-row>
-                </v-list-item>
-                <v-list-item>
-                  <v-row justify="space-between">
-                    <v-col cols="auto">
-                      <v-list-item-content>Iron:</v-list-item-content>
-                    </v-col>
-                    <v-col cols="auto">
-                      <v-list-item-content>{{ item.iron }}</v-list-item-content>
-                    </v-col>
-                  </v-row>
-                </v-list-item>
-              </v-list>
-            </v-card>
-          </v-col>
-        </v-row>
-      </template>
-    </v-data-iterator>
-  </v-container>
+            <v-card v-bind="item.raw"></v-card>
+
+            <br>
+          </template>
+        </template>
+
+        <template v-slot:footer="{ pageCount }">
+          <v-pagination v-model="page" :length="pageCount"></v-pagination>
+        </template>
+      </v-data-iterator>
+    </div>
+  </usage-example>
 </template>
 
-<script>
-  export default {
-    name: 'Usage',
+<script setup>
+  // Utilities
+  import { computed, ref } from 'vue'
+  import { propsToString } from '@/util/helpers'
+
+  const name = 'v-data-iterator'
+  const model = ref('default')
+  const options = []
+
+  const page = ref(1)
+
+  const cards = Array.from({ length: 15 }, (k, v) => ({
+    title: `Item ${v + 1}`,
+    text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!',
+  }))
+
+  const props = computed(() => {
+    return {
+      ':items': 'items',
+      ':page': 'page',
+    }
+  })
+
+  const slots = computed(() => {
+    return `
+  <template v-slot:default="{ items }">
+    <template
+      v-for="(item, i) in items"
+      :key="i"
+    >
+      <v-card v-bind="item.raw"></v-card>
 
-    inheritAttrs: false,
+      <br>
+    </template>
+  </template>
+`
+  })
 
-    data: () => ({
-      itemsPerPageOptions: [4, 8, 12],
-      search: '',
-      sortKey: 'name',
-      sortDesc: false,
-      page: 1,
-      itemsPerPage: 4,
-      keys: [
-        'Name',
-        'Calories',
-        'Fat',
-        'Carbs',
-        'Protein',
-        'Sodium',
-        'Calcium',
-        'Iron',
-      ],
-      items: [
-        {
-          name: 'Frozen Yogurt',
-          calories: 159,
-          fat: 6.0,
-          carbs: 24,
-          protein: 4.0,
-          sodium: 87,
-          calcium: '14%',
-          iron: '1%',
-        },
-        {
-          name: 'Ice cream sandwich',
-          calories: 237,
-          fat: 9.0,
-          carbs: 37,
-          protein: 4.3,
-          sodium: 129,
-          calcium: '8%',
-          iron: '1%',
-        },
-        {
-          name: 'Eclair',
-          calories: 262,
-          fat: 16.0,
-          carbs: 23,
-          protein: 6.0,
-          sodium: 337,
-          calcium: '6%',
-          iron: '7%',
-        },
-        {
-          name: 'Cupcake',
-          calories: 305,
-          fat: 3.7,
-          carbs: 67,
-          protein: 4.3,
-          sodium: 413,
-          calcium: '3%',
-          iron: '8%',
-        },
-        {
-          name: 'Gingerbread',
-          calories: 356,
-          fat: 16.0,
-          carbs: 49,
-          protein: 3.9,
-          sodium: 327,
-          calcium: '7%',
-          iron: '16%',
-        },
-        {
-          name: 'Jelly bean',
-          calories: 375,
-          fat: 0.0,
-          carbs: 94,
-          protein: 0.0,
-          sodium: 50,
-          calcium: '0%',
-          iron: '0%',
-        },
-        {
-          name: 'Lollipop',
-          calories: 392,
-          fat: 0.2,
-          carbs: 98,
-          protein: 0,
-          sodium: 38,
-          calcium: '0%',
-          iron: '2%',
-        },
-        {
-          name: 'Honeycomb',
-          calories: 408,
-          fat: 3.2,
-          carbs: 87,
-          protein: 6.5,
-          sodium: 562,
-          calcium: '0%',
-          iron: '45%',
-        },
-        {
-          name: 'Donut',
-          calories: 452,
-          fat: 25.0,
-          carbs: 51,
-          protein: 4.9,
-          sodium: 326,
-          calcium: '2%',
-          iron: '22%',
-        },
-        {
-          name: 'KitKat',
-          calories: 518,
-          fat: 26.0,
-          carbs: 65,
-          protein: 7,
-          sodium: 54,
-          calcium: '12%',
-          iron: '6%',
-        },
-      ],
-      defaults: {
-        'disable-filtering': false,
-        'disable-pagination': false,
-        'disable-sort': false,
-        'hide-default-footer': false,
-      },
-      options: {
-        booleans: [
-          'disable-filtering',
-          'disable-pagination',
-          'disable-sort',
-          'hide-default-footer',
-        ],
-      },
-      tabs: [],
-    }),
+  const code = computed(() => {
+    return `<v-data-iterator${propsToString(props.value)}>${slots.value}</v-data-iterator>`
+  })
 
-    computed: {
-      sortBy () {
-        return [{ key: this.sortKey, order: this.sortDesc ? 'desc' : 'asc' }]
-      },
-    },
-  }
+  const script = computed(() => {
+    return `export default {
+  data: () => ({
+    page: 1,
+    items: Array.from({ length: 15 }, (k, v) => ({
+      title: 'Item ' + v + 1,
+      text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!',
+    })),
+  }),
+}`
+  })
 </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 a95fac27d50..671ede6e723 100644
--- a/packages/docs/src/examples/v-data-table/prop-grouping.vue
+++ b/packages/docs/src/examples/v-data-table/prop-grouping.vue
@@ -11,8 +11,8 @@
 <script>
   export default {
     data: () => ({
-      sortBy: [{ key: 'name' }],
-      groupBy: [{ key: 'dairy' }],
+      sortBy: [{ key: 'name', order: 'asc' }],
+      groupBy: [{ key: 'dairy', order: 'asc' }],
       headers: [
         {
           title: 'Dessert (100g serving)',
diff --git a/packages/docs/src/pages/en/components/all.md b/packages/docs/src/pages/en/components/all.md
index e43ca3949e6..595b0128d64 100644
--- a/packages/docs/src/pages/en/components/all.md
+++ b/packages/docs/src/pages/en/components/all.md
@@ -306,6 +306,12 @@ These components are used to display data and information in a variety of ways.
 
 <v-row>
 
+<components-list-item name="Data iterator component" src="data-iterators" placeholder>
+
+  The data iterator component provides an easy interface for paginating and sorting data
+
+</components-list-item>
+
 <components-list-item name="Data table component"  src="data-tables/basics" placeholder>
 
   Data tables are used to display large amounts of data in a small amount of space
diff --git a/packages/docs/src/pages/en/components/data-iterators.md b/packages/docs/src/pages/en/components/data-iterators.md
index b6bdb60f668..b14832dc8cb 100644
--- a/packages/docs/src/pages/en/components/data-iterators.md
+++ b/packages/docs/src/pages/en/components/data-iterators.md
@@ -1,5 +1,6 @@
 ---
-disabled: true
+emphasized: true
+nav: Data iterators
 meta:
   title: Data iterator component
   description: The data iterator component is used for filter and displaying data including sorting, searching, pagination, and selection.
@@ -12,9 +13,11 @@ related:
 
 # Data iterators
 
-The `v-data-iterator` component is used for displaying data, and shares a majority of its functionality with the `v-data-table` component. Features include sorting, searching, pagination, and selection.
+The `v-data-iterator` component is used for displaying arbitrary data, and shares a majority of its functionality with the `v-data-table` component. Features include sorting, searching, pagination, and selection.
 
-<entry />
+![Data iterator Entry](https://cdn.vuetifyjs.com/docs/images/components/v-data-iterator/v-data-iterator-entry.png){ placeholder=true }
+
+----
 
 ## Usage
 
@@ -22,9 +25,49 @@ The `v-data-iterator` allows you to customize exactly how to display your data.
 
 <usage name="v-data-iterator" />
 
+<entry />
+
 ## API
 
-<api-inline />
+| Component                                | Description       |
+|------------------------------------------|-------------------|
+| [v-data-iterator](/api/v-data-iterator/) | Primary Component |
+
+<api-inline hide-links />
+
+## Anatomy
+
+The recommended placement of elements inside of a `v-data-iterator` are:
+
+* Place a [v-toolbar](/components/toolbars/) or similar component above the main content
+* Place content after the header
+* Place a [v-pagination](/components/paginations/) below the main content
+
+![Data iterator Anatomy](https://cdn.vuetifyjs.com/docs/images/components/v-data-iterator/v-data-iterator-entry.png){ placeholder=true }
+
+| Element / Area | Description |
+| - | - |
+| 1. Container | The container is the root element of the component |
+| 2. Header (optional) | The header is used to display a title and actions |
+| 3. Footer (optional) | The footer is used to display pagination |
+
+## Guide
+
+The `v-data-iterator` component is used for displaying data, and shares a majority of its functionality with the `v-data-table` component. Features include sorting, searching, pagination, and selection.
+
+The following code snippet is an example of a basic `v-data-iterator` component:
+
+```html
+<v-data-iterator :items="[1, 2, 3, 4, 5]">
+  <template v-slot:default="{ items }">
+    <v-list-item
+      v-for="(item, i) in items"
+      :key="i"
+      :title="`Item ${i}`"
+    ></v-list-item>
+  </template>
+</v-data-iterator>
+```
 
 ## Examples
 
@@ -32,20 +75,20 @@ The `v-data-iterator` allows you to customize exactly how to display your data.
 
 #### Default
 
-The `v-data-iterator` has internal state for both selection and expansion, just like `v-data-table`. In this example we use the methods `isExpanded` and `expand` available on the default slot.
+The `v-data-iterator` has internal state for both selection and expansion, just like `v-data-table`. In this example we use the methods `isExpanded` and `toggleExpand` available on the default slot.
 
 <example file="v-data-iterator/slot-default" />
 
 #### Header and footer
 
-The `v-data-iterator` has both a header and footer slot for adding extra content.
+The `v-data-iterator` has both a **header** and **footer** slot for adding extra content.
 
 <example file="v-data-iterator/slot-header-and-footer" />
 
 ### Misc
 
-#### Filter
+#### Controllable props
 
-Order, filters and pagination can be controlled externally by using the individual props
+Sorting, filters and pagination can be controlled externally by using the individual props
 
 <example file="v-data-iterator/misc-filter" />
diff --git a/packages/docs/src/pages/en/getting-started/upgrade-guide.md b/packages/docs/src/pages/en/getting-started/upgrade-guide.md
index 6091fa90571..bc1a7e9fe8c 100644
--- a/packages/docs/src/pages/en/getting-started/upgrade-guide.md
+++ b/packages/docs/src/pages/en/getting-started/upgrade-guide.md
@@ -177,7 +177,7 @@ app.use(vuetify)
 - `item-text` has been renamed to `item-title`, and now looks up the `title` property on item objects by default. `value` is unchanged.
 - `item-disabled` has been removed, and `disabled`, `header`, `divider`, and `avatar` properties are ignored on item objects.
   - Additional props to pass to `v-list-item` can be specified with the `item-props` prop. `item-props` can be a function that takes the item object and returns an object of props, or set to boolean `true` to spread item objects directly as props.
-- The `item` object in slots is now an `InternalItem` object, the original item object is available as `item.raw`.
+- The `item` object in slots is now an `ListItem` object, the original item object is available as `item.raw`.
 - The `item` slot will no longer generate a `v-list-item` component automatically, instead a `props` object is supplied with the required event listeners and props:
 
 ```html
diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
index 8f3f49d6207..822d56c860f 100644
--- a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
+++ b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -16,7 +16,7 @@ import { forwardRefs } from '@/composables/forwardRefs'
 import { makeFilterProps, useFilter } from '@/composables/filter'
 import { makeTransitionProps } from '@/composables/transition'
 import { useForm } from '@/composables/form'
-import { useItems } from '@/composables/items'
+import { useItems } from '@/composables/list-items'
 import { useLocale } from '@/composables/locale'
 import { useProxiedModel } from '@/composables/proxiedModel'
 import { useTextColor } from '@/composables/color'
@@ -30,7 +30,7 @@ import { makeVTextFieldProps } from '@/components/VTextField/VTextField'
 import type { PropType } from 'vue'
 import type { GenericProps } from '@/util'
 import type { FilterMatch } from '@/composables/filter'
-import type { InternalItem } from '@/composables/items'
+import type { ListItem } from '@/composables/list-items'
 import type { VFieldSlots } from '@/components/VField/VField'
 import type { VInputSlots } from '@/components/VInput/VInput'
 
@@ -90,9 +90,9 @@ export const VAutocomplete = genericComponent<new <
     'onUpdate:modelValue'?: (val: V) => void
   },
   slots: Omit<VInputSlots & VFieldSlots, 'default'> & {
-    item: [{ item: InternalItem<Item>, index: number, props: Record<string, unknown> }]
-    chip: [{ item: InternalItem<Item>, index: number, props: Record<string, unknown> }]
-    selection: [{ item: InternalItem<Item>, index: number }]
+    item: [{ item: ListItem<Item>, index: number, props: Record<string, unknown> }]
+    chip: [{ item: ListItem<Item>, index: number, props: Record<string, unknown> }]
+    selection: [{ item: ListItem<Item>, index: number }]
     'prepend-item': []
     'append-item': []
     'no-data': []
@@ -296,7 +296,7 @@ export const VAutocomplete = genericComponent<new <
 
     const isSelecting = shallowRef(false)
 
-    function select (item: InternalItem) {
+    function select (item: ListItem) {
       if (props.multiple) {
         const index = selected.value.findIndex(selection => props.valueComparator(selection, item.value))
 
diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.tsx b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
index 55cc3dcd6b7..9c18fd38dbe 100644
--- a/packages/vuetify/src/components/VCombobox/VCombobox.tsx
+++ b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
@@ -15,7 +15,7 @@ import { VTextField } from '@/components/VTextField'
 import { forwardRefs } from '@/composables/forwardRefs'
 import { makeFilterProps, useFilter } from '@/composables/filter'
 import { makeTransitionProps } from '@/composables/transition'
-import { transformItem, useItems } from '@/composables/items'
+import { transformItem, useItems } from '@/composables/list-items'
 import { useForm } from '@/composables/form'
 import { useLocale } from '@/composables/locale'
 import { useProxiedModel } from '@/composables/proxiedModel'
@@ -30,7 +30,7 @@ import { makeVTextFieldProps } from '@/components/VTextField/VTextField'
 import type { PropType } from 'vue'
 import type { GenericProps } from '@/util'
 import type { FilterMatch } from '@/composables/filter'
-import type { InternalItem } from '@/composables/items'
+import type { ListItem } from '@/composables/list-items'
 import type { VFieldSlots } from '@/components/VField/VField'
 import type { VInputSlots } from '@/components/VInput/VInput'
 
@@ -90,9 +90,9 @@ export const VCombobox = genericComponent<new <
     'onUpdate:modelValue'?: (val: V) => void
   },
   slots: Omit<VInputSlots & VFieldSlots, 'default'> & {
-    item: [{ item: InternalItem<Item>, index: number, props: Record<string, unknown> }]
-    chip: [{ item: InternalItem<Item>, index: number, props: Record<string, unknown> }]
-    selection: [{ item: InternalItem<Item>, index: number }]
+    item: [{ item: ListItem<Item>, index: number, props: Record<string, unknown> }]
+    chip: [{ item: ListItem<Item>, index: number, props: Record<string, unknown> }]
+    selection: [{ item: ListItem<Item>, index: number }]
     'prepend-item': []
     'append-item': []
     'no-data': []
@@ -325,7 +325,7 @@ export const VCombobox = genericComponent<new <
         vTextFieldRef.value?.focus()
       }
     }
-    function select (item: InternalItem) {
+    function select (item: ListItem) {
       if (props.multiple) {
         const index = selected.value.findIndex(selection => props.valueComparator(selection, item.value))
 
diff --git a/packages/vuetify/src/components/VData/VData.ts b/packages/vuetify/src/components/VData/VData.ts
deleted file mode 100644
index 8363947481a..00000000000
--- a/packages/vuetify/src/components/VData/VData.ts
+++ /dev/null
@@ -1,384 +0,0 @@
-// @ts-nocheck
-/* eslint-disable */
-
-// Helpers
-import { wrapInArray, sortItems, deepEqual, groupItems, searchItems, fillArray } from '../../util/helpers'
-import Vue, { VNode } from 'vue'
-
-// Types
-import {
-  DataOptions,
-  DataPagination,
-  DataScopeProps,
-  DataSortFunction,
-  DataGroupFunction,
-  DataSearchFunction,
-  ItemGroup,
-} from 'vuetify/types'
-import { PropValidator } from 'vue/types/options'
-
-export default Vue.extend({
-  name: 'v-data',
-
-  inheritAttrs: false,
-
-  props: {
-    items: {
-      type: Array,
-      default: () => [],
-    } as PropValidator<any[]>,
-    options: {
-      type: Object,
-      default: () => ({}),
-    } as PropValidator<Partial<DataOptions>>,
-    sortBy: {
-      type: [String, Array],
-    } as PropValidator<string | string[] | undefined>,
-    sortDesc: {
-      type: [Boolean, Array],
-    } as PropValidator<boolean | boolean[] | undefined>,
-    customSort: {
-      type: Function,
-      default: sortItems,
-    } as PropValidator<DataSortFunction>,
-    mustSort: Boolean,
-    multiSort: Boolean,
-    page: {
-      type: Number,
-      default: 1,
-    },
-    itemsPerPage: {
-      type: Number,
-      default: 10,
-    },
-    groupBy: {
-      type: [String, Array],
-      default: () => [],
-    } as PropValidator<string | string[]>,
-    groupDesc: {
-      type: [Boolean, Array],
-      default: () => [],
-    } as PropValidator<boolean | boolean[]>,
-    customGroup: {
-      type: Function,
-      default: groupItems,
-    } as PropValidator<DataGroupFunction>,
-    locale: {
-      type: String,
-      default: 'en-US',
-    },
-    disableSort: Boolean,
-    disablePagination: Boolean,
-    disableFiltering: Boolean,
-    search: String,
-    customFilter: {
-      type: Function,
-      default: searchItems,
-    } as PropValidator<DataSearchFunction>,
-    serverItemsLength: {
-      type: Number,
-      default: -1,
-    },
-  },
-
-  data () {
-    let internalOptions: DataOptions = {
-      page: this.page,
-      itemsPerPage: this.itemsPerPage,
-      sortBy: wrapInArray(this.sortBy),
-      sortDesc: wrapInArray(this.sortDesc),
-      groupBy: wrapInArray(this.groupBy),
-      groupDesc: wrapInArray(this.groupDesc),
-      mustSort: this.mustSort,
-      multiSort: this.multiSort,
-    }
-
-    if (this.options) {
-      internalOptions = Object.assign(internalOptions, this.options)
-    }
-
-    const { sortBy, sortDesc, groupBy, groupDesc } = internalOptions
-    const sortDiff = sortBy.length - sortDesc.length
-    const groupDiff = groupBy.length - groupDesc.length
-
-    if (sortDiff > 0) {
-      internalOptions.sortDesc.push(...fillArray(sortDiff, false))
-    }
-
-    if (groupDiff > 0) {
-      internalOptions.groupDesc.push(...fillArray(groupDiff, false))
-    }
-
-    return {
-      internalOptions,
-    }
-  },
-
-  computed: {
-    itemsLength (): number {
-      return this.serverItemsLength >= 0 ? this.serverItemsLength : this.filteredItems.length
-    },
-    pageCount (): number {
-      return this.internalOptions.itemsPerPage <= 0
-        ? 1
-        : Math.ceil(this.itemsLength / this.internalOptions.itemsPerPage)
-    },
-    pageStart (): number {
-      if (this.internalOptions.itemsPerPage === -1 || !this.items.length) return 0
-
-      return (this.internalOptions.page - 1) * this.internalOptions.itemsPerPage
-    },
-    pageStop (): number {
-      if (this.internalOptions.itemsPerPage === -1) return this.itemsLength
-      if (!this.items.length) return 0
-
-      return Math.min(this.itemsLength, this.internalOptions.page * this.internalOptions.itemsPerPage)
-    },
-    isGrouped (): boolean {
-      return !!this.internalOptions.groupBy.length
-    },
-    pagination (): DataPagination {
-      return {
-        page: this.internalOptions.page,
-        itemsPerPage: this.internalOptions.itemsPerPage,
-        pageStart: this.pageStart,
-        pageStop: this.pageStop,
-        pageCount: this.pageCount,
-        itemsLength: this.itemsLength,
-      }
-    },
-    filteredItems (): any[] {
-      let items = this.items.slice()
-
-      if (!this.disableFiltering && this.serverItemsLength <= 0) {
-        items = this.customFilter(items, this.search)
-      }
-
-      return items
-    },
-    computedItems (): any[] {
-      let items = this.filteredItems.slice()
-
-      if ((!this.disableSort || this.internalOptions.groupBy.length) && this.serverItemsLength <= 0) {
-        items = this.sortItems(items)
-      }
-
-      if (!this.disablePagination && this.serverItemsLength <= 0) {
-        items = this.paginateItems(items)
-      }
-
-      return items
-    },
-    groupedItems (): ItemGroup<any>[] | null {
-      return this.isGrouped ? this.groupItems(this.computedItems) : null
-    },
-    scopedProps (): DataScopeProps {
-      return {
-        sort: this.sort,
-        sortArray: this.sortArray,
-        group: this.group,
-        items: this.computedItems,
-        options: this.internalOptions,
-        updateOptions: this.updateOptions,
-        pagination: this.pagination,
-        groupedItems: this.groupedItems,
-        originalItemsLength: this.items.length,
-      }
-    },
-    computedOptions (): DataOptions {
-      return { ...this.options } as DataOptions
-    },
-  },
-
-  watch: {
-    computedOptions: {
-      handler (options: DataOptions, old: DataOptions) {
-        if (deepEqual(options, old)) return
-
-        this.updateOptions(options)
-      },
-      deep: true,
-      immediate: true,
-    },
-    internalOptions: {
-      handler (options: DataOptions, old: DataOptions) {
-        if (deepEqual(options, old)) return
-        this.$emit('update:options', options)
-      },
-      deep: true,
-      immediate: true,
-    },
-    page (page: number) {
-      this.updateOptions({ page })
-    },
-    'internalOptions.page' (page: number) {
-      this.$emit('update:page', page)
-    },
-    itemsPerPage (itemsPerPage: number) {
-      this.updateOptions({ itemsPerPage })
-    },
-    'internalOptions.itemsPerPage' (itemsPerPage: number) {
-      this.$emit('update:items-per-page', itemsPerPage)
-    },
-    sortBy (sortBy: string | string[]) {
-      this.updateOptions({ sortBy: wrapInArray(sortBy) })
-    },
-    'internalOptions.sortBy' (sortBy: string[], old: string[]) {
-      !deepEqual(sortBy, old) && this.$emit('update:sort-by', Array.isArray(this.sortBy) ? sortBy : sortBy[0])
-    },
-    sortDesc (sortDesc: boolean | boolean[]) {
-      this.updateOptions({ sortDesc: wrapInArray(sortDesc) })
-    },
-    'internalOptions.sortDesc' (sortDesc: boolean[], old: boolean[]) {
-      !deepEqual(sortDesc, old) && this.$emit('update:sort-desc', Array.isArray(this.sortDesc) ? sortDesc : sortDesc[0])
-    },
-    groupBy (groupBy: string | string[]) {
-      this.updateOptions({ groupBy: wrapInArray(groupBy) })
-    },
-    'internalOptions.groupBy' (groupBy: string[], old: string[]) {
-      !deepEqual(groupBy, old) && this.$emit('update:group-by', Array.isArray(this.groupBy) ? groupBy : groupBy[0])
-    },
-    groupDesc (groupDesc: boolean | boolean[]) {
-      this.updateOptions({ groupDesc: wrapInArray(groupDesc) })
-    },
-    'internalOptions.groupDesc' (groupDesc: boolean[], old: boolean[]) {
-      !deepEqual(groupDesc, old) && this.$emit('update:group-desc', Array.isArray(this.groupDesc) ? groupDesc : groupDesc[0])
-    },
-    multiSort (multiSort: boolean) {
-      this.updateOptions({ multiSort })
-    },
-    'internalOptions.multiSort' (multiSort: boolean) {
-      this.$emit('update:multi-sort', multiSort)
-    },
-    mustSort (mustSort: boolean) {
-      this.updateOptions({ mustSort })
-    },
-    'internalOptions.mustSort' (mustSort: boolean) {
-      this.$emit('update:must-sort', mustSort)
-    },
-    pageCount: {
-      handler (pageCount: number) {
-        this.$emit('page-count', pageCount)
-      },
-      immediate: true,
-    },
-    computedItems: {
-      handler (computedItems: any[]) {
-        this.$emit('current-items', computedItems)
-      },
-      immediate: true,
-    },
-    pagination: {
-      handler (pagination: DataPagination, old: DataPagination) {
-        if (deepEqual(pagination, old)) return
-        this.$emit('pagination', this.pagination)
-      },
-      immediate: true,
-    },
-  },
-
-  methods: {
-    toggle (key: string, oldBy: string[], oldDesc: boolean[], page: number, mustSort: boolean, multiSort: boolean) {
-      let by = oldBy.slice()
-      let desc = oldDesc.slice()
-      const byIndex = by.findIndex((k: string) => k === key)
-
-      if (byIndex < 0) {
-        if (!multiSort) {
-          by = []
-          desc = []
-        }
-
-        by.push(key)
-        desc.push(false)
-      } else if (byIndex >= 0 && !desc[byIndex]) {
-        desc[byIndex] = true
-      } else if (!mustSort) {
-        by.splice(byIndex, 1)
-        desc.splice(byIndex, 1)
-      } else {
-        desc[byIndex] = false
-      }
-
-      // Reset page to 1 if sortBy or sortDesc have changed
-      if (!deepEqual(by, oldBy) || !deepEqual(desc, oldDesc)) {
-        page = 1
-      }
-
-      return { by, desc, page }
-    },
-    group (key: string): void {
-      const { by: groupBy, desc: groupDesc, page } = this.toggle(
-        key,
-        this.internalOptions.groupBy,
-        this.internalOptions.groupDesc,
-        this.internalOptions.page,
-        true,
-        false
-      )
-      this.updateOptions({ groupBy, groupDesc, page })
-    },
-    sort (key: string | string[]): void {
-      if (Array.isArray(key)) return this.sortArray(key)
-
-      const { by: sortBy, desc: sortDesc, page } = this.toggle(
-        key,
-        this.internalOptions.sortBy,
-        this.internalOptions.sortDesc,
-        this.internalOptions.page,
-        this.internalOptions.mustSort,
-        this.internalOptions.multiSort
-      )
-      this.updateOptions({ sortBy, sortDesc, page })
-    },
-    sortArray (sortBy: string[]) {
-      const sortDesc = sortBy.map(s => {
-        const i = this.internalOptions.sortBy.findIndex((k: string) => k === s)
-        return i > -1 ? this.internalOptions.sortDesc[i] : false
-      })
-
-      this.updateOptions({ sortBy, sortDesc })
-    },
-    updateOptions (options: any) {
-      this.internalOptions = {
-        ...this.internalOptions,
-        ...options,
-        page: this.serverItemsLength < 0
-          ? Math.max(1, Math.min(options.page || this.internalOptions.page, this.pageCount))
-          : options.page || this.internalOptions.page,
-      }
-    },
-    sortItems (items: any[]): any[] {
-      let sortBy: string[] = []
-      let sortDesc: boolean[] = []
-
-      if (!this.disableSort) {
-        sortBy = this.internalOptions.sortBy
-        sortDesc = this.internalOptions.sortDesc
-      }
-
-      if (this.internalOptions.groupBy.length) {
-        sortBy = [...this.internalOptions.groupBy, ...sortBy]
-        sortDesc = [...this.internalOptions.groupDesc, ...sortDesc]
-      }
-
-      return this.customSort(items, sortBy, sortDesc, this.locale)
-    },
-    groupItems (items: any[]): ItemGroup<any>[] {
-      return this.customGroup(items, this.internalOptions.groupBy, this.internalOptions.groupDesc)
-    },
-    paginateItems (items: any[]): any[] {
-      // Make sure we don't try to display non-existant page if items suddenly change
-      // TODO: Could possibly move this to pageStart/pageStop?
-      if (this.serverItemsLength === -1 && items.length <= this.pageStart) {
-        this.internalOptions.page = Math.max(1, Math.ceil(items.length / this.internalOptions.itemsPerPage)) || 1 // Prevent NaN
-      }
-
-      return items.slice(this.pageStart, this.pageStop)
-    },
-  },
-
-  render (): VNode {
-    return this.$scopedSlots.default && this.$scopedSlots.default(this.scopedProps) as any
-  },
-})
diff --git a/packages/vuetify/src/components/VData/__tests__/VData.spec.ts b/packages/vuetify/src/components/VData/__tests__/VData.spec.ts
deleted file mode 100644
index 07bcdfe1e50..00000000000
--- a/packages/vuetify/src/components/VData/__tests__/VData.spec.ts
+++ /dev/null
@@ -1,602 +0,0 @@
-// @ts-nocheck
-/* eslint-disable */
-
-// import VData from '../VData'
-import {
-  mount,
-  MountOptions,
-  Wrapper,
-} from '@vue/test-utils'
-
-describe.skip('VData.ts', () => {
-  type Instance = InstanceType<typeof VData>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
-  beforeEach(() => {
-    mountFunction = (options?: MountOptions<Instance>) => {
-      return mount(VData, {
-        ...options,
-        sync: false,
-      })
-    }
-  })
-
-  it('should render data through default scoped slot', async () => {
-    const wrapper = mountFunction({
-      propsData: {
-        items: [
-          { id: 1, text: 'foo' },
-          { id: 2, text: 'bar' },
-        ],
-      },
-      scopedSlots: {
-        default (data) {
-          return this.$createElement('div', data.items.map(item => this.$createElement('div', [item.text])))
-        },
-      },
-    })
-
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-
-  it('should ignore items length if using server-items-length', async () => {
-    const render = jest.fn()
-    const wrapper = mountFunction({
-      propsData: {
-        items: [
-          { id: 1, text: 'foo' },
-          { id: 2, text: 'bar' },
-        ],
-      },
-      scopedSlots: {
-        default: render,
-      },
-    })
-
-    await wrapper.vm.$nextTick()
-    expect(render).toHaveBeenCalledWith(expect.objectContaining({
-      pagination: expect.objectContaining({
-        itemsLength: 2,
-      }),
-    }))
-
-    wrapper.setProps({
-      serverItemsLength: 10,
-    })
-
-    await wrapper.vm.$nextTick()
-    expect(render).toHaveBeenCalledWith(expect.objectContaining({
-      pagination: expect.objectContaining({
-        itemsLength: 10,
-      }),
-    }))
-  })
-
-  it('should group items', async () => {
-    const render = jest.fn()
-    const items = [
-      { id: 1, text: 'foo', baz: 'one' },
-      { id: 2, text: 'bar', baz: 'two' },
-      { id: 3, text: 'baz', baz: 'one' },
-    ]
-
-    const wrapper = mountFunction({
-      propsData: {
-        items,
-        groupBy: ['baz'],
-      },
-      scopedSlots: {
-        default: render,
-      },
-    })
-
-    expect(render).toHaveBeenCalledWith(expect.objectContaining({
-      groupedItems: [
-        {
-          name: 'one',
-          items: [items[0], items[2]],
-        },
-        {
-          name: 'two',
-          items: [items[1]],
-        },
-      ],
-    }))
-  })
-
-  it('should group items with null key and missing key as a null group', async () => {
-    const render = jest.fn()
-    const items = [
-      { id: 1, text: 'foo', baz: null },
-      { id: 2, text: 'bar', baz: 'one' },
-      { id: 3, text: 'baz' },
-    ]
-
-    const wrapper = mountFunction({
-      propsData: {
-        items,
-        groupBy: ['baz'],
-      },
-      scopedSlots: {
-        default: render,
-      },
-    })
-
-    expect(render).toHaveBeenCalledWith(expect.objectContaining({
-      groupedItems: [
-        {
-          name: '',
-          items: [items[0], items[2]],
-        },
-        {
-          name: 'one',
-          items: [items[1]],
-        },
-      ],
-    }))
-  })
-
-  it('should group items by deep keys', async () => {
-    const render = jest.fn()
-    const items = [
-      { id: 1, text: 'foo', foo: { bar: 'one' } },
-      { id: 2, text: 'bar', foo: { bar: 'two' } },
-      { id: 3, text: 'baz', foo: { bar: 'one' } },
-    ]
-
-    const wrapper = mountFunction({
-      propsData: {
-        items,
-        groupBy: ['foo.bar'],
-      },
-      scopedSlots: {
-        default: render,
-      },
-    })
-
-    expect(render).toHaveBeenCalledWith(expect.objectContaining({
-      groupedItems: [
-        {
-          name: 'one',
-          items: [items[0], items[2]],
-        },
-        {
-          name: 'two',
-          items: [items[1]],
-        },
-      ],
-    }))
-  })
-
-  it('should group items with a custom group function', async () => {
-    const render = jest.fn()
-    const items = [
-      { id: 1, text: 'foo', value: 1 },
-      { id: 2, text: 'bar', value: 4 },
-      { id: 3, text: 'baz', value: 3 },
-    ]
-
-    const wrapper = mountFunction({
-      propsData: {
-        items,
-        groupBy: ['value'],
-        customGroup: function evenOddGrouper (items: any[], groupBy: string[]) {
-          const key = groupBy[0]
-          return items.reduce((rv, x) => {
-            const group = x[key] % 2 ? 'odd' : 'even';
-            (rv[group] = rv[group] || []).push(x)
-            return rv
-          }, {})
-        },
-      },
-      scopedSlots: {
-        default: render,
-      },
-    })
-
-    expect(render).toHaveBeenCalledWith(expect.objectContaining({
-      groupedItems: {
-        even: [items[1]],
-        odd: [items[0], items[2]],
-      },
-    }))
-  })
-
-  it('should sort items', () => {
-    const render = jest.fn()
-
-    const unsorted = [
-      { id: 1, text: 'c' },
-      { id: 2, text: 'a' },
-      { id: 3, text: 'd' },
-      { id: 4, text: 'b' },
-    ]
-
-    const sorted = [
-      { id: 2, text: 'a' },
-      { id: 4, text: 'b' },
-      { id: 1, text: 'c' },
-      { id: 3, text: 'd' },
-    ]
-
-    const wrapper = mountFunction({
-      propsData: {
-        items: unsorted,
-        sortBy: ['text'],
-      },
-      scopedSlots: {
-        default: render,
-      },
-    })
-
-    expect(render).toHaveBeenCalledWith(expect.objectContaining({
-      items: sorted,
-    }))
-  })
-
-  it('should sort items by multiple properties', async () => {
-    const render = jest.fn()
-
-    const unsorted = [
-      { id: 1, foo: 'a', bar: 'b' },
-      { id: 2, foo: 'b', bar: 'b' },
-      { id: 3, foo: 'b', bar: 'a' },
-      { id: 4, foo: 'a', bar: 'a' },
-    ]
-
-    const sorted = [
-      { id: 4, foo: 'a', bar: 'a' },
-      { id: 1, foo: 'a', bar: 'b' },
-      { id: 3, foo: 'b', bar: 'a' },
-      { id: 2, foo: 'b', bar: 'b' },
-    ]
-
-    const wrapper = mountFunction({
-      propsData: {
-        items: unsorted,
-        sortBy: ['foo'],
-      },
-      scopedSlots: {
-        default: render,
-      },
-    })
-
-    await wrapper.vm.$nextTick()
-
-    wrapper.setProps({
-      sortBy: ['foo', 'bar'],
-    })
-    await wrapper.vm.$nextTick()
-
-    expect(render).toHaveBeenCalledWith(expect.objectContaining({
-      items: sorted,
-    }))
-  })
-
-  it('should paginate items', () => {
-    const render = jest.fn()
-
-    const items = [
-      { id: 1, foo: 'a' },
-      { id: 2, foo: 'b' },
-      { id: 3, foo: 'c' },
-      { id: 4, foo: 'd' },
-      { id: 5, foo: 'e' },
-      { id: 6, foo: 'f' },
-      { id: 7, foo: 'g' },
-      { id: 8, foo: 'h' },
-      { id: 9, foo: 'i' },
-      { id: 10, foo: 'j' },
-    ]
-
-    const wrapper = mountFunction({
-      propsData: {
-        items,
-        itemsPerPage: 5,
-        page: 2,
-      },
-      scopedSlots: {
-        default: render,
-      },
-    })
-
-    expect(render).toHaveBeenCalledWith(expect.objectContaining({
-      items: items.slice(5),
-    }))
-  })
-
-  it('should not sort items if disableSort is active', () => {
-    const render = jest.fn()
-
-    const items = [
-      { text: 'Foo', id: 1 },
-      { text: 'Bar', id: 2 },
-      { text: 'Fizz', id: 3 },
-      { text: 'Buzz', id: 4 },
-      { text: 'Fizzbuzz', id: 5 },
-    ]
-
-    const wrapper = mountFunction({
-      propsData: {
-        items,
-        sortBy: ['text'],
-        disableSort: true,
-      },
-      scopedSlots: {
-        default: render,
-      },
-    })
-
-    expect(render).toHaveBeenCalledWith(expect.objectContaining({
-      items,
-    }))
-  })
-
-  it('should conditionally paginate items', async () => {
-    const render = jest.fn()
-    const items = [
-      { text: 'Foo', id: 1 },
-      { text: 'Bar', id: 2 },
-      { text: 'Fizz', id: 3 },
-      { text: 'Buzz', id: 4 },
-      { text: 'Fizzbuzz', id: 5 },
-    ]
-
-    const wrapper = mountFunction({
-      propsData: { items },
-      scopedSlots: {
-        default: render,
-      },
-    })
-
-    expect(render).toHaveBeenCalledWith(expect.objectContaining({
-      items,
-    }))
-
-    wrapper.setProps({ itemsPerPage: 2 })
-    await wrapper.vm.$nextTick()
-
-    expect(render).toHaveBeenCalledWith(expect.objectContaining({
-      items: items.slice(0, 2),
-    }))
-
-    wrapper.setProps({ disablePagination: true })
-    await wrapper.vm.$nextTick()
-
-    expect(render).toHaveBeenCalledWith(expect.objectContaining({
-      items,
-    }))
-  })
-
-  it('should toggle sorting', async () => {
-    const unsorted = [
-      { id: 1, text: 'c' },
-      { id: 2, text: 'a' },
-      { id: 3, text: 'd' },
-      { id: 4, text: 'b' },
-    ]
-
-    const wrapper = mountFunction({
-      propsData: {
-        items: unsorted,
-      },
-      scopedSlots: {
-        default (props) {
-          const items = props.items.map(item => this.$createElement('div', [item.text]))
-          return this.$createElement('div', {
-            attrs: {
-              id: 'wrapper',
-            },
-            on: {
-              click: () => props.sort('text'),
-            },
-          }, items)
-        },
-      },
-    })
-
-    expect(wrapper.html()).toMatchSnapshot()
-
-    const el = wrapper.find('#wrapper').element
-    el.click()
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.html()).toMatchSnapshot()
-
-    el.click()
-    await wrapper.vm.$nextTick()
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-
-  it('should toggle sorting on multiple properties', async () => {
-    const unsorted = [
-      { id: 1, text: 'c', group: 'foo' },
-      { id: 2, text: 'a', group: 'bar' },
-      { id: 3, text: 'd', group: 'foo' },
-      { id: 4, text: 'b', group: 'bar' },
-    ]
-
-    const wrapper = mountFunction({
-      propsData: {
-        items: unsorted,
-      },
-      scopedSlots: {
-        default (props) {
-          const items = props.items.map(item => this.$createElement('div', [`${item.group}-${item.text}`]))
-          return this.$createElement('div', {
-            attrs: {
-              id: 'wrapper',
-            },
-            on: {
-              click: () => props.sort(['group', 'text']),
-            },
-          }, items)
-        },
-      },
-    })
-
-    expect(wrapper.html()).toMatchSnapshot()
-
-    const el = wrapper.find('#wrapper').element
-    el.click()
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-
-  it('should toggle grouping', async () => {
-    const unsorted = [
-      { id: 1, text: 'c', group: 'foo' },
-      { id: 4, text: 'a', group: 'bar' },
-      { id: 3, text: 'd', group: 'foo' },
-      { id: 2, text: 'b', group: 'bar' },
-    ]
-
-    const wrapper = mountFunction({
-      propsData: {
-        items: unsorted,
-      },
-      scopedSlots: {
-        default (props) {
-          const items = props.groupedItems
-            ? props.groupedItems.map(group => group.name)
-            : props.items.map(item => item.text)
-
-          return this.$createElement('div', {
-            attrs: {
-              id: 'wrapper',
-            },
-            on: {
-              click: () => props.group('group'),
-            },
-          }, items.map(item => this.$createElement('div', [item])))
-        },
-      },
-    })
-
-    expect(wrapper.html()).toMatchSnapshot()
-
-    const el = wrapper.find('#wrapper').element
-    el.click()
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-
-  // https://github.com/vuetifyjs/vuetify/issues/10372
-  it('should handle setting itemsPerPage to zero', async () => {
-    const render = jest.fn()
-    const wrapper = mountFunction({
-      propsData: {
-        items: [
-          { id: 1, text: 'foo' },
-          { id: 2, text: 'bar' },
-        ],
-        itemsPerPage: 0,
-      },
-      scopedSlots: {
-        default: render,
-      },
-    })
-
-    await wrapper.vm.$nextTick()
-    expect(render).toHaveBeenCalledWith(expect.objectContaining({
-      pagination: expect.objectContaining({
-        itemsPerPage: 0,
-        page: 1,
-        pageCount: 1,
-        pageStart: 0,
-        pageStop: 0,
-      }),
-    }))
-
-    wrapper.setProps({
-      itemsPerPage: 1,
-    })
-
-    await wrapper.vm.$nextTick()
-    expect(render).toHaveBeenCalledWith(expect.objectContaining({
-      pagination: expect.objectContaining({
-        itemsPerPage: 1,
-        page: 1,
-        pageCount: 2,
-        pageStart: 0,
-        pageStop: 1,
-      }),
-    }))
-  })
-
-  // https://github.com/vuetifyjs/vuetify/issues/10627
-  it('should sort grouped column', async () => {
-    const unsorted = [
-      { id: 1, text: 'c', group: 'foo' },
-      { id: 4, text: 'a', group: 'bar' },
-      { id: 3, text: 'd', group: 'foo' },
-      { id: 2, text: 'b', group: 'bar' },
-    ]
-
-    const wrapper = mountFunction({
-      propsData: {
-        items: unsorted,
-        groupBy: ['text'],
-      },
-      scopedSlots: {
-        default (props) {
-          return this.$createElement('div', {
-            attrs: {
-              id: 'wrapper',
-            },
-            on: {
-              click: () => props.group('group'),
-            },
-          }, props.groupedItems.map(group => this.$createElement('div', [group.name])))
-        },
-      },
-    })
-
-    wrapper.setProps({ groupDesc: [false] })
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.html()).toMatchSnapshot()
-
-    wrapper.setProps({ groupDesc: [true] })
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-
-  // https://github.com/vuetifyjs/vuetify/issues/11905
-  it('should group items when sort is disabled', async () => {
-    const render = jest.fn()
-    const items = [
-      { id: 1, text: 'foo', baz: 'one' },
-      { id: 2, text: 'bar', baz: 'two' },
-      { id: 3, text: 'baz', baz: 'one' },
-    ]
-
-    const wrapper = mountFunction({
-      propsData: {
-        items,
-        groupBy: ['baz'],
-        disableSort: true,
-      },
-      scopedSlots: {
-        default: render,
-      },
-    })
-
-    expect(render).toHaveBeenCalledWith(expect.objectContaining({
-      groupedItems: [
-        {
-          name: 'one',
-          items: [items[0], items[2]],
-        },
-        {
-          name: 'two',
-          items: [items[1]],
-        },
-      ],
-    }))
-  })
-})
diff --git a/packages/vuetify/src/components/VData/__tests__/__snapshots__/VData.spec.ts.snap b/packages/vuetify/src/components/VData/__tests__/__snapshots__/VData.spec.ts.snap
deleted file mode 100644
index c009d7116de..00000000000
--- a/packages/vuetify/src/components/VData/__tests__/__snapshots__/VData.spec.ts.snap
+++ /dev/null
@@ -1,159 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`VData.ts should render data through default scoped slot 1`] = `
-<div>
-  <div>
-    foo
-  </div>
-  <div>
-    bar
-  </div>
-</div>
-`;
-
-exports[`VData.ts should sort grouped column 1`] = `
-<div id="wrapper">
-  <div>
-    a
-  </div>
-  <div>
-    b
-  </div>
-  <div>
-    c
-  </div>
-  <div>
-    d
-  </div>
-</div>
-`;
-
-exports[`VData.ts should sort grouped column 2`] = `
-<div id="wrapper">
-  <div>
-    d
-  </div>
-  <div>
-    c
-  </div>
-  <div>
-    b
-  </div>
-  <div>
-    a
-  </div>
-</div>
-`;
-
-exports[`VData.ts should toggle grouping 1`] = `
-<div id="wrapper">
-  <div>
-    c
-  </div>
-  <div>
-    a
-  </div>
-  <div>
-    d
-  </div>
-  <div>
-    b
-  </div>
-</div>
-`;
-
-exports[`VData.ts should toggle grouping 2`] = `
-<div id="wrapper">
-  <div>
-    bar
-  </div>
-  <div>
-    foo
-  </div>
-</div>
-`;
-
-exports[`VData.ts should toggle sorting 1`] = `
-<div id="wrapper">
-  <div>
-    c
-  </div>
-  <div>
-    a
-  </div>
-  <div>
-    d
-  </div>
-  <div>
-    b
-  </div>
-</div>
-`;
-
-exports[`VData.ts should toggle sorting 2`] = `
-<div id="wrapper">
-  <div>
-    a
-  </div>
-  <div>
-    b
-  </div>
-  <div>
-    c
-  </div>
-  <div>
-    d
-  </div>
-</div>
-`;
-
-exports[`VData.ts should toggle sorting 3`] = `
-<div id="wrapper">
-  <div>
-    d
-  </div>
-  <div>
-    c
-  </div>
-  <div>
-    b
-  </div>
-  <div>
-    a
-  </div>
-</div>
-`;
-
-exports[`VData.ts should toggle sorting on multiple properties 1`] = `
-<div id="wrapper">
-  <div>
-    foo-c
-  </div>
-  <div>
-    bar-a
-  </div>
-  <div>
-    foo-d
-  </div>
-  <div>
-    bar-b
-  </div>
-</div>
-`;
-
-exports[`VData.ts should toggle sorting on multiple properties 2`] = `
-<div id="wrapper">
-  <div>
-    bar-a
-  </div>
-  <div>
-    bar-b
-  </div>
-  <div>
-    foo-c
-  </div>
-  <div>
-    foo-d
-  </div>
-</div>
-`;
diff --git a/packages/vuetify/src/components/VData/index.ts b/packages/vuetify/src/components/VData/index.ts
deleted file mode 100644
index 0a70ffc4c66..00000000000
--- a/packages/vuetify/src/components/VData/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import VData from './VData'
-
-export { VData }
-
-export default VData
diff --git a/packages/vuetify/src/components/VDataIterator/VDataFooter.sass b/packages/vuetify/src/components/VDataIterator/VDataFooter.sass
deleted file mode 100644
index a643c605a37..00000000000
--- a/packages/vuetify/src/components/VDataIterator/VDataFooter.sass
+++ /dev/null
@@ -1,71 +0,0 @@
-@import './_variables.scss'
-
-// Block
-.v-data-footer
-  display: flex
-  flex-wrap: wrap
-  align-items: center
-  font-size: $data-footer-font-size
-  padding: $data-footer-padding
-
-  .v-btn
-    color: inherit
-
-// Elements
-.v-data-footer__icons-before
-  .v-btn:last-child
-    +ltr()
-      margin-right: $data-footer-icons-before-btn-margin-end
-
-    +rtl()
-      margin-left: $data-footer-icons-before-btn-margin-end
-
-.v-data-footer__icons-after
-  .v-btn:first-child
-    +ltr()
-      margin-left: $data-footer-icons-after-btn-margin-start
-
-    +rtl()
-      margin-right: $data-footer-icons-after-btn-margin-start
-
-.v-data-footer__pagination
-  display: block
-  text-align: center
-
-  +ltr()
-    margin: 0 $data-footer-pagination-margin-end 0 $data-footer-pagination-margin-start
-
-  +rtl()
-    margin: 0 $data-footer-pagination-margin-start 0 $data-footer-pagination-margin-end
-
-.v-data-footer__select
-  display: flex
-  align-items: center
-  flex: 0 0 0
-  justify-content: flex-end
-  white-space: nowrap
-
-  +ltr()
-    margin-left: auto
-    margin-right: $data-footer-select-margin-end
-
-  +rtl()
-    margin-left: $data-footer-select-margin-end
-    margin-right: auto
-
-  .v-select
-    flex: 0 1 0
-    padding: 0
-    position: initial
-
-    +ltr()
-      margin: $data-footer-select-select-margin-y 0 $data-footer-select-select-margin-y $data-footer-select-select-margin-start
-
-    +rtl()
-      margin: $data-footer-select-select-margin-y $data-footer-select-select-margin-start $data-footer-select-select-margin-y 0
-
-  .v-select__selections
-    flex-wrap: nowrap
-
-    .v-select__selection--comma
-      font-size: $data-footer-select-selections-comma-font-size
diff --git a/packages/vuetify/src/components/VDataIterator/VDataFooter.ts b/packages/vuetify/src/components/VDataIterator/VDataFooter.ts
deleted file mode 100644
index d7f3e6ad205..00000000000
--- a/packages/vuetify/src/components/VDataIterator/VDataFooter.ts
+++ /dev/null
@@ -1,232 +0,0 @@
-// @ts-nocheck
-/* eslint-disable */
-
-import './VDataFooter.sass'
-
-// Components
-import VSelect from '../VSelect/VSelect'
-import VIcon from '../VIcon'
-import VBtn from '../VBtn'
-
-// Types
-import Vue, { VNode, VNodeChildrenArrayContents, PropType } from 'vue'
-import { DataPagination, DataOptions, DataItemsPerPageOption } from 'vuetify/types'
-import { PropValidator } from 'vue/types/options'
-import { getSlot } from '../../util/helpers'
-
-export default Vue.extend({
-  name: 'v-data-footer',
-
-  props: {
-    options: {
-      type: Object as PropType<DataOptions>,
-      required: true,
-    },
-    pagination: {
-      type: Object as PropType<DataPagination>,
-      required: true,
-    },
-    itemsPerPageOptions: {
-      type: Array,
-      default: () => ([5, 10, 15, -1]),
-    } as PropValidator<DataItemsPerPageOption[]>,
-    prevIcon: {
-      type: String,
-      default: '$prev',
-    },
-    nextIcon: {
-      type: String,
-      default: '$next',
-    },
-    firstIcon: {
-      type: String,
-      default: '$first',
-    },
-    lastIcon: {
-      type: String,
-      default: '$last',
-    },
-    itemsPerPageText: {
-      type: String,
-      default: '$vuetify.dataFooter.itemsPerPageText',
-    },
-    itemsPerPageAllText: {
-      type: String,
-      default: '$vuetify.dataFooter.itemsPerPageAll',
-    },
-    showFirstLastPage: Boolean,
-    showCurrentPage: Boolean,
-    disablePagination: Boolean,
-    disableItemsPerPage: Boolean,
-    pageText: {
-      type: String,
-      default: '$vuetify.dataFooter.pageText',
-    },
-  },
-
-  computed: {
-    disableNextPageIcon (): boolean {
-      return this.options.itemsPerPage <= 0 ||
-        this.options.page * this.options.itemsPerPage >= this.pagination.itemsLength ||
-        this.pagination.pageStop < 0
-    },
-    computedDataItemsPerPageOptions (): any[] {
-      return this.itemsPerPageOptions.map(option => {
-        if (typeof option === 'object') return option
-        else return this.genDataItemsPerPageOption(option)
-      })
-    },
-  },
-
-  methods: {
-    updateOptions (obj: object) {
-      this.$emit('update:options', Object.assign({}, this.options, obj))
-    },
-    onFirstPage () {
-      this.updateOptions({ page: 1 })
-    },
-    onPreviousPage () {
-      this.updateOptions({ page: this.options.page - 1 })
-    },
-    onNextPage () {
-      this.updateOptions({ page: this.options.page + 1 })
-    },
-    onLastPage () {
-      this.updateOptions({ page: this.pagination.pageCount })
-    },
-    onChangeItemsPerPage (itemsPerPage: number) {
-      this.updateOptions({ itemsPerPage, page: 1 })
-    },
-    genDataItemsPerPageOption (option: number) {
-      return {
-        text: option === -1 ? this.$vuetify.lang.t(this.itemsPerPageAllText) : String(option),
-        value: option,
-      }
-    },
-    genItemsPerPageSelect () {
-      let value = this.options.itemsPerPage
-      const computedIPPO = this.computedDataItemsPerPageOptions
-
-      if (computedIPPO.length <= 1) return null
-
-      if (!computedIPPO.find(ippo => ippo.value === value)) value = computedIPPO[0]
-
-      return this.$createElement('div', {
-        staticClass: 'v-data-footer__select',
-      }, [
-        this.$vuetify.lang.t(this.itemsPerPageText),
-        this.$createElement(VSelect, {
-          attrs: {
-            'aria-label': this.$vuetify.lang.t(this.itemsPerPageText),
-          },
-          props: {
-            disabled: this.disableItemsPerPage,
-            items: computedIPPO,
-            value,
-            hideDetails: true,
-            auto: true,
-            minWidth: '75px',
-          },
-          on: {
-            input: this.onChangeItemsPerPage,
-          },
-        }),
-      ])
-    },
-    genPaginationInfo () {
-      let children: VNodeChildrenArrayContents = ['–']
-      const itemsLength: number = this.pagination.itemsLength
-      let pageStart: number = this.pagination.pageStart
-      let pageStop: number = this.pagination.pageStop
-
-      if (this.pagination.itemsLength && this.pagination.itemsPerPage) {
-        pageStart = this.pagination.pageStart + 1
-        pageStop = itemsLength < this.pagination.pageStop || this.pagination.pageStop < 0
-          ? itemsLength
-          : this.pagination.pageStop
-
-        children = this.$scopedSlots['page-text']
-          ? [this.$scopedSlots['page-text']!({ pageStart, pageStop, itemsLength })]
-          : [this.$vuetify.lang.t(this.pageText, pageStart, pageStop, itemsLength)]
-      } else if (this.$scopedSlots['page-text']) {
-        children = [this.$scopedSlots['page-text']!({ pageStart, pageStop, itemsLength })]
-      }
-
-      return this.$createElement('div', {
-        class: 'v-data-footer__pagination',
-      }, children)
-    },
-    genIcon (click: Function, disabled: boolean, label: string, icon: string): VNode {
-      return this.$createElement(VBtn, {
-        props: {
-          disabled: disabled || this.disablePagination,
-          icon: true,
-          text: true,
-          // dark: this.dark, // TODO: add mixin
-          // light: this.light // TODO: add mixin
-        },
-        on: {
-          click,
-        },
-        attrs: {
-          'aria-label': label, // TODO: Localization
-        },
-      }, [this.$createElement(VIcon, icon)])
-    },
-    genIcons () {
-      const before: VNodeChildrenArrayContents = []
-      const after: VNodeChildrenArrayContents = []
-
-      before.push(this.genIcon(
-        this.onPreviousPage,
-        this.options.page === 1,
-        this.$vuetify.lang.t('$vuetify.dataFooter.prevPage'),
-        this.$vuetify.rtl ? this.nextIcon : this.prevIcon
-      ))
-
-      after.push(this.genIcon(
-        this.onNextPage,
-        this.disableNextPageIcon,
-        this.$vuetify.lang.t('$vuetify.dataFooter.nextPage'),
-        this.$vuetify.rtl ? this.prevIcon : this.nextIcon
-      ))
-
-      if (this.showFirstLastPage) {
-        before.unshift(this.genIcon(
-          this.onFirstPage,
-          this.options.page === 1,
-          this.$vuetify.lang.t('$vuetify.dataFooter.firstPage'),
-          this.$vuetify.rtl ? this.lastIcon : this.firstIcon
-        ))
-
-        after.push(this.genIcon(
-          this.onLastPage,
-          this.options.page >= this.pagination.pageCount || this.options.itemsPerPage === -1,
-          this.$vuetify.lang.t('$vuetify.dataFooter.lastPage'),
-          this.$vuetify.rtl ? this.firstIcon : this.lastIcon
-        ))
-      }
-
-      return [
-        this.$createElement('div', {
-          staticClass: 'v-data-footer__icons-before',
-        }, before),
-        this.showCurrentPage && this.$createElement('span', [this.options.page.toString()]),
-        this.$createElement('div', {
-          staticClass: 'v-data-footer__icons-after',
-        }, after),
-      ]
-    },
-  },
-
-  render (): VNode {
-    return this.$createElement('div', {
-      staticClass: 'v-data-footer',
-    }, [
-      getSlot(this, 'prepend'),
-      this.genItemsPerPageSelect(),
-      this.genPaginationInfo(),
-      this.genIcons(),
-    ])
-  },
-})
diff --git a/packages/vuetify/src/components/VDataIterator/VDataIterator.ts b/packages/vuetify/src/components/VDataIterator/VDataIterator.ts
deleted file mode 100644
index b0dfdfe64ca..00000000000
--- a/packages/vuetify/src/components/VDataIterator/VDataIterator.ts
+++ /dev/null
@@ -1,361 +0,0 @@
-// @ts-nocheck
-/* eslint-disable */
-
-// Components
-import { VData } from '../VData'
-import VDataFooter from './VDataFooter'
-
-// Mixins
-import Mobile from '../../mixins/mobile'
-import Themeable from '../../mixins/themeable'
-
-// Helpers
-import mixins from '../../util/mixins'
-import { deepEqual, getObjectValueByPath, getPrefixedScopedSlots, getSlot, camelizeObjectKeys, keyCodes } from '../../util/helpers'
-import { breaking, removed } from '../../util/console'
-
-// Types
-import { VNode, VNodeChildren } from 'vue'
-import { PropValidator } from 'vue/types/options'
-import { DataItemProps, DataScopeProps } from 'vuetify/types'
-
-/* @vue/component */
-export default mixins(
-  Mobile,
-  Themeable
-).extend({
-  name: 'v-data-iterator',
-
-  props: {
-    ...VData.options.props, // TODO: filter out props not used
-    itemKey: {
-      type: String,
-      default: 'id',
-    },
-    value: {
-      type: Array,
-      default: () => [],
-    } as PropValidator<any[]>,
-    singleSelect: Boolean,
-    expanded: {
-      type: Array,
-      default: () => [],
-    } as PropValidator<any[]>,
-    mobileBreakpoint: {
-      ...Mobile.options.props.mobileBreakpoint,
-      default: 600,
-    },
-    singleExpand: Boolean,
-    loading: [Boolean, String],
-    noResultsText: {
-      type: String,
-      default: '$vuetify.dataIterator.noResultsText',
-    },
-    noDataText: {
-      type: String,
-      default: '$vuetify.noDataText',
-    },
-    loadingText: {
-      type: String,
-      default: '$vuetify.dataIterator.loadingText',
-    },
-    hideDefaultFooter: Boolean,
-    footerProps: Object,
-    selectableKey: {
-      type: String,
-      default: 'isSelectable',
-    },
-  },
-
-  data: () => ({
-    selection: {} as Record<string, any>,
-    expansion: {} as Record<string, boolean>,
-    internalCurrentItems: [] as any[],
-    shiftKeyDown: false,
-    lastEntry: -1,
-  }),
-
-  computed: {
-    everyItem (): boolean {
-      return !!this.selectableItems.length && this.selectableItems.every((i: any) => this.isSelected(i))
-    },
-    someItems (): boolean {
-      return this.selectableItems.some((i: any) => this.isSelected(i))
-    },
-    sanitizedFooterProps (): Record<string, any> {
-      return camelizeObjectKeys(this.footerProps)
-    },
-    selectableItems (): any[] {
-      return this.internalCurrentItems.filter(item => this.isSelectable(item))
-    },
-  },
-
-  watch: {
-    value: {
-      handler (value: any[]) {
-        this.selection = value.reduce((selection, item) => {
-          selection[getObjectValueByPath(item, this.itemKey)] = item
-          return selection
-        }, {})
-      },
-      immediate: true,
-    },
-    selection (value: Record<string, boolean>, old: Record<string, boolean>) {
-      if (deepEqual(Object.keys(value), Object.keys(old))) return
-
-      this.$emit('input', Object.values(value))
-    },
-    expanded: {
-      handler (value: any[]) {
-        this.expansion = value.reduce((expansion, item) => {
-          expansion[getObjectValueByPath(item, this.itemKey)] = true
-          return expansion
-        }, {})
-      },
-      immediate: true,
-    },
-    expansion (value: Record<string, boolean>, old: Record<string, boolean>) {
-      if (deepEqual(value, old)) return
-      const keys = Object.keys(value).filter(k => value[k])
-      const expanded = !keys.length ? [] : this.items.filter(i => keys.includes(String(getObjectValueByPath(i, this.itemKey))))
-      this.$emit('update:expanded', expanded)
-    },
-  },
-
-  created () {
-    const breakingProps = [
-      ['disable-initial-sort', 'sort-by'],
-      ['filter', 'custom-filter'],
-      ['pagination', 'options'],
-      ['total-items', 'server-items-length'],
-      ['hide-actions', 'hide-default-footer'],
-      ['rows-per-page-items', 'footer-props.items-per-page-options'],
-      ['rows-per-page-text', 'footer-props.items-per-page-text'],
-      ['prev-icon', 'footer-props.prev-icon'],
-      ['next-icon', 'footer-props.next-icon'],
-    ]
-
-    /* istanbul ignore next */
-    breakingProps.forEach(([original, replacement]) => {
-      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
-    })
-
-    const removedProps = [
-      'expand',
-      'content-class',
-      'content-props',
-      'content-tag',
-    ]
-
-    /* istanbul ignore next */
-    removedProps.forEach(prop => {
-      if (this.$attrs.hasOwnProperty(prop)) removed(prop)
-    })
-  },
-
-  mounted () {
-    window.addEventListener('keydown', this.onKeyDown)
-    window.addEventListener('keyup', this.onKeyUp)
-  },
-  beforeDestroy () {
-    window.removeEventListener('keydown', this.onKeyDown)
-    window.removeEventListener('keyup', this.onKeyUp)
-  },
-
-  methods: {
-    onKeyDown (e: KeyboardEvent): void {
-      if (e.keyCode !== keyCodes.shift) return
-      this.shiftKeyDown = true
-    },
-    onKeyUp (e: KeyboardEvent): void {
-      if (e.keyCode !== keyCodes.shift) return
-      this.shiftKeyDown = false
-    },
-    toggleSelectAll (value: boolean): void {
-      const selection = Object.assign({}, this.selection)
-
-      for (let i = 0; i < this.selectableItems.length; i++) {
-        const item = this.selectableItems[i]
-
-        if (!this.isSelectable(item)) continue
-
-        const key = getObjectValueByPath(item, this.itemKey)
-        if (value) selection[key] = item
-        else delete selection[key]
-      }
-
-      this.selection = selection
-      this.$emit('toggle-select-all', { items: this.internalCurrentItems, value })
-    },
-    isSelectable (item: any): boolean {
-      return getObjectValueByPath(item, this.selectableKey) !== false
-    },
-    isSelected (item: any): boolean {
-      return !!this.selection[getObjectValueByPath(item, this.itemKey)] || false
-    },
-    select (item: any, value = true, emit = true): void {
-      if (!this.isSelectable(item)) return
-
-      const selection = this.singleSelect ? {} : Object.assign({}, this.selection)
-      const key = getObjectValueByPath(item, this.itemKey)
-
-      if (value) selection[key] = item
-      else delete selection[key]
-
-      const index = this.selectableItems.findIndex(x => getObjectValueByPath(x, this.itemKey) === key)
-      if (this.lastEntry === -1) this.lastEntry = index
-      else if (this.shiftKeyDown && !this.singleSelect && emit) {
-        const lastEntryKey = getObjectValueByPath(this.selectableItems[this.lastEntry], this.itemKey)
-        const lastEntryKeySelected = Object.keys(this.selection).includes(String(lastEntryKey))
-        this.multipleSelect(lastEntryKeySelected, emit, selection, index)
-      }
-      this.lastEntry = index
-
-      if (this.singleSelect && emit) {
-        const keys = Object.keys(this.selection)
-        const old = keys.length && getObjectValueByPath(this.selection[keys[0]], this.itemKey)
-        old && old !== key && this.$emit('item-selected', { item: this.selection[old], value: false })
-      }
-      this.selection = selection
-      emit && this.$emit('item-selected', { item, value })
-    },
-    multipleSelect (value = true, emit = true, selection: any, index: number): void {
-      const start = index < this.lastEntry ? index : this.lastEntry
-      const end = index < this.lastEntry ? this.lastEntry : index
-      for (let i = start; i <= end; i++) {
-        const currentItem = this.selectableItems[i]
-        const key = getObjectValueByPath(currentItem, this.itemKey)
-        if (value) selection[key] = currentItem
-        else delete selection[key]
-        emit && this.$emit('item-selected', { currentItem, value })
-      }
-    },
-    isExpanded (item: any): boolean {
-      return this.expansion[getObjectValueByPath(item, this.itemKey)] || false
-    },
-    expand (item: any, value = true): void {
-      const expansion = this.singleExpand ? {} : Object.assign({}, this.expansion)
-      const key = getObjectValueByPath(item, this.itemKey)
-
-      if (value) expansion[key] = true
-      else delete expansion[key]
-
-      this.expansion = expansion
-      this.$emit('item-expanded', { item, value })
-    },
-    createItemProps (item: any, index: number): DataItemProps {
-      return {
-        item,
-        index,
-        select: (v: boolean) => this.select(item, v),
-        isSelected: this.isSelected(item),
-        expand: (v: boolean) => this.expand(item, v),
-        isExpanded: this.isExpanded(item),
-        isMobile: this.isMobile,
-      }
-    },
-    genEmptyWrapper (content: VNodeChildren) {
-      return this.$createElement('div', content)
-    },
-    genEmpty (originalItemsLength: number, filteredItemsLength: number) {
-      if (originalItemsLength === 0 && this.loading) {
-        const loading = this.$slots.loading || this.$vuetify.lang.t(this.loadingText)
-        return this.genEmptyWrapper(loading)
-      } else if (originalItemsLength === 0) {
-        const noData = this.$slots['no-data'] || this.$vuetify.lang.t(this.noDataText)
-        return this.genEmptyWrapper(noData)
-      } else if (filteredItemsLength === 0) {
-        const noResults = this.$slots['no-results'] || this.$vuetify.lang.t(this.noResultsText)
-        return this.genEmptyWrapper(noResults)
-      }
-
-      return null
-    },
-    genItems (props: DataScopeProps) {
-      const empty = this.genEmpty(props.originalItemsLength, props.pagination.itemsLength)
-      if (empty) return [empty]
-
-      if (this.$scopedSlots.default) {
-        return this.$scopedSlots.default({
-          ...props,
-          isSelected: this.isSelected,
-          select: this.select,
-          isExpanded: this.isExpanded,
-          isMobile: this.isMobile,
-          expand: this.expand,
-        })
-      }
-
-      if (this.$scopedSlots.item) {
-        return props.items.map((item: any, index) => this.$scopedSlots.item!(this.createItemProps(
-          item,
-          index
-        )))
-      }
-
-      return []
-    },
-    genFooter (props: DataScopeProps) {
-      if (this.hideDefaultFooter) return null
-
-      const data = {
-        props: {
-          ...this.sanitizedFooterProps,
-          options: props.options,
-          pagination: props.pagination,
-        },
-        on: {
-          'update:options': (value: any) => props.updateOptions(value),
-        },
-      }
-
-      const scopedSlots = getPrefixedScopedSlots('footer.', this.$scopedSlots)
-
-      return this.$createElement(VDataFooter, {
-        scopedSlots,
-        ...data,
-      })
-    },
-    genDefaultScopedSlot (props: any) {
-      const outerProps = {
-        ...props,
-        someItems: this.someItems,
-        everyItem: this.everyItem,
-        toggleSelectAll: this.toggleSelectAll,
-      }
-
-      return this.$createElement('div', {
-        staticClass: 'v-data-iterator',
-      }, [
-        getSlot(this, 'header', outerProps, true),
-        this.genItems(props),
-        this.genFooter(props),
-        getSlot(this, 'footer', outerProps, true),
-      ])
-    },
-  },
-
-  render (): VNode {
-    return this.$createElement(VData, {
-      props: this.$props,
-      on: {
-        'update:options': (v: any, old: any) => !deepEqual(v, old) && this.$emit('update:options', v),
-        'update:page': (v: any) => this.$emit('update:page', v),
-        'update:items-per-page': (v: any) => this.$emit('update:items-per-page', v),
-        'update:sort-by': (v: any) => this.$emit('update:sort-by', v),
-        'update:sort-desc': (v: any) => this.$emit('update:sort-desc', v),
-        'update:group-by': (v: any) => this.$emit('update:group-by', v),
-        'update:group-desc': (v: any) => this.$emit('update:group-desc', v),
-        pagination: (v: any, old: any) => !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/VDataIterator/__tests__/VDataFooter.spec.ts b/packages/vuetify/src/components/VDataIterator/__tests__/VDataFooter.spec.ts
deleted file mode 100644
index 162dba50e85..00000000000
--- a/packages/vuetify/src/components/VDataIterator/__tests__/VDataFooter.spec.ts
+++ /dev/null
@@ -1,204 +0,0 @@
-// @ts-nocheck
-/* eslint-disable */
-
-// import VDataFooter from '../VDataFooter'
-// import { Lang } from '../../../services/lang'
-import {
-  mount,
-  MountOptions,
-  Wrapper,
-} from '@vue/test-utils'
-// import Vue from 'vue'
-// import { preset } from '../../../presets/default'
-
-// Vue.prototype.$vuetify = {
-//   icons: {
-//     values: {
-//       prev: 'mdi-chevron-left',
-//       next: 'mdi-chevron-right',
-//       dropdown: 'mdi-menu-down',
-//       first: 'mdi-page-first',
-//       last: 'mdi-page-last',
-//     },
-//   },
-// }
-
-describe.skip('VDataFooter.ts', () => {
-  type Instance = InstanceType<typeof VDataFooter>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
-  beforeEach(() => {
-    document.body.setAttribute('data-app', '')
-
-    mountFunction = (options?: MountOptions<Instance>) => {
-      return mount(VDataFooter, {
-        // https://github.com/vuejs/vue-test-utils/issues/1130
-        sync: false,
-        mocks: {
-          $vuetify: {
-            lang: new Lang(preset),
-            theme: {
-              dark: false,
-            },
-          },
-        },
-        ...options,
-      })
-    }
-  })
-
-  it('should render with custom itemsPerPage', () => {
-    const wrapper = mountFunction({
-      propsData: {
-        itemsPerPageOptions: [50, 100],
-        options: {
-          page: 4,
-          itemsPerPage: 100,
-        },
-        pagination: {
-          page: 4,
-          itemsPerPage: 10,
-          pageStart: 1,
-          pageStop: 10,
-          pageCount: 10,
-          itemsLength: 100,
-        },
-      },
-    })
-
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-
-  it('should render in RTL mode', () => {
-    const wrapper = mountFunction({
-      propsData: {
-        options: {
-          page: 4,
-          itemsPerPage: 10,
-        },
-        pagination: {
-          page: 4,
-          itemsPerPage: 10,
-          pageStart: 1,
-          pageStop: 10,
-          pageCount: 10,
-          itemsLength: 100,
-        },
-        showFirstLastPage: true,
-      },
-      mocks: {
-        $vuetify: {
-          rtl: true,
-          lang: new Lang(preset),
-          theme: {
-            dark: false,
-          },
-        },
-      },
-    })
-
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-
-  it('should render first & last icons with showFirstLastPage', () => {
-    const wrapper = mountFunction({
-      propsData: {
-        options: {
-          page: 4,
-          itemsPerPage: 10,
-        },
-        pagination: {
-          page: 4,
-          itemsPerPage: 10,
-          pageStart: 1,
-          pageStop: 10,
-          pageCount: 10,
-          itemsLength: 100,
-        },
-        showFirstLastPage: true,
-      },
-    })
-
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-
-  it('should switch between pages', () => {
-    const mock = jest.fn()
-
-    const wrapper = mountFunction({
-      propsData: {
-        options: {
-          page: 4,
-          itemsPerPage: 10,
-        },
-        pagination: {
-          page: 4,
-          itemsPerPage: 10,
-          pageStart: 1,
-          pageStop: 10,
-          pageCount: 10,
-          itemsLength: 100,
-        },
-      },
-      listeners: {
-        'update:options': mock,
-      },
-    })
-
-    wrapper.vm.onNextPage()
-    expect(mock).toHaveBeenCalledWith({ itemsPerPage: 10, page: 5 })
-    wrapper.vm.onPreviousPage()
-    expect(mock).toHaveBeenCalledWith({ itemsPerPage: 10, page: 3 })
-    wrapper.vm.onFirstPage()
-    expect(mock).toHaveBeenCalledWith({ itemsPerPage: 10, page: 1 })
-    wrapper.vm.onLastPage()
-    expect(mock).toHaveBeenCalledWith({ itemsPerPage: 10, page: 10 })
-    wrapper.vm.onChangeItemsPerPage(5)
-    expect(mock).toHaveBeenCalledWith({ itemsPerPage: 5, page: 1 })
-    wrapper.vm.onChangeItemsPerPage(20)
-    expect(mock).toHaveBeenCalledWith({ itemsPerPage: 20, page: 1 })
-  })
-
-  it('should show current page if has showCurrentPage', () => {
-    const wrapper = mountFunction({
-      propsData: {
-        options: {
-          page: 4,
-          itemsPerPage: 10,
-        },
-        pagination: {
-          page: 4,
-          itemsPerPage: 10,
-          pageStart: 1,
-          pageStop: 10,
-          pageCount: 10,
-          itemsLength: 100,
-        },
-        showCurrentPage: true,
-      },
-    })
-
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-
-  it('should disable last page button if no items', () => {
-    const wrapper = mountFunction({
-      propsData: {
-        options: {
-          page: 1,
-          itemsPerPage: 10,
-        },
-        pagination: {
-          page: 1,
-          itemsPerPage: 10,
-          pageStart: 0,
-          pageStop: 0,
-          pageCount: 0,
-          itemsLength: 0,
-        },
-        showFirstLastPage: true,
-      },
-    })
-
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-})
diff --git a/packages/vuetify/src/components/VDataIterator/__tests__/VDataIterator.spec.ts b/packages/vuetify/src/components/VDataIterator/__tests__/VDataIterator.spec.ts
deleted file mode 100644
index c4430e1e999..00000000000
--- a/packages/vuetify/src/components/VDataIterator/__tests__/VDataIterator.spec.ts
+++ /dev/null
@@ -1,353 +0,0 @@
-// @ts-nocheck
-/* eslint-disable */
-
-// import VDataIterator from '../VDataIterator'
-// import { Lang } from '../../../services/lang'
-import {
-  mount,
-  MountOptions,
-  Wrapper,
-} from '@vue/test-utils'
-// import Vue from 'vue'
-// import { Breakpoint } from '../../../services/breakpoint'
-// import { preset } from '../../../presets/default'
-
-// Vue.prototype.$vuetify = {
-//   icons: {
-//     values: {
-//       prev: 'mdi-chevron-left',
-//       next: 'mdi-chevron-right',
-//       dropdown: 'mdi-menu-down',
-//       first: 'mdi-page-first',
-//       last: 'mdi-page-last',
-//     },
-//   },
-// }
-
-describe.skip('VDataIterator.ts', () => {
-  type Instance = InstanceType<typeof VDataIterator>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
-  beforeEach(() => {
-    document.body.setAttribute('data-app', '')
-
-    mountFunction = (options?: MountOptions<Instance>) => {
-      return mount(VDataIterator, {
-        mocks: {
-          $vuetify: {
-            breakpoint: new Breakpoint(preset),
-            lang: new Lang(preset),
-            theme: {
-              dark: false,
-            },
-          },
-        },
-        sync: false,
-        ...options,
-      })
-    }
-  })
-
-  it('should render and match snapshot', () => {
-    const wrapper = mountFunction()
-
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-
-  it('should render and match snapshot with data', () => {
-    const wrapper = mountFunction({
-      propsData: {
-        items: [
-          'foo',
-          'bar',
-          'baz',
-          'qux',
-        ],
-      },
-      scopedSlots: {
-        item (props) {
-          return this.$createElement('div', [props.item])
-        },
-      },
-    })
-
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-
-  it('should render valid no-data, loading and no-results states', async () => {
-    const wrapper = mountFunction({
-      propsData: {
-        items: [],
-        serverItemsLength: 0,
-      },
-    })
-
-    await wrapper.vm.$nextTick()
-    expect(wrapper.html()).toMatchSnapshot()
-
-    wrapper.setProps({
-      loading: true,
-      items: [],
-    })
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.html()).toMatchSnapshot()
-
-    wrapper.setProps({
-      loading: false,
-      items: ['foo'],
-      search: 'something',
-    })
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-
-  it('should emit when selection happens', async () => {
-    const input = jest.fn()
-    const wrapper = mountFunction({
-      propsData: {
-        itemKey: 'id',
-        items: [
-          { id: 1, text: 'foo' },
-          { id: 2, text: 'bar' },
-        ],
-      },
-      listeners: {
-        input,
-      },
-      scopedSlots: {
-        item (props) {
-          return this.$createElement('div', {
-            attrs: {
-              id: props.item.text,
-            },
-            on: {
-              click: () => props.select(true),
-            },
-          }, [props.item.text])
-        },
-      },
-    })
-
-    const foo = wrapper.find('#foo')
-    foo.element.click()
-
-    await wrapper.vm.$nextTick()
-
-    expect(input).toHaveBeenCalledWith([{ id: 1, text: 'foo' }])
-  })
-
-  it('should emit when expansion happens', async () => {
-    const input = jest.fn()
-    const wrapper = mountFunction({
-      propsData: {
-        itemKey: 'id',
-        items: [
-          { id: 1, text: 'foo' },
-          { id: 2, text: 'bar' },
-        ],
-      },
-      listeners: {
-        'update:expanded': input,
-      },
-      scopedSlots: {
-        item (props) {
-          return this.$createElement('div', {
-            attrs: {
-              id: props.item.text,
-            },
-            on: {
-              click: () => props.expand(true),
-            },
-          }, [props.item.text])
-        },
-      },
-    })
-
-    const foo = wrapper.find('#bar')
-    foo.element.click()
-
-    await wrapper.vm.$nextTick()
-
-    expect(input).toHaveBeenCalledWith([{ id: 2, text: 'bar' }])
-  })
-
-  it('should select all', async () => {
-    const input = jest.fn()
-    const items = [
-      { id: 'foo' },
-      { id: 'bar' },
-    ]
-    const toggleSelectAll = jest.fn()
-
-    const wrapper = mountFunction({
-      propsData: {
-        items,
-      },
-      listeners: {
-        input,
-        'toggle-select-all': toggleSelectAll,
-      },
-      scopedSlots: {
-        header (props) {
-          return this.$createElement('div', {
-            attrs: {
-              id: 'header',
-            },
-            on: {
-              click: () => props.toggleSelectAll(true),
-            },
-          })
-        },
-      },
-    })
-
-    const header = wrapper.find('#header')
-    header.element.click()
-
-    await wrapper.vm.$nextTick()
-
-    expect(input).toHaveBeenCalledWith(items)
-    expect(toggleSelectAll).toHaveBeenCalledWith({ items, value: true })
-  })
-
-  it('should update expansion from the outside', async () => {
-    const mock = jest.fn()
-    const wrapper = mountFunction({
-      propsData: {
-        items: [
-          { id: 'foo' },
-          { id: 'bar' },
-        ],
-      },
-      listeners: {
-        'update:expanded': mock,
-      },
-    })
-
-    wrapper.setProps({
-      expanded: [{ id: 'foo' }],
-    })
-    await wrapper.vm.$nextTick()
-    expect(mock).toHaveBeenLastCalledWith([{ id: 'foo' }])
-
-    wrapper.setProps({
-      expanded: [{ id: 'bar' }],
-    })
-    await wrapper.vm.$nextTick()
-    expect(mock).toHaveBeenLastCalledWith([{ id: 'bar' }])
-  })
-
-  it('should update selection from the outside', async () => {
-    const mock = jest.fn()
-    const wrapper = mountFunction({
-      propsData: {
-        items: [
-          { id: 'foo' },
-          { id: 'bar' },
-        ],
-      },
-      listeners: {
-        input: mock,
-      },
-    })
-
-    wrapper.setProps({
-      value: [{ id: 'foo' }],
-    })
-    await wrapper.vm.$nextTick()
-    expect(mock).toHaveBeenLastCalledWith([{ id: 'foo' }])
-
-    wrapper.setProps({
-      value: [{ id: 'bar' }],
-    })
-    await wrapper.vm.$nextTick()
-    expect(mock).toHaveBeenLastCalledWith([{ id: 'bar' }])
-  })
-
-  it('should check if all items are selected', async () => {
-    const render = jest.fn()
-    const items = [
-      { id: 'foo' }, { id: 'bar' },
-    ]
-
-    const wrapper = mountFunction({
-      propsData: {
-        items,
-      },
-      scopedSlots: {
-        header: render,
-      },
-    })
-
-    wrapper.setProps({
-      value: items,
-    })
-    await wrapper.vm.$nextTick()
-
-    expect(render).toHaveBeenLastCalledWith(expect.objectContaining({
-      everyItem: true,
-      someItems: true,
-    }))
-  })
-
-  it('should check if some items are selected', async () => {
-    const render = jest.fn()
-    const items = [
-      { id: 'foo' }, { id: 'bar' },
-    ]
-
-    const wrapper = mountFunction({
-      propsData: {
-        items,
-      },
-      scopedSlots: {
-        header: render,
-      },
-    })
-
-    wrapper.setProps({
-      value: items.slice(1),
-    })
-    await wrapper.vm.$nextTick()
-
-    expect(render).toHaveBeenLastCalledWith(expect.objectContaining({
-      everyItem: false,
-      someItems: true,
-    }))
-  })
-
-  it('should hide footer', () => {
-    const wrapper = mountFunction({
-      propsData: {
-        hideDefaultFooter: true,
-      },
-    })
-
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-
-  // https://github.com/vuetifyjs/vuetify/issues/8886
-  it('should emit page-count event', async () => {
-    const pageCount = jest.fn()
-    const wrapper = mountFunction({
-      propsData: {
-        items: [
-          'foo',
-          'bar',
-          'baz',
-          'qux',
-        ],
-        itemsPerPage: 1,
-      },
-      listeners: {
-        pageCount,
-      },
-    })
-
-    wrapper.setProps({ itemsPerPage: 4 })
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.emitted('page-count')).toEqual([[4], [1]])
-  })
-})
diff --git a/packages/vuetify/src/components/VDataIterator/__tests__/__snapshots__/VDataFooter.spec.ts.snap b/packages/vuetify/src/components/VDataIterator/__tests__/__snapshots__/VDataFooter.spec.ts.snap
deleted file mode 100644
index 23b4d9c7300..00000000000
--- a/packages/vuetify/src/components/VDataIterator/__tests__/__snapshots__/VDataFooter.spec.ts.snap
+++ /dev/null
@@ -1,450 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`VDataFooter.ts should disable last page button if no items 1`] = `
-<div class="v-data-footer">
-  <div class="v-data-footer__select">
-    Items per page:
-    <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-text-field v-select">
-      <div class="v-input__control">
-        <div role="button"
-             aria-haspopup="listbox"
-             aria-expanded="false"
-             aria-owns="list-55"
-             class="v-input__slot"
-        >
-          <div class="v-select__slot">
-            <div class="v-select__selections">
-              <div class="v-select__selection v-select__selection--comma">
-                10
-              </div>
-              <input aria-label="Items per page:"
-                     id="input-55"
-                     readonly="readonly"
-                     type="text"
-                     aria-readonly="false"
-                     autocomplete="off"
-              >
-            </div>
-            <div class="v-input__append-inner">
-              <div class="v-input__icon v-input__icon--append">
-                <i aria-hidden="true"
-                   class="v-icon notranslate mdi mdi-menu-down theme--light"
-                >
-                </i>
-              </div>
-            </div>
-            <input type="hidden"
-                   value="10"
-            >
-          </div>
-          <div class="v-menu">
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="v-data-footer__pagination">
-    –
-  </div>
-  <div class="v-data-footer__icons-before">
-    <button type="button"
-            disabled="disabled"
-            class="v-btn v-btn--disabled v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
-            aria-label="First page"
-    >
-      <span class="v-btn__content">
-        <i aria-hidden="true"
-           class="v-icon notranslate mdi mdi-page-first theme--light"
-        >
-        </i>
-      </span>
-    </button>
-    <button type="button"
-            disabled="disabled"
-            class="v-btn v-btn--disabled v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
-            aria-label="Previous page"
-    >
-      <span class="v-btn__content">
-        <i aria-hidden="true"
-           class="v-icon notranslate mdi mdi-chevron-left theme--light"
-        >
-        </i>
-      </span>
-    </button>
-  </div>
-  <div class="v-data-footer__icons-after">
-    <button type="button"
-            disabled="disabled"
-            class="v-btn v-btn--disabled v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
-            aria-label="Next page"
-    >
-      <span class="v-btn__content">
-        <i aria-hidden="true"
-           class="v-icon notranslate mdi mdi-chevron-right theme--light"
-        >
-        </i>
-      </span>
-    </button>
-    <button type="button"
-            disabled="disabled"
-            class="v-btn v-btn--disabled v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
-            aria-label="Last page"
-    >
-      <span class="v-btn__content">
-        <i aria-hidden="true"
-           class="v-icon notranslate mdi mdi-page-last theme--light"
-        >
-        </i>
-      </span>
-    </button>
-  </div>
-</div>
-`;
-
-exports[`VDataFooter.ts should render first & last icons with showFirstLastPage 1`] = `
-<div class="v-data-footer">
-  <div class="v-data-footer__select">
-    Items per page:
-    <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-text-field v-select">
-      <div class="v-input__control">
-        <div role="button"
-             aria-haspopup="listbox"
-             aria-expanded="false"
-             aria-owns="list-24"
-             class="v-input__slot"
-        >
-          <div class="v-select__slot">
-            <div class="v-select__selections">
-              <div class="v-select__selection v-select__selection--comma">
-                10
-              </div>
-              <input aria-label="Items per page:"
-                     id="input-24"
-                     readonly="readonly"
-                     type="text"
-                     aria-readonly="false"
-                     autocomplete="off"
-              >
-            </div>
-            <div class="v-input__append-inner">
-              <div class="v-input__icon v-input__icon--append">
-                <i aria-hidden="true"
-                   class="v-icon notranslate mdi mdi-menu-down theme--light"
-                >
-                </i>
-              </div>
-            </div>
-            <input type="hidden"
-                   value="10"
-            >
-          </div>
-          <div class="v-menu">
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="v-data-footer__pagination">
-    2-10 of 100
-  </div>
-  <div class="v-data-footer__icons-before">
-    <button type="button"
-            class="v-btn v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
-            aria-label="First page"
-    >
-      <span class="v-btn__content">
-        <i aria-hidden="true"
-           class="v-icon notranslate mdi mdi-page-first theme--light"
-        >
-        </i>
-      </span>
-    </button>
-    <button type="button"
-            class="v-btn v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
-            aria-label="Previous page"
-    >
-      <span class="v-btn__content">
-        <i aria-hidden="true"
-           class="v-icon notranslate mdi mdi-chevron-left theme--light"
-        >
-        </i>
-      </span>
-    </button>
-  </div>
-  <div class="v-data-footer__icons-after">
-    <button type="button"
-            class="v-btn v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
-            aria-label="Next page"
-    >
-      <span class="v-btn__content">
-        <i aria-hidden="true"
-           class="v-icon notranslate mdi mdi-chevron-right theme--light"
-        >
-        </i>
-      </span>
-    </button>
-    <button type="button"
-            class="v-btn v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
-            aria-label="Last page"
-    >
-      <span class="v-btn__content">
-        <i aria-hidden="true"
-           class="v-icon notranslate mdi mdi-page-last theme--light"
-        >
-        </i>
-      </span>
-    </button>
-  </div>
-</div>
-`;
-
-exports[`VDataFooter.ts should render in RTL mode 1`] = `
-<div class="v-data-footer">
-  <div class="v-data-footer__select">
-    Items per page:
-    <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-text-field v-select">
-      <div class="v-input__control">
-        <div role="button"
-             aria-haspopup="listbox"
-             aria-expanded="false"
-             aria-owns="list-11"
-             class="v-input__slot"
-        >
-          <div class="v-select__slot">
-            <div class="v-select__selections">
-              <div class="v-select__selection v-select__selection--comma">
-                10
-              </div>
-              <input aria-label="Items per page:"
-                     id="input-11"
-                     readonly="readonly"
-                     type="text"
-                     aria-readonly="false"
-                     autocomplete="off"
-              >
-            </div>
-            <div class="v-input__append-inner">
-              <div class="v-input__icon v-input__icon--append">
-                <i aria-hidden="true"
-                   class="v-icon notranslate mdi mdi-menu-down theme--light"
-                >
-                </i>
-              </div>
-            </div>
-            <input type="hidden"
-                   value="10"
-            >
-          </div>
-          <div class="v-menu">
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="v-data-footer__pagination">
-    2-10 of 100
-  </div>
-  <div class="v-data-footer__icons-before">
-    <button type="button"
-            class="v-btn v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
-            aria-label="First page"
-    >
-      <span class="v-btn__content">
-        <i aria-hidden="true"
-           class="v-icon notranslate mdi mdi-page-last theme--light"
-        >
-        </i>
-      </span>
-    </button>
-    <button type="button"
-            class="v-btn v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
-            aria-label="Previous page"
-    >
-      <span class="v-btn__content">
-        <i aria-hidden="true"
-           class="v-icon notranslate mdi mdi-chevron-right theme--light"
-        >
-        </i>
-      </span>
-    </button>
-  </div>
-  <div class="v-data-footer__icons-after">
-    <button type="button"
-            class="v-btn v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
-            aria-label="Next page"
-    >
-      <span class="v-btn__content">
-        <i aria-hidden="true"
-           class="v-icon notranslate mdi mdi-chevron-left theme--light"
-        >
-        </i>
-      </span>
-    </button>
-    <button type="button"
-            class="v-btn v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
-            aria-label="Last page"
-    >
-      <span class="v-btn__content">
-        <i aria-hidden="true"
-           class="v-icon notranslate mdi mdi-page-first theme--light"
-        >
-        </i>
-      </span>
-    </button>
-  </div>
-</div>
-`;
-
-exports[`VDataFooter.ts should render with custom itemsPerPage 1`] = `
-<div class="v-data-footer">
-  <div class="v-data-footer__select">
-    Items per page:
-    <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-text-field v-select">
-      <div class="v-input__control">
-        <div role="button"
-             aria-haspopup="listbox"
-             aria-expanded="false"
-             aria-owns="list-2"
-             class="v-input__slot"
-        >
-          <div class="v-select__slot">
-            <div class="v-select__selections">
-              <div class="v-select__selection v-select__selection--comma">
-                100
-              </div>
-              <input aria-label="Items per page:"
-                     id="input-2"
-                     readonly="readonly"
-                     type="text"
-                     aria-readonly="false"
-                     autocomplete="off"
-              >
-            </div>
-            <div class="v-input__append-inner">
-              <div class="v-input__icon v-input__icon--append">
-                <i aria-hidden="true"
-                   class="v-icon notranslate mdi mdi-menu-down theme--light"
-                >
-                </i>
-              </div>
-            </div>
-            <input type="hidden"
-                   value="100"
-            >
-          </div>
-          <div class="v-menu">
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="v-data-footer__pagination">
-    2-10 of 100
-  </div>
-  <div class="v-data-footer__icons-before">
-    <button type="button"
-            class="v-btn v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
-            aria-label="Previous page"
-    >
-      <span class="v-btn__content">
-        <i aria-hidden="true"
-           class="v-icon notranslate mdi mdi-chevron-left theme--light"
-        >
-        </i>
-      </span>
-    </button>
-  </div>
-  <div class="v-data-footer__icons-after">
-    <button type="button"
-            disabled="disabled"
-            class="v-btn v-btn--disabled v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
-            aria-label="Next page"
-    >
-      <span class="v-btn__content">
-        <i aria-hidden="true"
-           class="v-icon notranslate mdi mdi-chevron-right theme--light"
-        >
-        </i>
-      </span>
-    </button>
-  </div>
-</div>
-`;
-
-exports[`VDataFooter.ts should show current page if has showCurrentPage 1`] = `
-<div class="v-data-footer">
-  <div class="v-data-footer__select">
-    Items per page:
-    <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-text-field v-select">
-      <div class="v-input__control">
-        <div role="button"
-             aria-haspopup="listbox"
-             aria-expanded="false"
-             aria-owns="list-46"
-             class="v-input__slot"
-        >
-          <div class="v-select__slot">
-            <div class="v-select__selections">
-              <div class="v-select__selection v-select__selection--comma">
-                10
-              </div>
-              <input aria-label="Items per page:"
-                     id="input-46"
-                     readonly="readonly"
-                     type="text"
-                     aria-readonly="false"
-                     autocomplete="off"
-              >
-            </div>
-            <div class="v-input__append-inner">
-              <div class="v-input__icon v-input__icon--append">
-                <i aria-hidden="true"
-                   class="v-icon notranslate mdi mdi-menu-down theme--light"
-                >
-                </i>
-              </div>
-            </div>
-            <input type="hidden"
-                   value="10"
-            >
-          </div>
-          <div class="v-menu">
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="v-data-footer__pagination">
-    2-10 of 100
-  </div>
-  <div class="v-data-footer__icons-before">
-    <button type="button"
-            class="v-btn v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
-            aria-label="Previous page"
-    >
-      <span class="v-btn__content">
-        <i aria-hidden="true"
-           class="v-icon notranslate mdi mdi-chevron-left theme--light"
-        >
-        </i>
-      </span>
-    </button>
-  </div>
-  <span>
-    4
-  </span>
-  <div class="v-data-footer__icons-after">
-    <button type="button"
-            class="v-btn v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
-            aria-label="Next page"
-    >
-      <span class="v-btn__content">
-        <i aria-hidden="true"
-           class="v-icon notranslate mdi mdi-chevron-right theme--light"
-        >
-        </i>
-      </span>
-    </button>
-  </div>
-</div>
-`;
diff --git a/packages/vuetify/src/components/VDataIterator/__tests__/__snapshots__/VDataIterator.spec.ts.snap b/packages/vuetify/src/components/VDataIterator/__tests__/__snapshots__/VDataIterator.spec.ts.snap
deleted file mode 100644
index 1b5d9c0e768..00000000000
--- a/packages/vuetify/src/components/VDataIterator/__tests__/__snapshots__/VDataIterator.spec.ts.snap
+++ /dev/null
@@ -1,428 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`VDataIterator.ts should hide footer 1`] = `
-<div class="v-data-iterator">
-  <div>
-    No data available
-  </div>
-</div>
-`;
-
-exports[`VDataIterator.ts should render and match snapshot 1`] = `
-<div class="v-data-iterator">
-  <div>
-    No data available
-  </div>
-  <div class="v-data-footer">
-    <div class="v-data-footer__select">
-      Items per page:
-      <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-text-field v-select">
-        <div class="v-input__control">
-          <div role="button"
-               aria-haspopup="listbox"
-               aria-expanded="false"
-               aria-owns="list-4"
-               class="v-input__slot"
-          >
-            <div class="v-select__slot">
-              <div class="v-select__selections">
-                <div class="v-select__selection v-select__selection--comma">
-                  10
-                </div>
-                <input aria-label="Items per page:"
-                       id="input-4"
-                       readonly="readonly"
-                       type="text"
-                       aria-readonly="false"
-                       autocomplete="off"
-                >
-              </div>
-              <div class="v-input__append-inner">
-                <div class="v-input__icon v-input__icon--append">
-                  <i aria-hidden="true"
-                     class="v-icon notranslate mdi mdi-menu-down theme--light"
-                  >
-                  </i>
-                </div>
-              </div>
-              <input type="hidden"
-                     value="10"
-              >
-            </div>
-            <div class="v-menu">
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="v-data-footer__pagination">
-      –
-    </div>
-    <div class="v-data-footer__icons-before">
-      <button type="button"
-              disabled="disabled"
-              class="v-btn v-btn--disabled v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
-              aria-label="Previous page"
-      >
-        <span class="v-btn__content">
-          <i aria-hidden="true"
-             class="v-icon notranslate mdi mdi-chevron-left theme--light"
-          >
-          </i>
-        </span>
-      </button>
-    </div>
-    <div class="v-data-footer__icons-after">
-      <button type="button"
-              disabled="disabled"
-              class="v-btn v-btn--disabled v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
-              aria-label="Next page"
-      >
-        <span class="v-btn__content">
-          <i aria-hidden="true"
-             class="v-icon notranslate mdi mdi-chevron-right theme--light"
-          >
-          </i>
-        </span>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VDataIterator.ts should render and match snapshot with data 1`] = `
-<div class="v-data-iterator">
-  <div>
-    foo
-  </div>
-  <div>
-    bar
-  </div>
-  <div>
-    baz
-  </div>
-  <div>
-    qux
-  </div>
-  <div class="v-data-footer">
-    <div class="v-data-footer__select">
-      Items per page:
-      <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-text-field v-select">
-        <div class="v-input__control">
-          <div role="button"
-               aria-haspopup="listbox"
-               aria-expanded="false"
-               aria-owns="list-16"
-               class="v-input__slot"
-          >
-            <div class="v-select__slot">
-              <div class="v-select__selections">
-                <div class="v-select__selection v-select__selection--comma">
-                  10
-                </div>
-                <input aria-label="Items per page:"
-                       id="input-16"
-                       readonly="readonly"
-                       type="text"
-                       aria-readonly="false"
-                       autocomplete="off"
-                >
-              </div>
-              <div class="v-input__append-inner">
-                <div class="v-input__icon v-input__icon--append">
-                  <i aria-hidden="true"
-                     class="v-icon notranslate mdi mdi-menu-down theme--light"
-                  >
-                  </i>
-                </div>
-              </div>
-              <input type="hidden"
-                     value="10"
-              >
-            </div>
-            <div class="v-menu">
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="v-data-footer__pagination">
-      1-4 of 4
-    </div>
-    <div class="v-data-footer__icons-before">
-      <button type="button"
-              disabled="disabled"
-              class="v-btn v-btn--disabled v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
-              aria-label="Previous page"
-      >
-        <span class="v-btn__content">
-          <i aria-hidden="true"
-             class="v-icon notranslate mdi mdi-chevron-left theme--light"
-          >
-          </i>
-        </span>
-      </button>
-    </div>
-    <div class="v-data-footer__icons-after">
-      <button type="button"
-              disabled="disabled"
-              class="v-btn v-btn--disabled v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
-              aria-label="Next page"
-      >
-        <span class="v-btn__content">
-          <i aria-hidden="true"
-             class="v-icon notranslate mdi mdi-chevron-right theme--light"
-          >
-          </i>
-        </span>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VDataIterator.ts should render valid no-data, loading and no-results states 1`] = `
-<div class="v-data-iterator">
-  <div>
-    No data available
-  </div>
-  <div class="v-data-footer">
-    <div class="v-data-footer__select">
-      Items per page:
-      <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-text-field v-select">
-        <div class="v-input__control">
-          <div role="button"
-               aria-haspopup="listbox"
-               aria-expanded="false"
-               aria-owns="list-27"
-               class="v-input__slot"
-          >
-            <div class="v-select__slot">
-              <div class="v-select__selections">
-                <div class="v-select__selection v-select__selection--comma">
-                  10
-                </div>
-                <input aria-label="Items per page:"
-                       id="input-27"
-                       readonly="readonly"
-                       type="text"
-                       aria-readonly="false"
-                       autocomplete="off"
-                >
-              </div>
-              <div class="v-input__append-inner">
-                <div class="v-input__icon v-input__icon--append">
-                  <i aria-hidden="true"
-                     class="v-icon notranslate mdi mdi-menu-down theme--light"
-                  >
-                  </i>
-                </div>
-              </div>
-              <input type="hidden"
-                     value="10"
-              >
-            </div>
-            <div class="v-menu">
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="v-data-footer__pagination">
-      –
-    </div>
-    <div class="v-data-footer__icons-before">
-      <button type="button"
-              disabled="disabled"
-              class="v-btn v-btn--disabled v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
-              aria-label="Previous page"
-      >
-        <span class="v-btn__content">
-          <i aria-hidden="true"
-             class="v-icon notranslate mdi mdi-chevron-left theme--light"
-          >
-          </i>
-        </span>
-      </button>
-    </div>
-    <div class="v-data-footer__icons-after">
-      <button type="button"
-              disabled="disabled"
-              class="v-btn v-btn--disabled v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
-              aria-label="Next page"
-      >
-        <span class="v-btn__content">
-          <i aria-hidden="true"
-             class="v-icon notranslate mdi mdi-chevron-right theme--light"
-          >
-          </i>
-        </span>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VDataIterator.ts should render valid no-data, loading and no-results states 2`] = `
-<div class="v-data-iterator">
-  <div>
-    Loading items...
-  </div>
-  <div class="v-data-footer">
-    <div class="v-data-footer__select">
-      Items per page:
-      <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-text-field v-select">
-        <div class="v-input__control">
-          <div role="button"
-               aria-haspopup="listbox"
-               aria-expanded="false"
-               aria-owns="list-27"
-               class="v-input__slot"
-          >
-            <div class="v-select__slot">
-              <div class="v-select__selections">
-                <div class="v-select__selection v-select__selection--comma">
-                  10
-                </div>
-                <input aria-label="Items per page:"
-                       id="input-27"
-                       readonly="readonly"
-                       type="text"
-                       aria-readonly="false"
-                       autocomplete="off"
-                >
-              </div>
-              <div class="v-input__append-inner">
-                <div class="v-input__icon v-input__icon--append">
-                  <i aria-hidden="true"
-                     class="v-icon notranslate mdi mdi-menu-down theme--light"
-                  >
-                  </i>
-                </div>
-              </div>
-              <input type="hidden"
-                     value="10"
-              >
-            </div>
-            <div class="v-menu">
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="v-data-footer__pagination">
-      –
-    </div>
-    <div class="v-data-footer__icons-before">
-      <button type="button"
-              disabled="disabled"
-              class="v-btn v-btn--disabled v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
-              aria-label="Previous page"
-      >
-        <span class="v-btn__content">
-          <i aria-hidden="true"
-             class="v-icon notranslate mdi mdi-chevron-left theme--light"
-          >
-          </i>
-        </span>
-      </button>
-    </div>
-    <div class="v-data-footer__icons-after">
-      <button type="button"
-              disabled="disabled"
-              class="v-btn v-btn--disabled v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
-              aria-label="Next page"
-      >
-        <span class="v-btn__content">
-          <i aria-hidden="true"
-             class="v-icon notranslate mdi mdi-chevron-right theme--light"
-          >
-          </i>
-        </span>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VDataIterator.ts should render valid no-data, loading and no-results states 3`] = `
-<div class="v-data-iterator">
-  <div>
-    No matching records found
-  </div>
-  <div class="v-data-footer">
-    <div class="v-data-footer__select">
-      Items per page:
-      <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-text-field v-select">
-        <div class="v-input__control">
-          <div role="button"
-               aria-haspopup="listbox"
-               aria-expanded="false"
-               aria-owns="list-27"
-               class="v-input__slot"
-          >
-            <div class="v-select__slot">
-              <div class="v-select__selections">
-                <div class="v-select__selection v-select__selection--comma">
-                  10
-                </div>
-                <input aria-label="Items per page:"
-                       id="input-27"
-                       readonly="readonly"
-                       type="text"
-                       aria-readonly="false"
-                       autocomplete="off"
-                >
-              </div>
-              <div class="v-input__append-inner">
-                <div class="v-input__icon v-input__icon--append">
-                  <i aria-hidden="true"
-                     class="v-icon notranslate mdi mdi-menu-down theme--light"
-                  >
-                  </i>
-                </div>
-              </div>
-              <input type="hidden"
-                     value="10"
-              >
-            </div>
-            <div class="v-menu">
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="v-data-footer__pagination">
-      –
-    </div>
-    <div class="v-data-footer__icons-before">
-      <button type="button"
-              disabled="disabled"
-              class="v-btn v-btn--disabled v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
-              aria-label="Previous page"
-      >
-        <span class="v-btn__content">
-          <i aria-hidden="true"
-             class="v-icon notranslate mdi mdi-chevron-left theme--light"
-          >
-          </i>
-        </span>
-      </button>
-    </div>
-    <div class="v-data-footer__icons-after">
-      <button type="button"
-              disabled="disabled"
-              class="v-btn v-btn--disabled v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
-              aria-label="Next page"
-      >
-        <span class="v-btn__content">
-          <i aria-hidden="true"
-             class="v-icon notranslate mdi mdi-chevron-right theme--light"
-          >
-          </i>
-        </span>
-      </button>
-    </div>
-  </div>
-</div>
-`;
diff --git a/packages/vuetify/src/components/VDataIterator/_variables.scss b/packages/vuetify/src/components/VDataIterator/_variables.scss
deleted file mode 100644
index 390b64b75dd..00000000000
--- a/packages/vuetify/src/components/VDataIterator/_variables.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-// Imports
-@import '../../styles/styles.sass';
-
-$data-footer-font-size: map-deep-get($typography, 'caption', 'size') !default;
-$data-footer-icons-after-btn-margin-start: 7px !default;
-$data-footer-icons-before-btn-margin-end: 7px !default;
-$data-footer-padding: 0 8px !default;
-$data-footer-pagination-margin-end: 32px !default;
-$data-footer-pagination-margin-start: 24px !default;
-$data-footer-select-margin-end: 14px !default;
-$data-footer-select-select-margin-start: 34px !default;
-$data-footer-select-select-margin-y: 13px !default;
-$data-footer-select-selections-comma-font-size: map-deep-get($typography, 'caption', 'size') !default;
diff --git a/packages/vuetify/src/components/VDataIterator/index.ts b/packages/vuetify/src/components/VDataIterator/index.ts
deleted file mode 100644
index 2609fed9464..00000000000
--- a/packages/vuetify/src/components/VDataIterator/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import VDataIterator from './VDataIterator'
-import VDataFooter from './VDataFooter'
-
-export { VDataIterator, VDataFooter }
-export default {
-  $_vuetify_subcomponents: {
-    VDataIterator,
-    VDataFooter,
-  },
-}
diff --git a/packages/vuetify/src/components/VList/VList.tsx b/packages/vuetify/src/components/VList/VList.tsx
index 039b219e66c..d36b1333a17 100644
--- a/packages/vuetify/src/components/VList/VList.tsx
+++ b/packages/vuetify/src/components/VList/VList.tsx
@@ -11,7 +11,7 @@ import { makeComponentProps } from '@/composables/component'
 import { makeDensityProps, useDensity } from '@/composables/density'
 import { makeDimensionProps, useDimension } from '@/composables/dimensions'
 import { makeElevationProps, useElevation } from '@/composables/elevation'
-import { makeItemsProps } from '@/composables/items'
+import { makeItemsProps } from '@/composables/list-items'
 import { makeNestedProps, useNested } from '@/composables/nested/nested'
 import { makeRoundedProps, useRounded } from '@/composables/rounded'
 import { makeTagProps } from '@/composables/tag'
@@ -26,11 +26,11 @@ import { focusChild, genericComponent, getPropertyFromItem, pick, propsFactory,
 
 // Types
 import type { GenericProps } from '@/util'
-import type { InternalItem, ItemProps } from '@/composables/items'
+import type { ItemProps, ListItem } from '@/composables/list-items'
 import type { VListChildrenSlots } from './VListChildren'
 import type { PropType } from 'vue'
 
-export interface InternalListItem<T = any> extends InternalItem<T> {
+export interface InternalListItem<T = any> extends ListItem<T> {
   type?: 'item' | 'subheader' | 'divider'
 }
 
diff --git a/packages/vuetify/src/components/VList/__tests__/VListItem.spec.ts b/packages/vuetify/src/components/VList/__tests__/VListItem.spec.ts
deleted file mode 100644
index acdd6554816..00000000000
--- a/packages/vuetify/src/components/VList/__tests__/VListItem.spec.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-// Components
-import { VListItem } from '..'
-
-// Utilities
-import { createVuetify } from '@/framework'
-import { mount, type VueWrapper } from '@vue/test-utils'
-import { describe, expect, it } from '@jest/globals'
-import { nextTick } from 'vue'
-
-describe('VListItem', () => {
-  const vuetify = createVuetify()
-
-  function mountFunction (options = {}) {
-    return mount<any>(VListItem, {
-      global: { plugins: [vuetify] },
-      ...options,
-    }) as VueWrapper<VListItem>
-  }
-
-  it('should match a snapshot', () => {
-    const wrapper = mountFunction()
-
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-
-  it('should add active-class when the active prop is true', async () => {
-    const activeClass = 'foo'
-    const wrapper = mountFunction({ props: { activeClass } })
-
-    expect(wrapper.classes()).not.toContain(activeClass)
-
-    wrapper.setProps({ active: true })
-
-    await nextTick()
-
-    expect(wrapper.classes()).toContain(activeClass)
-  })
-})
diff --git a/packages/vuetify/src/components/VList/__tests__/__snapshots__/VListItem.spec.ts.snap b/packages/vuetify/src/components/VList/__tests__/__snapshots__/VListItem.spec.ts.snap
deleted file mode 100644
index 8e69b1f02d1..00000000000
--- a/packages/vuetify/src/components/VList/__tests__/__snapshots__/VListItem.spec.ts.snap
+++ /dev/null
@@ -1,12 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`VListItem should match a snapshot 1`] = `
-<div class="v-list-item v-theme--light v-list-item--density-default v-list-item--variant-text">
-  <span class="v-list-item__underlay">
-  </span>
-  <div class="v-list-item__content"
-       data-no-activator
-  >
-  </div>
-</div>
-`;
diff --git a/packages/vuetify/src/components/VSelect/VSelect.tsx b/packages/vuetify/src/components/VSelect/VSelect.tsx
index d9a74a687e2..4baa1d6407b 100644
--- a/packages/vuetify/src/components/VSelect/VSelect.tsx
+++ b/packages/vuetify/src/components/VSelect/VSelect.tsx
@@ -16,7 +16,7 @@ import { VTextField } from '@/components/VTextField'
 // Composables
 import { forwardRefs } from '@/composables/forwardRefs'
 import { IconValue } from '@/composables/icons'
-import { makeItemsProps, useItems } from '@/composables/items'
+import { makeItemsProps, useItems } from '@/composables/list-items'
 import { makeTransitionProps } from '@/composables/transition'
 import { useForm } from '@/composables/form'
 import { useLocale } from '@/composables/locale'
@@ -29,7 +29,7 @@ import { deepEqual, genericComponent, omit, propsFactory, useRender, wrapInArray
 // Types
 import type { VInputSlots } from '@/components/VInput/VInput'
 import type { VFieldSlots } from '@/components/VField/VField'
-import type { InternalItem } from '@/composables/items'
+import type { ListItem } from '@/composables/list-items'
 import type { GenericProps } from '@/util'
 import type { Component, PropType } from 'vue'
 
@@ -95,9 +95,9 @@ export const VSelect = genericComponent<new <
     'onUpdate:modelValue'?: (val: V) => void
   },
   slots: Omit<VInputSlots & VFieldSlots, 'default'> & {
-    item: [{ item: InternalItem<Item>, index: number, props: Record<string, unknown> }]
-    chip: [{ item: InternalItem<Item>, index: number, props: Record<string, unknown> }]
-    selection: [{ item: InternalItem<Item>, index: number }]
+    item: [{ item: ListItem<Item>, index: number, props: Record<string, unknown> }]
+    chip: [{ item: ListItem<Item>, index: number, props: Record<string, unknown> }]
+    selection: [{ item: ListItem<Item>, index: number }]
     'prepend-item': []
     'append-item': []
     'no-data': []
@@ -218,7 +218,7 @@ export const VSelect = genericComponent<new <
         model.value = [item]
       }
     }
-    function select (item: InternalItem) {
+    function select (item: ListItem) {
       if (props.multiple) {
         const index = selected.value.findIndex(selection => props.valueComparator(selection, item.value))
 
diff --git a/packages/vuetify/src/components/index.ts b/packages/vuetify/src/components/index.ts
index 84ce25739b8..e40011c426b 100644
--- a/packages/vuetify/src/components/index.ts
+++ b/packages/vuetify/src/components/index.ts
@@ -21,7 +21,6 @@ export * from './VColorPicker'
 // export * from './VContent'
 export * from './VCombobox'
 export * from './VCounter'
-// export * from './VData'
 // export * from './VDataIterator'
 // export * from './VDataTable'
 // export * from './VDatePicker'
diff --git a/packages/vuetify/src/composables/__tests__/filter.spec.ts b/packages/vuetify/src/composables/__tests__/filter.spec.ts
index 5238ac313b8..e934d31c129 100644
--- a/packages/vuetify/src/composables/__tests__/filter.spec.ts
+++ b/packages/vuetify/src/composables/__tests__/filter.spec.ts
@@ -2,7 +2,7 @@
 import { defaultFilter, filterItems, useFilter } from '../filter'
 import { describe, expect, it } from '@jest/globals'
 import { nextTick, ref } from 'vue'
-import { transformItem, transformItems } from '../items'
+import { transformItem, transformItems } from '../list-items'
 
 describe('filter', () => {
   describe('defaultFilter', () => {
diff --git a/packages/vuetify/src/composables/__tests__/items.spec.ts b/packages/vuetify/src/composables/__tests__/items.spec.ts
index 41941fe7f27..5d0e3721d12 100644
--- a/packages/vuetify/src/composables/__tests__/items.spec.ts
+++ b/packages/vuetify/src/composables/__tests__/items.spec.ts
@@ -1,5 +1,5 @@
 // Composables
-import { useItems } from '../items'
+import { useItems } from '../list-items'
 
 // Utilities
 import { describe, expect, it } from '@jest/globals'
diff --git a/packages/vuetify/src/composables/filter.ts b/packages/vuetify/src/composables/filter.ts
index 678fd709c38..66ea23680aa 100644
--- a/packages/vuetify/src/composables/filter.ts
+++ b/packages/vuetify/src/composables/filter.ts
@@ -8,7 +8,6 @@ import { computed, ref, unref, watchEffect } from 'vue'
 // Types
 import type { PropType, Ref } from 'vue'
 import type { MaybeRef } from '@/util'
-import type { InternalItem } from './items'
 
 /**
  * - match without highlight
@@ -49,7 +48,7 @@ export const makeFilterProps = propsFactory({
 }, 'filter')
 
 export function filterItems (
-  items: InternalItem[],
+  items: any[],
   query: string,
   options?: {
     customKeyFilter?: FilterKeyFunctions
@@ -126,12 +125,12 @@ export function filterItems (
   return array
 }
 
-export function useFilter <T extends InternalItem> (
+export function useFilter <T extends { value: unknown }> (
   props: FilterProps,
   items: MaybeRef<T[]>,
   query: Ref<string | undefined>,
   options?: {
-    filterKeys?: MaybeRef<FilterKeys>
+    transform?: (item: T) => any
   }
 ) {
   const strQuery = computed(() => (
@@ -141,26 +140,28 @@ export function useFilter <T extends InternalItem> (
 
   const filteredItems: Ref<T[]> = ref([])
   const filteredMatches: Ref<Map<unknown, Record<string, FilterMatch>>> = ref(new Map())
+  const transformedItems = computed(() => options?.transform ? unref(items).map(options?.transform) : unref(items))
 
   watchEffect(() => {
     filteredItems.value = []
     filteredMatches.value = new Map()
 
-    const transformedItems = unref(items)
     const results = filterItems(
-      transformedItems,
+      transformedItems.value,
       strQuery.value,
       {
         customKeyFilter: props.customKeyFilter,
         default: props.customFilter,
-        filterKeys: unref(options?.filterKeys) ?? props.filterKeys,
+        filterKeys: props.filterKeys,
         filterMode: props.filterMode,
         noFilter: props.noFilter,
       },
     )
 
+    const originalItems = unref(items)
+
     results.forEach(({ index, matches }) => {
-      const item = transformedItems[index]
+      const item = originalItems[index]
       filteredItems.value.push(item)
       filteredMatches.value.set(item.value, matches)
     })
diff --git a/packages/vuetify/src/composables/items.ts b/packages/vuetify/src/composables/list-items.ts
similarity index 79%
rename from packages/vuetify/src/composables/items.ts
rename to packages/vuetify/src/composables/list-items.ts
index d1721c11d0f..1b3486d3374 100644
--- a/packages/vuetify/src/composables/items.ts
+++ b/packages/vuetify/src/composables/list-items.ts
@@ -3,10 +3,10 @@ import { computed } from 'vue'
 import { deepEqual, getPropertyFromItem, pick, propsFactory } from '@/util'
 
 // Types
-import type { PropType } from 'vue'
+import type { PropType, Ref } from 'vue'
 import type { SelectItemKey } from '@/util'
 
-export interface InternalItem<T = any> {
+export interface ListItem<T = any> {
   title: string
   value: any
   props: {
@@ -14,7 +14,7 @@ export interface InternalItem<T = any> {
     title: string
     value: any
   }
-  children?: InternalItem<T>[]
+  children?: ListItem<T>[]
   raw: T
 }
 
@@ -50,9 +50,9 @@ export const makeItemsProps = propsFactory({
     default: 'props',
   },
   returnObject: Boolean,
-}, 'item')
+}, 'list-items')
 
-export function transformItem (props: Omit<ItemProps, 'items'>, item: any) {
+export function transformItem (props: Omit<ItemProps, 'items'>, item: any): ListItem {
   const title = getPropertyFromItem(item, props.itemTitle, item)
   const value = props.returnObject ? item : getPropertyFromItem(item, props.itemValue, title)
   const children = getPropertyFromItem(item, props.itemChildren)
@@ -80,7 +80,7 @@ export function transformItem (props: Omit<ItemProps, 'items'>, item: any) {
 }
 
 export function transformItems (props: Omit<ItemProps, 'items'>, items: ItemProps['items']) {
-  const array: InternalItem[] = []
+  const array: ListItem[] = []
 
   for (const item of items) {
     array.push(transformItem(props, item))
@@ -92,17 +92,21 @@ export function transformItems (props: Omit<ItemProps, 'items'>, items: ItemProp
 export function useItems (props: ItemProps) {
   const items = computed(() => transformItems(props, props.items))
 
-  function transformIn (value: any[]): InternalItem[] {
+  return useTransformItems(items, value => transformItem(props, value))
+}
+
+export function useTransformItems <T extends { value: unknown }> (items: Ref<T[]>, transform: (value: unknown) => T) {
+  function transformIn (value: any[]): T[] {
     return value.map(v => {
       const existingItem = items.value.find(item => deepEqual(v, item.value))
       // Nullish existingItem means value is a custom input value from combobox
-      // In this case, use transformItem to create an InternalItem based on value
-      return existingItem ?? transformItem(props, v)
+      // In this case, use transformItem to create an { value: unknown } based on value
+      return existingItem ?? transform(v)
     })
   }
 
-  function transformOut (value: InternalItem[]) {
-    return value.map(({ props }) => props.value)
+  function transformOut (value: T[]) {
+    return value.map(({ value }) => value)
   }
 
   return { items, transformIn, transformOut }
diff --git a/packages/vuetify/src/labs/VDataIterator/VDataIterator.tsx b/packages/vuetify/src/labs/VDataIterator/VDataIterator.tsx
new file mode 100644
index 00000000000..ebf0b1de07f
--- /dev/null
+++ b/packages/vuetify/src/labs/VDataIterator/VDataIterator.tsx
@@ -0,0 +1,170 @@
+// Composables
+import { makeDataIteratorItemProps, useDataIteratorItems } from './composables/items'
+import { makeComponentProps } from '@/composables/component'
+import { makeFilterProps, useFilter } from '@/composables/filter'
+import { makeTagProps } from '@/composables/tag'
+import { useProxiedModel } from '@/composables/proxiedModel'
+
+import { createPagination, makeDataTablePaginateProps, providePagination, usePaginatedItems } from '@/labs/VDataTable/composables/paginate'
+import { createSort, makeDataTableSortProps, provideSort, useSortedItems } from '@/labs/VDataTable/composables/sort'
+import { makeDataTableExpandProps, provideExpanded } from '@/labs/VDataTable/composables/expand'
+import { makeDataTableGroupProps, provideGroupBy, useGroupedItems } from '@/labs/VDataTable/composables/group'
+import { makeDataTableSelectProps, provideSelection } from '@/labs/VDataTable/composables/select'
+import { useOptions } from '@/labs/VDataTable/composables/options'
+
+// Utilities
+import { computed, toRef } from 'vue'
+import { genericComponent, propsFactory, useRender } from '@/util'
+
+// Types
+import type { DataIteratorItem } from './composables/items'
+import type { Group } from '@/labs/VDataTable/composables/group'
+import type { SortItem } from '@/labs/VDataTable/composables/sort'
+
+type VDataIteratorSlotProps = {
+  page: number
+  itemsPerPage: number
+  sortBy: readonly SortItem[]
+  pageCount: number
+  toggleSort: ReturnType<typeof provideSort>['toggleSort']
+  prevPage: ReturnType<typeof providePagination>['prevPage']
+  nextPage: ReturnType<typeof providePagination>['nextPage']
+  setPage: ReturnType<typeof providePagination>['setPage']
+  setItemsPerPage: ReturnType<typeof providePagination>['setItemsPerPage']
+  isSelected: ReturnType<typeof provideSelection>['isSelected']
+  select: ReturnType<typeof provideSelection>['select']
+  selectAll: ReturnType<typeof provideSelection>['selectAll']
+  toggleSelect: ReturnType<typeof provideSelection>['toggleSelect']
+  isExpanded: ReturnType<typeof provideExpanded>['isExpanded']
+  toggleExpand: ReturnType<typeof provideExpanded>['toggleExpand']
+  isGroupOpen: ReturnType<typeof provideGroupBy>['isGroupOpen']
+  toggleGroup: ReturnType<typeof provideGroupBy>['toggleGroup']
+  items: readonly DataIteratorItem[]
+  groupedItems: readonly (DataIteratorItem | Group<DataIteratorItem>)[]
+}
+
+export type VDataIteratorSlots = {
+  default: [VDataIteratorSlotProps]
+  header: [VDataIteratorSlotProps]
+  footer: [VDataIteratorSlotProps]
+  'no-data': []
+}
+
+export const makeVDataIteratorProps = propsFactory({
+  search: String,
+  loading: Boolean,
+
+  ...makeComponentProps(),
+  ...makeDataIteratorItemProps(),
+  ...makeDataTableSelectProps(),
+  ...makeDataTableSortProps(),
+  ...makeDataTablePaginateProps({ itemsPerPage: 5 }),
+  ...makeDataTableExpandProps(),
+  ...makeDataTableGroupProps(),
+  ...makeFilterProps(),
+  ...makeTagProps(),
+}, 'v-data-iterator')
+
+export const VDataIterator = genericComponent<VDataIteratorSlots>()({
+  name: 'VDataIterator',
+
+  props: makeVDataIteratorProps(),
+
+  emits: {
+    'update:modelValue': (value: any[]) => true,
+    'update:groupBy': (value: any) => true,
+    'update:page': (value: number) => true,
+    'update:itemsPerPage': (value: number) => true,
+    'update:sortBy': (value: any) => true,
+    'update:options': (value: any) => true,
+    'update:expanded': (value: any) => true,
+  },
+
+  setup (props, { slots }) {
+    const groupBy = useProxiedModel(props, 'groupBy')
+    const search = toRef(props, 'search')
+
+    const { items } = useDataIteratorItems(props)
+    const { filteredItems } = useFilter(props, items, search, { transform: item => item.raw })
+
+    const { sortBy, multiSort, mustSort } = createSort(props)
+    const { page, itemsPerPage } = createPagination(props)
+
+    const { toggleSort } = provideSort({ sortBy, multiSort, mustSort, page })
+    const { sortByWithGroups, opened, extractRows, isGroupOpen, toggleGroup } = provideGroupBy({ groupBy, sortBy })
+
+    const { sortedItems } = useSortedItems(props, filteredItems, sortByWithGroups)
+    const { flatItems } = useGroupedItems(sortedItems, groupBy, opened)
+
+    const itemsLength = computed(() => flatItems.value.length)
+
+    const {
+      startIndex,
+      stopIndex,
+      pageCount,
+      prevPage,
+      nextPage,
+      setItemsPerPage,
+      setPage,
+    } = providePagination({ page, itemsPerPage, itemsLength })
+    const { paginatedItems } = usePaginatedItems({ items: flatItems, startIndex, stopIndex, itemsPerPage })
+
+    const paginatedItemsWithoutGroups = computed(() => extractRows(paginatedItems.value))
+
+    const { isSelected, select, selectAll, toggleSelect } = provideSelection(props, paginatedItemsWithoutGroups)
+    const { isExpanded, toggleExpand } = provideExpanded(props)
+
+    useOptions({
+      page,
+      itemsPerPage,
+      sortBy,
+      groupBy,
+      search,
+    })
+
+    const slotProps = computed(() => ({
+      page: page.value,
+      itemsPerPage: itemsPerPage.value,
+      sortBy: sortBy.value,
+      pageCount: pageCount.value,
+      toggleSort,
+      prevPage,
+      nextPage,
+      setPage,
+      setItemsPerPage,
+      isSelected,
+      select,
+      selectAll,
+      toggleSelect,
+      isExpanded,
+      toggleExpand,
+      isGroupOpen,
+      toggleGroup,
+      items: paginatedItems.value,
+      groupedItems: flatItems.value,
+    }))
+
+    useRender(() => (
+      <props.tag
+        class={[
+          'v-data-iterator',
+          props.class,
+        ]}
+        style={ props.style }
+      >
+        { slots.header?.(slotProps.value) }
+
+        { !paginatedItems.value.length
+          ? slots['no-data']?.()
+          : slots.default?.(slotProps.value)
+        }
+
+        { slots.footer?.(slotProps.value) }
+      </props.tag>
+    ))
+
+    return {}
+  },
+})
+
+export type VDataIterator = InstanceType<typeof VDataIterator>
diff --git a/packages/vuetify/src/labs/VDataIterator/__tests__/VDataIterator.spec.cy.tsx b/packages/vuetify/src/labs/VDataIterator/__tests__/VDataIterator.spec.cy.tsx
new file mode 100644
index 00000000000..c4815cf80ba
--- /dev/null
+++ b/packages/vuetify/src/labs/VDataIterator/__tests__/VDataIterator.spec.cy.tsx
@@ -0,0 +1,105 @@
+/// <reference types="../../../../types/cypress" />
+
+import { Application } from '../../../../cypress/templates'
+import { VDataIterator } from '..'
+
+const DESSERT_ITEMS = [
+  {
+    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%',
+  },
+]
+
+describe('VDataIterator', () => {
+  it('should render default slot', () => {
+    cy.mount(() => (
+      <Application>
+        <VDataIterator items={ DESSERT_ITEMS }>
+          {{
+            default: ({ items }) => items.map(item => (
+              <div class="dessert-item">{ item.raw.name }</div>
+            )),
+          }}
+        </VDataIterator>
+      </Application>
+    ))
+
+    cy.get('.dessert-item').should('have.length', 5)
+  })
+})
diff --git a/packages/vuetify/src/labs/VDataIterator/composables/items.ts b/packages/vuetify/src/labs/VDataIterator/composables/items.ts
new file mode 100644
index 00000000000..d9848db9322
--- /dev/null
+++ b/packages/vuetify/src/labs/VDataIterator/composables/items.ts
@@ -0,0 +1,63 @@
+// Utilities
+import { computed } from 'vue'
+import { getPropertyFromItem, propsFactory } from '@/util'
+
+// Types
+import type { GroupableItem } from '@/labs/VDataTable/composables/group'
+import type { PropType } from 'vue'
+import type { SelectItemKey } from '@/util'
+
+export interface DataIteratorItemProps {
+  items: any[]
+  itemValue: SelectItemKey
+  returnObject: boolean
+}
+
+export interface DataIteratorItem<T = any> extends GroupableItem<T> {
+  value: unknown
+}
+
+// Composables
+export const makeDataIteratorItemProps = propsFactory({
+  items: {
+    type: Array as PropType<DataIteratorItemProps['items']>,
+    default: () => ([]),
+  },
+  itemValue: {
+    type: [String, Array, Function] as PropType<SelectItemKey>,
+    default: 'value',
+  },
+  returnObject: Boolean,
+}, 'v-data-iterator-item')
+
+export function transformItem (
+  props: Omit<DataIteratorItemProps, 'items'>,
+  item: any
+): DataIteratorItem {
+  const value = props.returnObject ? item : getPropertyFromItem(item, props.itemValue)
+
+  return {
+    type: 'item',
+    value,
+    raw: item,
+  }
+}
+
+export function transformItems (
+  props: Omit<DataIteratorItemProps, 'items'>,
+  items: DataIteratorItemProps['items']
+) {
+  const array: DataIteratorItem[] = []
+
+  for (const item of items) {
+    array.push(transformItem(props, item))
+  }
+
+  return array
+}
+
+export function useDataIteratorItems (props: DataIteratorItemProps) {
+  const items = computed(() => transformItems(props, props.items))
+
+  return { items }
+}
diff --git a/packages/vuetify/src/labs/VDataIterator/index.ts b/packages/vuetify/src/labs/VDataIterator/index.ts
new file mode 100644
index 00000000000..ea84538bbe7
--- /dev/null
+++ b/packages/vuetify/src/labs/VDataIterator/index.ts
@@ -0,0 +1 @@
+export { VDataIterator } from './VDataIterator'
diff --git a/packages/vuetify/src/labs/VDataTable/VDataTable.tsx b/packages/vuetify/src/labs/VDataTable/VDataTable.tsx
index e542b3c1489..af353cbd381 100644
--- a/packages/vuetify/src/labs/VDataTable/VDataTable.tsx
+++ b/packages/vuetify/src/labs/VDataTable/VDataTable.tsx
@@ -25,7 +25,8 @@ import { genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
 import type { UnwrapRef } from 'vue'
-import type { DataTableItem, InternalDataTableHeader, InternalDataTableItem } from './types'
+import type { Group } from './composables/group'
+import type { DataTableItem, InternalDataTableHeader } from './types'
 import type { VDataTableRowsSlots } from './VDataTableRows'
 import type { VDataTableHeadersSlots } from './VDataTableHeaders'
 
@@ -46,8 +47,8 @@ export type VDataTableSlotProps = {
   toggleExpand: ReturnType<typeof provideExpanded>['toggleExpand']
   isGroupOpen: ReturnType<typeof provideGroupBy>['isGroupOpen']
   toggleGroup: ReturnType<typeof provideGroupBy>['toggleGroup']
-  items: DataTableItem[]
-  groupedItems: InternalDataTableItem[]
+  items: readonly DataTableItem[]
+  groupedItems: readonly (DataTableItem | Group<DataTableItem>)[]
   columns: InternalDataTableHeader[]
   headers: InternalDataTableHeader[][]
 }
@@ -115,14 +116,13 @@ export const VDataTable = genericComponent<VDataTableSlots>()({
 
     const { items } = useDataTableItems(props, columns)
 
-    const filterKeys = computed(() => columns.value.map(c => 'columns.' + c.key))
     const search = toRef(props, 'search')
-    const { filteredItems } = useFilter<DataTableItem>(props, items, search, { filterKeys })
+    const { filteredItems } = useFilter(props, items, search, { transform: item => item.columns })
 
     const { toggleSort } = provideSort({ sortBy, multiSort, mustSort, page })
     const { sortByWithGroups, opened, extractRows, isGroupOpen, toggleGroup } = provideGroupBy({ groupBy, sortBy })
 
-    const { sortedItems } = useSortedItems(filteredItems, sortByWithGroups, columns)
+    const { sortedItems } = useSortedItems(props, filteredItems, sortByWithGroups)
     const { flatItems } = useGroupedItems(sortedItems, groupBy, opened)
     const itemsLength = computed(() => flatItems.value.length)
 
diff --git a/packages/vuetify/src/labs/VDataTable/VDataTableGroupHeaderRow.tsx b/packages/vuetify/src/labs/VDataTable/VDataTableGroupHeaderRow.tsx
index 4d5b67d1a82..2987ef4c1cd 100644
--- a/packages/vuetify/src/labs/VDataTable/VDataTableGroupHeaderRow.tsx
+++ b/packages/vuetify/src/labs/VDataTable/VDataTableGroupHeaderRow.tsx
@@ -14,16 +14,16 @@ import { genericComponent, propsFactory } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
-import type { GroupHeaderItem } from './types'
+import type { Group } from './composables/group'
 
 export type VDataTableGroupHeaderRowSlots = {
-  'data-table-group': [{ item: GroupHeaderItem, count: number, props: Record<string, unknown> }]
+  'data-table-group': [{ item: Group, count: number, props: Record<string, unknown> }]
   'data-table-select': [{ props: Record<string, unknown> }]
 }
 
 export const makeVDataTableGroupHeaderRowProps = propsFactory({
   item: {
-    type: Object as PropType<GroupHeaderItem>,
+    type: Object as PropType<Group>,
     required: true,
   },
 }, 'v-data-table-group-header-row')
diff --git a/packages/vuetify/src/labs/VDataTable/VDataTableRows.tsx b/packages/vuetify/src/labs/VDataTable/VDataTableRows.tsx
index 3a6732ba4bb..2c20b929f07 100644
--- a/packages/vuetify/src/labs/VDataTable/VDataTableRows.tsx
+++ b/packages/vuetify/src/labs/VDataTable/VDataTableRows.tsx
@@ -13,29 +13,32 @@ import { useGroupBy } from './composables/group'
 import { genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
-import type { DataTableItem, GroupHeaderItem, InternalDataTableHeader, InternalDataTableItem } from './types'
 import type { PropType } from 'vue'
+import type { Group, provideGroupBy } from './composables/group'
+import type { provideExpanded } from './composables/expand'
+import type { provideSelection } from './composables/select'
+import type { DataTableItem, InternalDataTableHeader } from './types'
 
 type GroupHeaderSlot = {
   index: number
-  item: GroupHeaderItem
+  item: Group
   columns: InternalDataTableHeader[]
-  isExpanded: (item: DataTableItem) => boolean
-  toggleExpand: (item: DataTableItem) => void
-  isSelected: (items: DataTableItem[]) => boolean
-  toggleSelect: (item: DataTableItem) => void
-  toggleGroup: (group: GroupHeaderItem) => void
-  isGroupOpen: (group: GroupHeaderItem) => boolean
+  isExpanded: ReturnType<typeof provideExpanded>['isExpanded']
+  toggleExpand: ReturnType<typeof provideExpanded>['toggleExpand']
+  isSelected: ReturnType<typeof provideSelection>['isSelected']
+  toggleSelect: ReturnType<typeof provideSelection>['toggleSelect']
+  toggleGroup: ReturnType<typeof provideGroupBy>['toggleGroup']
+  isGroupOpen: ReturnType<typeof provideGroupBy>['toggleGroup']
 }
 
 type ItemSlot = {
   index: number
   item: DataTableItem
   columns: InternalDataTableHeader[]
-  isExpanded: (item: DataTableItem) => boolean
-  toggleExpand: (item: DataTableItem) => void
-  isSelected: (items: DataTableItem[]) => boolean
-  toggleSelect: (item: DataTableItem) => void
+  isExpanded: ReturnType<typeof provideExpanded>['isExpanded']
+  toggleExpand: ReturnType<typeof provideExpanded>['toggleExpand']
+  isSelected: ReturnType<typeof provideSelection>['isSelected']
+  toggleSelect: ReturnType<typeof provideSelection>['toggleSelect']
 }
 
 export type VDataTableRowsSlots = VDataTableGroupHeaderRowSlots & {
@@ -56,7 +59,7 @@ export const makeVDataTableRowsProps = propsFactory({
   },
   hideNoData: Boolean,
   items: {
-    type: Array as PropType<readonly InternalDataTableItem[]>,
+    type: Array as PropType<readonly (DataTableItem | Group)[]>,
     default: () => ([]),
   },
   noDataText: {
@@ -109,7 +112,7 @@ export const VDataTableRows = genericComponent<VDataTableRowsSlots>()({
       return (
         <>
           { props.items.map((item, index) => {
-            if (item.type === 'group-header') {
+            if (item.type === 'group') {
               return slots['group-header'] ? slots['group-header']({
                 index,
                 item,
diff --git a/packages/vuetify/src/labs/VDataTable/VDataTableVirtual.tsx b/packages/vuetify/src/labs/VDataTable/VDataTableVirtual.tsx
index 37b7bf40fa9..e5b598423a0 100644
--- a/packages/vuetify/src/labs/VDataTable/VDataTableVirtual.tsx
+++ b/packages/vuetify/src/labs/VDataTable/VDataTableVirtual.tsx
@@ -4,7 +4,7 @@ import { VDataTableRows } from './VDataTableRows'
 import { VTable } from '@/components/VTable'
 
 // Composables
-import { createGroupBy, provideGroupBy, useGroupedItems } from './composables/group'
+import { createGroupBy, makeDataTableGroupProps, provideGroupBy, useGroupedItems } from './composables/group'
 import { createHeaders } from './composables/headers'
 import { createSort, provideSort, useSortedItems } from './composables/sort'
 import { makeDataTableProps } from './VDataTable'
@@ -36,6 +36,7 @@ export type VDataTableVirtualSlots = VDataTableRowsSlots & VDataTableHeadersSlot
 
 export const makeVDataTableVirtualProps = propsFactory({
   ...makeDataTableProps(),
+  ...makeDataTableGroupProps(),
   ...makeDataTableVirtualProps(),
   ...makeFilterProps(),
 }, 'v-data-table-virtual')
@@ -65,14 +66,13 @@ export const VDataTableVirtual = genericComponent<VDataTableVirtualSlots>()({
     })
     const { items } = useDataTableItems(props, columns)
 
-    const filterKeys = computed(() => columns.value.map(c => 'columns.' + c.key))
     const search = toRef(props, 'search')
-    const { filteredItems } = useFilter<DataTableItem>(props, items, search, { filterKeys })
+    const { filteredItems } = useFilter<DataTableItem>(props, items, search, { transform: item => item.columns })
 
     const { toggleSort } = provideSort({ sortBy, multiSort, mustSort })
     const { sortByWithGroups, opened, extractRows, isGroupOpen, toggleGroup } = provideGroupBy({ groupBy, sortBy })
 
-    const { sortedItems } = useSortedItems(filteredItems, sortByWithGroups, columns)
+    const { sortedItems } = useSortedItems(props, filteredItems, sortByWithGroups)
     const { flatItems } = useGroupedItems(sortedItems, groupBy, opened)
 
     const allRows = computed(() => extractRows(flatItems.value))
diff --git a/packages/vuetify/src/labs/VDataTable/__tests__/sort.spec.ts b/packages/vuetify/src/labs/VDataTable/__tests__/sort.spec.ts
index fe6b3e6adcf..40806183ff3 100644
--- a/packages/vuetify/src/labs/VDataTable/__tests__/sort.spec.ts
+++ b/packages/vuetify/src/labs/VDataTable/__tests__/sort.spec.ts
@@ -2,7 +2,7 @@ import { sortItems } from '../composables/sort'
 
 // Utilities
 import { describe, expect, it } from '@jest/globals'
-import { transformItems } from '@/composables/items'
+import { transformItems } from '@/composables/list-items'
 
 describe('VDataTable - sorting', () => {
   it('should sort items by single column', () => {
diff --git a/packages/vuetify/src/labs/VDataTable/composables/group.ts b/packages/vuetify/src/labs/VDataTable/composables/group.ts
index 1f2351824a8..f10bdad42bc 100644
--- a/packages/vuetify/src/labs/VDataTable/composables/group.ts
+++ b/packages/vuetify/src/labs/VDataTable/composables/group.ts
@@ -1,12 +1,28 @@
+// Composables
+import { useProxiedModel } from '@/composables/proxiedModel'
+
 // 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 { DataTableItem } from '../types'
 import type { SortItem } from './sort'
-import { useProxiedModel } from '@/composables/proxiedModel'
+
+export interface GroupableItem<T = any> {
+  type: 'item'
+  raw: T
+}
+
+export interface Group<T = any> {
+  type: 'group'
+  depth: number
+  id: string
+  key: string
+  value: any
+  items: readonly (T | Group<T>)[]
+}
 
 export const makeDataTableGroupProps = propsFactory({
   groupBy: {
@@ -17,11 +33,11 @@ export const makeDataTableGroupProps = propsFactory({
 
 const VDataTableGroupSymbol: InjectionKey<{
   opened: Ref<Set<string>>
-  toggleGroup: (group: GroupHeaderItem) => void
-  isGroupOpen: (group: GroupHeaderItem) => boolean
+  toggleGroup: (group: Group) => void
+  isGroupOpen: (group: Group) => boolean
   sortByWithGroups: Ref<SortItem[]>
   groupBy: Ref<readonly SortItem[]>
-  extractRows: (items: (DataTableItem | GroupHeaderItem)[]) => DataTableItem[]
+  extractRows: (items: (DataTableItem | Group<DataTableItem>)[]) => DataTableItem[]
 }> = Symbol.for('vuetify:data-table-group')
 
 type GroupProps = {
@@ -46,11 +62,11 @@ export function provideGroupBy (options: { groupBy: Ref<readonly SortItem[]>, so
     })).concat(sortBy.value)
   })
 
-  function isGroupOpen (group: GroupHeaderItem) {
+  function isGroupOpen (group: Group) {
     return opened.value.has(group.id)
   }
 
-  function toggleGroup (group: GroupHeaderItem) {
+  function toggleGroup (group: Group) {
     const newOpened = new Set(opened.value)
     if (!isGroupOpen(group)) newOpened.add(group.id)
     else newOpened.delete(group.id)
@@ -58,20 +74,21 @@ export function provideGroupBy (options: { groupBy: Ref<readonly SortItem[]>, so
     opened.value = newOpened
   }
 
-  function extractRows (items: (DataTableItem | GroupHeaderItem)[]) {
-    function dive (group: GroupHeaderItem): DataTableItem[] {
+  function extractRows <T extends GroupableItem> (items: readonly (T | Group<T>)[]) {
+    function dive (group: Group<T>): T[] {
       const arr = []
 
       for (const item of group.items) {
-        if (item.type === 'item') arr.push(item)
-        else {
+        if ('type' in item && item.type === 'group') {
           arr.push(...dive(item))
+        } else {
+          arr.push(item as T)
         }
       }
 
       return arr
     }
-    return dive({ type: 'group-header', items, id: 'dummy', key: 'dummy', value: 'dummy', depth: 0 })
+    return dive({ type: 'group', items, id: 'dummy', key: 'dummy', value: 'dummy', depth: 0 })
   }
 
   // onBeforeMount(() => {
@@ -95,10 +112,10 @@ export function useGroupBy () {
   return data
 }
 
-function groupItemsByProperty (items: readonly DataTableItem[], groupBy: string) {
+function groupItemsByProperty <T extends GroupableItem> (items: readonly T[], groupBy: string) {
   if (!items.length) return []
 
-  const groups = new Map<any, DataTableItem[]>()
+  const groups = new Map<any, T[]>()
   for (const item of items) {
     const value = getObjectValueByPath(item.raw, groupBy)
 
@@ -111,11 +128,11 @@ function groupItemsByProperty (items: readonly DataTableItem[], groupBy: string)
   return groups
 }
 
-function groupItems (items: readonly DataTableItem[], groupBy: string[], depth = 0, prefix = 'root') {
+function groupItems <T extends GroupableItem> (items: readonly T[], groupBy: readonly string[], depth = 0, prefix = 'root') {
   if (!groupBy.length) return []
 
   const groupedItems = groupItemsByProperty(items, groupBy[0])
-  const groups: GroupHeaderItem[] = []
+  const groups: Group<T>[] = []
 
   const rest = groupBy.slice(1)
   groupedItems.forEach((items, value) => {
@@ -127,19 +144,19 @@ function groupItems (items: readonly DataTableItem[], groupBy: string[], depth =
       key,
       value,
       items: rest.length ? groupItems(items, rest, depth + 1, id) : items,
-      type: 'group-header',
+      type: 'group',
     })
   })
 
   return groups
 }
 
-function flattenItems (items: readonly (DataTableItem | GroupHeaderItem)[], opened: Set<string>) {
-  const flatItems: (DataTableItem | GroupHeaderItem)[] = []
+function flattenItems <T extends GroupableItem> (items: readonly (T | Group<T>)[], opened: Set<string>): readonly (T | Group<T>)[] {
+  const flatItems: (T | Group<T>)[] = []
 
   for (const item of items) {
     // TODO: make this better
-    if (item.type === 'group-header') {
+    if ('type' in item && item.type === 'group') {
       if (item.value != null) {
         flatItems.push(item)
       }
@@ -155,7 +172,11 @@ function flattenItems (items: readonly (DataTableItem | GroupHeaderItem)[], open
   return flatItems
 }
 
-export function useGroupedItems (items: Ref<DataTableItem[]>, groupBy: Ref<readonly SortItem[]>, opened: Ref<Set<string>>) {
+export function useGroupedItems <T extends GroupableItem> (
+  items: Ref<T[]>,
+  groupBy: Ref<readonly SortItem[]>,
+  opened: Ref<Set<string>>
+) {
   const flatItems = computed(() => {
     if (!groupBy.value.length) return items.value
 
diff --git a/packages/vuetify/src/labs/VDataTable/composables/items.ts b/packages/vuetify/src/labs/VDataTable/composables/items.ts
index 371eca44af1..dc154d0d6e3 100644
--- a/packages/vuetify/src/labs/VDataTable/composables/items.ts
+++ b/packages/vuetify/src/labs/VDataTable/composables/items.ts
@@ -1,36 +1,66 @@
-// 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 { PropType, Ref } from 'vue'
+import type { SelectItemKey } from '@/util'
 import type { DataTableItem, InternalDataTableHeader } from '../types'
 
+export interface DataTableItemProps {
+  items: any[]
+  itemValue: SelectItemKey
+  returnObject: boolean
+}
+
+// Composables
 export const makeDataTableItemProps = propsFactory({
-  // TODO: Worth it to make specific datatable implementation
-  // without title, children?
-  ...makeItemsProps({
-    itemValue: 'id',
-  }),
+  items: {
+    type: Array as PropType<DataTableItemProps['items']>,
+    default: () => ([]),
+  },
+  itemValue: {
+    type: [String, Array, Function] as PropType<SelectItemKey>,
+    default: 'value',
+  },
+  returnObject: Boolean,
 }, '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 }
+export function transformItem (
+  props: Omit<DataTableItemProps, 'items'>,
+  item: any,
+  columns: InternalDataTableHeader[]
+): DataTableItem {
+  const value = props.returnObject ? item : getPropertyFromItem(item, props.itemValue)
+  const itemColumns = columns.reduce((obj, column) => {
+    obj[column.key] = getPropertyFromItem(item, column.value ?? column.key)
+    return obj
+  }, {} as Record<string, unknown>)
+
+  return {
+    type: 'item',
+    value,
+    columns: itemColumns,
+    raw: item,
+  }
+}
+
+export function transformItems (
+  props: Omit<DataTableItemProps, 'items'>,
+  items: DataTableItemProps['items'],
+  columns: InternalDataTableHeader[]
+) {
+  const array: DataTableItem[] = []
+
+  for (const item of items) {
+    array.push(transformItem(props, item, columns))
+  }
+
+  return array
+}
+
+export function useDataTableItems (props: DataTableItemProps, columns: Ref<InternalDataTableHeader[]>) {
+  const items = computed(() => transformItems(props, props.items, columns.value))
+
+  return { items }
 }
diff --git a/packages/vuetify/src/labs/VDataTable/composables/paginate.ts b/packages/vuetify/src/labs/VDataTable/composables/paginate.ts
index 75fbcc5730a..043e71a640d 100644
--- a/packages/vuetify/src/labs/VDataTable/composables/paginate.ts
+++ b/packages/vuetify/src/labs/VDataTable/composables/paginate.ts
@@ -3,7 +3,7 @@ import { useProxiedModel } from '@/composables/proxiedModel'
 
 // Utilities
 import { computed, inject, provide, watchEffect } from 'vue'
-import { propsFactory } from '@/util'
+import { clamp, propsFactory } from '@/util'
 
 // Types
 import type { InjectionKey, Ref } from 'vue'
@@ -22,11 +22,14 @@ export const makeDataTablePaginateProps = propsFactory({
 const VDataTablePaginationSymbol: InjectionKey<{
   page: Ref<number>
   itemsPerPage: Ref<number>
-  setItemsPerPage: (value: number) => void
   startIndex: Ref<number>
   stopIndex: Ref<number>
   pageCount: Ref<number>
   itemsLength: Ref<number>
+  prevPage: () => void
+  nextPage: () => void
+  setPage: (value: number) => void
+  setItemsPerPage: (value: number) => void
 }> = Symbol.for('vuetify:data-table-pagination')
 
 type PaginationProps = {
@@ -79,7 +82,19 @@ export function providePagination (options: {
     page.value = 1
   }
 
-  const data = { page, itemsPerPage, itemsLength, startIndex, stopIndex, pageCount, setItemsPerPage }
+  function nextPage () {
+    page.value = clamp(page.value + 1, 1, pageCount.value)
+  }
+
+  function prevPage () {
+    page.value = clamp(page.value - 1, 1, pageCount.value)
+  }
+
+  function setPage (value: number) {
+    page.value = clamp(value, 1, pageCount.value)
+  }
+
+  const data = { page, itemsPerPage, startIndex, stopIndex, pageCount, itemsLength, nextPage, prevPage, setPage, setItemsPerPage }
 
   provide(VDataTablePaginationSymbol, data)
 
@@ -95,7 +110,7 @@ export function usePagination () {
 }
 
 export function usePaginatedItems (options: {
-  items: Ref<any[]>
+  items: Ref<readonly any[]>
   startIndex: Ref<number>
   stopIndex: Ref<number>
   itemsPerPage: Ref<number>
diff --git a/packages/vuetify/src/labs/VDataTable/composables/select.ts b/packages/vuetify/src/labs/VDataTable/composables/select.ts
index a27d61d7801..709260aa2cd 100644
--- a/packages/vuetify/src/labs/VDataTable/composables/select.ts
+++ b/packages/vuetify/src/labs/VDataTable/composables/select.ts
@@ -3,11 +3,11 @@ import { useProxiedModel } from '@/composables/proxiedModel'
 
 // Utilities
 import { computed, inject, provide } from 'vue'
-import { propsFactory } from '@/util'
+import { propsFactory, wrapInArray } from '@/util'
 
 // Types
 import type { InjectionKey, PropType, Ref } from 'vue'
-import type { ItemProps } from '@/composables/items'
+import type { DataTableItemProps } from './items'
 import type { DataTableItem } from '../types'
 
 export const makeDataTableSelectProps = propsFactory({
@@ -19,36 +19,36 @@ export const makeDataTableSelectProps = propsFactory({
 }, 'v-data-table-select')
 
 export const VDataTableSelectionSymbol: InjectionKey<{
-  toggleSelect: (item: DataTableItem) => void
-  select: (items: DataTableItem[], value: boolean) => void
+  toggleSelect: (item: any) => void
+  select: (items: any[], value: boolean) => void
   selectAll: (value: boolean) => void
-  isSelected: (items: DataTableItem[]) => boolean
-  isSomeSelected: (items: DataTableItem[]) => boolean
+  isSelected: (items: any[]) => boolean
+  isSomeSelected: (items: any[]) => boolean
   someSelected: Ref<boolean>
   allSelected: Ref<boolean>
 }> = Symbol.for('vuetify:data-table-selection')
 
-type SelectionProps = Pick<ItemProps, 'itemValue'> & {
+type SelectionProps = Pick<DataTableItemProps, 'itemValue'> & {
   modelValue: readonly any[]
   'onUpdate:modelValue': ((value: any[]) => void) | undefined
 }
 
-export function provideSelection (props: SelectionProps, allItems: Ref<DataTableItem[]>) {
+export function provideSelection <T extends DataTableItem> (props: SelectionProps, allItems: Ref<T[]>) {
   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 isSelected (items: T | T[]) {
+    return wrapInArray(items).every(item => selected.value.has(item.value))
   }
 
-  function isSomeSelected (items: DataTableItem[]) {
-    return items.some(item => selected.value.has(item.value))
+  function isSomeSelected (items: T | T[]) {
+    return wrapInArray(items).some(item => selected.value.has(item.value))
   }
 
-  function select (items: DataTableItem[], value: boolean) {
+  function select (items: T[], value: boolean) {
     const newSelected = new Set(selected.value)
 
     for (const item of items) {
@@ -59,7 +59,7 @@ export function provideSelection (props: SelectionProps, allItems: Ref<DataTable
     selected.value = newSelected
   }
 
-  function toggleSelect (item: DataTableItem) {
+  function toggleSelect (item: T) {
     select([item], !isSelected([item]))
   }
 
diff --git a/packages/vuetify/src/labs/VDataTable/composables/sort.ts b/packages/vuetify/src/labs/VDataTable/composables/sort.ts
index ef568ccd73f..f580fa93b84 100644
--- a/packages/vuetify/src/labs/VDataTable/composables/sort.ts
+++ b/packages/vuetify/src/labs/VDataTable/composables/sort.ts
@@ -1,5 +1,6 @@
 // Composables
 import { useProxiedModel } from '@/composables/proxiedModel'
+import { useLocale } from '@/composables'
 
 // Utilities
 import { computed, inject, provide, toRef } from 'vue'
@@ -7,14 +8,14 @@ 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'
+import type { DataTableCompareFunction, InternalDataTableHeader } from '../types'
 
 export const makeDataTableSortProps = propsFactory({
   sortBy: {
     type: Array as PropType<readonly SortItem[]>,
     default: () => ([]),
   },
+  customKeySort: Object as PropType<Record<string, DataTableCompareFunction>>,
   multiSort: Boolean,
   mustSort: Boolean,
 }, 'v-data-table-sort')
@@ -90,26 +91,22 @@ export function useSort () {
   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
-    }, {})
-  })
-
+export function useSortedItems <T extends Record<string, any>> (
+  props: { customKeySort?: Record<string, DataTableCompareFunction> },
+  items: Ref<T[]>,
+  sortBy: Ref<readonly SortItem[]>,
+) {
+  const locale = useLocale()
   const sortedItems = computed(() => {
     if (!sortBy.value.length) return items.value
 
-    return sortItems(items.value, sortBy.value, 'en', customSorters.value)
+    return sortItems(items.value, sortBy.value, locale.current.value, props.customKeySort)
   })
 
   return { sortedItems }
 }
 
-export function sortItems<T extends InternalItem> (
+export function sortItems<T extends Record<string, any>> (
   items: T[],
   sortByItems: readonly SortItem[],
   locale: string,
@@ -120,7 +117,7 @@ export function sortItems<T extends InternalItem> (
   return [...items].sort((a, b) => {
     for (let i = 0; i < sortByItems.length; i++) {
       const sortKey = sortByItems[i].key
-      const sortOrder = sortByItems[i].order
+      const sortOrder = sortByItems[i].order ?? 'asc'
 
       if (sortOrder === false) continue
 
diff --git a/packages/vuetify/src/labs/VDataTable/composables/virtual.ts b/packages/vuetify/src/labs/VDataTable/composables/virtual.ts
index 7de41742c0d..82a782e1c99 100644
--- a/packages/vuetify/src/labs/VDataTable/composables/virtual.ts
+++ b/packages/vuetify/src/labs/VDataTable/composables/virtual.ts
@@ -25,7 +25,7 @@ const UP = -1
 const DOWN = 1
 
 // TODO: Replace this with composable from v-virtual-scroll
-export function useVirtual (props: VirtualProps, items: Ref<any[]>) {
+export function useVirtual (props: VirtualProps, items: Ref<readonly any[]>) {
   const startIndex = shallowRef(0)
   const itemHeight = computed(() => parseInt(props.itemHeight, 10))
   const visibleItems = computed(() => parseInt(props.visibleItems, 10))
diff --git a/packages/vuetify/src/labs/VDataTable/index.ts b/packages/vuetify/src/labs/VDataTable/index.ts
index b14f08242fa..be3a15cacc5 100644
--- a/packages/vuetify/src/labs/VDataTable/index.ts
+++ b/packages/vuetify/src/labs/VDataTable/index.ts
@@ -1,6 +1,6 @@
 export { VDataTable } from './VDataTable'
+export { VDataTableFooter } from './VDataTableFooter'
 export { VDataTableRows } from './VDataTableRows'
 export { VDataTableRow } from './VDataTableRow'
 export { VDataTableVirtual } from './VDataTableVirtual'
 export { VDataTableServer } from './VDataTableServer'
-export { VDataTableFooter } from './VDataTableFooter'
diff --git a/packages/vuetify/src/labs/VDataTable/types.ts b/packages/vuetify/src/labs/VDataTable/types.ts
index d5c7ceb21fc..22bb338383a 100644
--- a/packages/vuetify/src/labs/VDataTable/types.ts
+++ b/packages/vuetify/src/labs/VDataTable/types.ts
@@ -1,5 +1,5 @@
-import type { InternalItem } from '@/composables/items'
 import type { SelectItemKey } from '@/util'
+import type { GroupableItem } from './composables/group'
 
 export type DataTableCompareFunction<T = any> = (a: T, b: T) => number
 
@@ -24,20 +24,13 @@ export type DataTableHeader = {
 
 export type InternalDataTableHeader = DataTableHeader & {
   sortable: boolean
-
   fixedOffset?: number
   lastFixed?: boolean
 }
 
-export type DataTableItem = InternalItem & { type: 'item', columns: Record<string, any> }
-
-export type GroupHeaderItem = {
-  type: 'group-header'
-  id: string
-  key: string
-  value: string
-  depth: number
-  items: readonly (GroupHeaderItem | DataTableItem)[]
+export interface DataTableItem<T = any> extends GroupableItem<T> {
+  value: any
+  columns: {
+    [key: string]: any
+  }
 }
-
-export type InternalDataTableItem = DataTableItem | GroupHeaderItem
diff --git a/packages/vuetify/src/labs/components.ts b/packages/vuetify/src/labs/components.ts
index 5eb9a16e62e..e5b8ad839a2 100644
--- a/packages/vuetify/src/labs/components.ts
+++ b/packages/vuetify/src/labs/components.ts
@@ -1,4 +1,5 @@
 export * from './VBottomSheet'
+export * from './VDataIterator'
 export * from './VDataTable'
 export * from './VInfiniteScroll'
 export * from './VSkeletonLoader'
diff --git a/packages/vuetify/src/util/helpers.ts b/packages/vuetify/src/util/helpers.ts
index 8e45cc2e809..0c5baaf7f31 100644
--- a/packages/vuetify/src/util/helpers.ts
+++ b/packages/vuetify/src/util/helpers.ts
@@ -256,34 +256,6 @@ export function arrayDiff (a: any[], b: any[]): any[] {
   return diff
 }
 
-interface ItemGroup<T> {
-  name: string
-  items: T[]
-}
-
-export function groupItems<T extends any = any> (
-  items: T[],
-  groupBy: string[],
-  groupDesc: boolean[]
-): ItemGroup<T>[] {
-  const key = groupBy[0]
-  const groups: ItemGroup<T>[] = []
-  let current
-  for (let i = 0; i < items.length; i++) {
-    const item = items[i]
-    const val = getObjectValueByPath(item, key, null)
-    if (current !== val) {
-      current = val
-      groups.push({
-        name: val ?? '',
-        items: [],
-      })
-    }
-    groups[groups.length - 1].items.push(item)
-  }
-  return groups
-}
-
 type IfAny<T, Y, N> = 0 extends (1 & T) ? Y : N;
 export function wrapInArray<T> (
   v: T | null | undefined