From d45bd7ecc21acddfa3c47d0d78936758b99fc8ef Mon Sep 17 00:00:00 2001
From: Albert Kaaman <albert@kaaman.nu>
Date: Fri, 22 Feb 2019 11:20:34 +0100
Subject: [PATCH] refactor: data-table (#5737)

initial rewrite of data-table and data-iterator
---
 .../docs/src/examples/data-tables/crud.vue    | 147 ++--
 .../src/examples/data-tables/customIcons.vue  |  17 +-
 .../docs/src/examples/data-tables/expand.vue  |  52 +-
 .../docs/src/examples/data-tables/footer.vue  |   8 -
 .../src/examples/data-tables/headerCell.vue   |   8 -
 .../src/examples/data-tables/headerless.vue   |  28 +-
 .../docs/src/examples/data-tables/headers.vue |  77 +-
 .../docs/src/examples/data-tables/noData.vue  |   4 +-
 .../src/examples/data-tables/paginate.vue     |  34 +-
 .../src/examples/data-tables/progress.vue     |  10 +-
 .../docs/src/examples/data-tables/search.vue  |  14 +-
 .../docs/src/examples/data-tables/select.vue  |  20 +-
 .../docs/src/examples/data-tables/server.vue  |  27 +-
 .../docs/src/examples/data-tables/sort.vue    |  28 +-
 .../docs/src/examples/data-tables/usage.vue   |  12 +-
 .../components/VCheckbox/VSimpleCheckbox.ts   |  81 ++
 .../vuetify/src/components/VCheckbox/index.js |   3 +-
 .../vuetify/src/components/VData/VData.ts     | 350 ++++++++
 .../src/components/VData/VDataFooter.ts       | 215 +++++
 .../vuetify/src/components/VData/index.ts     |  11 +
 .../components/VDataIterator/VDataIterator.js | 110 ---
 .../components/VDataIterator/VDataIterator.ts | 212 +++++
 .../VDataIterator/{index.js => index.ts}      |   0
 .../src/components/VDataTable/VDataTable.js   | 121 ---
 .../src/components/VDataTable/VDataTable.sass | 293 +++++++
 .../src/components/VDataTable/VDataTable.ts   | 477 ++++++++++
 .../components/VDataTable/VDataTableHeader.ts |  27 +
 .../VDataTable/VDataTableHeaderDesktop.ts     |  92 ++
 .../VDataTable/VDataTableHeaderMobile.ts      |  80 ++
 .../VDataTable/VDataTableVirtual.ts           | 126 +++
 .../vuetify/src/components/VDataTable/VRow.ts |  57 ++
 .../src/components/VDataTable/VRowGroup.ts    |  48 ++
 .../src/components/VDataTable/_mixins.sass    |  56 ++
 .../src/components/VDataTable/_variables.scss |   0
 .../VDataTable/{index.js => index.ts}         |   8 +-
 .../src/components/VDataTable/mixins/body.js  |  77 --
 .../src/components/VDataTable/mixins/foot.js  |  24 -
 .../src/components/VDataTable/mixins/head.js  | 138 ---
 .../components/VDataTable/mixins/header.ts    |  82 ++
 .../components/VDataTable/mixins/progress.js  |  17 -
 packages/vuetify/src/components/index.ts      |   1 +
 packages/vuetify/src/locale/en.ts             |  14 +-
 packages/vuetify/src/mixins/data-iterable.js  | 495 -----------
 .../src/stylus/components/_data-table.styl    | 322 +++++--
 .../src/stylus/components/_tables.styl        | 100 ---
 packages/vuetify/src/util/helpers.ts          |  84 +-
 .../VDataIterator/VDataIterator.spec.js       |   2 +-
 .../__snapshots__/VDataIterator.spec.js.snap  | 814 ------------------
 .../components/VDataTable/VDataTable.spec.js  |   2 +-
 .../__snapshots__/VDataTable.spec.js.snap     | 667 --------------
 .../test/unit/mixins/data-iterable.spec.js    | 126 ---
 51 files changed, 2762 insertions(+), 3056 deletions(-)
 create mode 100644 packages/vuetify/src/components/VCheckbox/VSimpleCheckbox.ts
 create mode 100644 packages/vuetify/src/components/VData/VData.ts
 create mode 100644 packages/vuetify/src/components/VData/VDataFooter.ts
 create mode 100644 packages/vuetify/src/components/VData/index.ts
 delete mode 100644 packages/vuetify/src/components/VDataIterator/VDataIterator.js
 create mode 100644 packages/vuetify/src/components/VDataIterator/VDataIterator.ts
 rename packages/vuetify/src/components/VDataIterator/{index.js => index.ts} (100%)
 delete mode 100644 packages/vuetify/src/components/VDataTable/VDataTable.js
 create mode 100644 packages/vuetify/src/components/VDataTable/VDataTable.sass
 create mode 100644 packages/vuetify/src/components/VDataTable/VDataTable.ts
 create mode 100644 packages/vuetify/src/components/VDataTable/VDataTableHeader.ts
 create mode 100644 packages/vuetify/src/components/VDataTable/VDataTableHeaderDesktop.ts
 create mode 100644 packages/vuetify/src/components/VDataTable/VDataTableHeaderMobile.ts
 create mode 100644 packages/vuetify/src/components/VDataTable/VDataTableVirtual.ts
 create mode 100644 packages/vuetify/src/components/VDataTable/VRow.ts
 create mode 100644 packages/vuetify/src/components/VDataTable/VRowGroup.ts
 create mode 100644 packages/vuetify/src/components/VDataTable/_mixins.sass
 create mode 100644 packages/vuetify/src/components/VDataTable/_variables.scss
 rename packages/vuetify/src/components/VDataTable/{index.js => index.ts} (56%)
 delete mode 100644 packages/vuetify/src/components/VDataTable/mixins/body.js
 delete mode 100644 packages/vuetify/src/components/VDataTable/mixins/foot.js
 delete mode 100644 packages/vuetify/src/components/VDataTable/mixins/head.js
 create mode 100644 packages/vuetify/src/components/VDataTable/mixins/header.ts
 delete mode 100644 packages/vuetify/src/components/VDataTable/mixins/progress.js
 delete mode 100644 packages/vuetify/src/mixins/data-iterable.js
 delete mode 100644 packages/vuetify/src/stylus/components/_tables.styl
 delete mode 100644 packages/vuetify/test/unit/components/VDataIterator/__snapshots__/VDataIterator.spec.js.snap
 delete mode 100644 packages/vuetify/test/unit/components/VDataTable/__snapshots__/VDataTable.spec.js.snap
 delete mode 100644 packages/vuetify/test/unit/mixins/data-iterable.spec.js

diff --git a/packages/docs/src/examples/data-tables/crud.vue b/packages/docs/src/examples/data-tables/crud.vue
index b986d3d480e..f57fbd32768 100644
--- a/packages/docs/src/examples/data-tables/crud.vue
+++ b/packages/docs/src/examples/data-tables/crud.vue
@@ -1,82 +1,75 @@
 <template>
-  <div>
-    <v-toolbar flat color="white">
-      <v-toolbar-title>My CRUD</v-toolbar-title>
-      <v-divider
-        class="mx-2"
-        inset
-        vertical
-      ></v-divider>
-      <v-spacer></v-spacer>
-      <v-dialog v-model="dialog" max-width="500px">
-        <v-btn slot="activator" color="primary" dark class="mb-2">New Item</v-btn>
-        <v-card>
-          <v-card-title>
-            <span class="headline">{{ formTitle }}</span>
-          </v-card-title>
+  <v-data-table
+    :headers="headers"
+    :items="desserts"
+    class="elevation-1"
+  >
+    <template #top>
+      <v-toolbar flat color="white">
+        <v-toolbar-title>My CRUD</v-toolbar-title>
+        <v-divider
+          class="mx-2"
+          inset
+          vertical
+        ></v-divider>
+        <v-spacer></v-spacer>
+        <v-dialog v-model="dialog" max-width="500px">
+          <v-btn slot="activator" color="primary" dark class="mb-2">New Item</v-btn>
+          <v-card>
+            <v-card-title>
+              <span class="headline">{{ formTitle }}</span>
+            </v-card-title>
 
-          <v-card-text>
-            <v-container grid-list-md>
-              <v-layout wrap>
-                <v-flex xs12 sm6 md4>
-                  <v-text-field v-model="editedItem.name" label="Dessert name"></v-text-field>
-                </v-flex>
-                <v-flex xs12 sm6 md4>
-                  <v-text-field v-model="editedItem.calories" label="Calories"></v-text-field>
-                </v-flex>
-                <v-flex xs12 sm6 md4>
-                  <v-text-field v-model="editedItem.fat" label="Fat (g)"></v-text-field>
-                </v-flex>
-                <v-flex xs12 sm6 md4>
-                  <v-text-field v-model="editedItem.carbs" label="Carbs (g)"></v-text-field>
-                </v-flex>
-                <v-flex xs12 sm6 md4>
-                  <v-text-field v-model="editedItem.protein" label="Protein (g)"></v-text-field>
-                </v-flex>
-              </v-layout>
-            </v-container>
-          </v-card-text>
+            <v-card-text>
+              <v-container grid-list-md>
+                <v-layout wrap>
+                  <v-flex xs12 sm6 md4>
+                    <v-text-field v-model="editedItem.name" label="Dessert name"></v-text-field>
+                  </v-flex>
+                  <v-flex xs12 sm6 md4>
+                    <v-text-field v-model="editedItem.calories" label="Calories"></v-text-field>
+                  </v-flex>
+                  <v-flex xs12 sm6 md4>
+                    <v-text-field v-model="editedItem.fat" label="Fat (g)"></v-text-field>
+                  </v-flex>
+                  <v-flex xs12 sm6 md4>
+                    <v-text-field v-model="editedItem.carbs" label="Carbs (g)"></v-text-field>
+                  </v-flex>
+                  <v-flex xs12 sm6 md4>
+                    <v-text-field v-model="editedItem.protein" label="Protein (g)"></v-text-field>
+                  </v-flex>
+                </v-layout>
+              </v-container>
+            </v-card-text>
 
-          <v-card-actions>
-            <v-spacer></v-spacer>
-            <v-btn color="blue darken-1" text @click="close">Cancel</v-btn>
-            <v-btn color="blue darken-1" text @click="save">Save</v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-dialog>
-    </v-toolbar>
-    <v-data-table
-      :headers="headers"
-      :items="desserts"
-      class="elevation-1"
-    >
-      <template slot="items" slot-scope="props">
-        <td>{{ props.item.name }}</td>
-        <td class="text-xs-right">{{ props.item.calories }}</td>
-        <td class="text-xs-right">{{ props.item.fat }}</td>
-        <td class="text-xs-right">{{ props.item.carbs }}</td>
-        <td class="text-xs-right">{{ props.item.protein }}</td>
-        <td class="justify-center layout px-0">
-          <v-icon
-            small
-            class="mr-2"
-            @click="editItem(props.item)"
-          >
-            edit
-          </v-icon>
-          <v-icon
-            small
-            @click="deleteItem(props.item)"
-          >
-            delete
-          </v-icon>
-        </td>
-      </template>
-      <template slot="no-data">
-        <v-btn color="primary" @click="initialize">Reset</v-btn>
-      </template>
-    </v-data-table>
-  </div>
+            <v-card-actions>
+              <v-spacer></v-spacer>
+              <v-btn color="blue darken-1" flat @click="close">Cancel</v-btn>
+              <v-btn color="blue darken-1" flat @click="save">Save</v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-toolbar>
+    </template>
+    <template #item.action="props">
+      <v-icon
+        small
+        class="mr-2"
+        @click="editItem(props.item)"
+      >
+        edit
+      </v-icon>
+      <v-icon
+        small
+        @click="deleteItem(props.item)"
+      >
+        delete
+      </v-icon>
+    </template>
+    <template #no-data>
+      <v-btn color="primary" @click="initialize">Reset</v-btn>
+    </template>
+  </v-data-table>
 </template>
 
 <script>
@@ -94,7 +87,7 @@
         { text: 'Fat (g)', value: 'fat' },
         { text: 'Carbs (g)', value: 'carbs' },
         { text: 'Protein (g)', value: 'protein' },
-        { text: 'Actions', value: 'name', sortable: false }
+        { text: 'Actions', value: 'action', sortable: false }
       ],
       desserts: [],
       editedIndex: -1,
diff --git a/packages/docs/src/examples/data-tables/customIcons.vue b/packages/docs/src/examples/data-tables/customIcons.vue
index 18194076399..f80f5fe31e8 100644
--- a/packages/docs/src/examples/data-tables/customIcons.vue
+++ b/packages/docs/src/examples/data-tables/customIcons.vue
@@ -3,19 +3,10 @@
     :headers="headers"
     :items="desserts"
     class="elevation-1"
-    prev-icon="mdi-menu-left"
-    next-icon="mdi-menu-right"
-    sort-icon="mdi-menu-down"
-  >
-    <template slot="items" slot-scope="props">
-      <td>{{ props.item.name }}</td>
-      <td class="text-xs-right">{{ props.item.calories }}</td>
-      <td class="text-xs-right">{{ props.item.fat }}</td>
-      <td class="text-xs-right">{{ props.item.carbs }}</td>
-      <td class="text-xs-right">{{ props.item.protein }}</td>
-      <td class="text-xs-right">{{ props.item.iron }}</td>
-    </template>
-  </v-data-table>
+    :items-per-page="5"
+    :header-props="{ sortIcon: 'mdi-menu-up' }"
+    :footer-props="{ prevIcon: 'mdi-menu-left', nextIcon: 'mdi-menu-right' }"
+  ></v-data-table>
 </template>
 
 <script>
diff --git a/packages/docs/src/examples/data-tables/expand.vue b/packages/docs/src/examples/data-tables/expand.vue
index f68e8404bdb..7ca569818ef 100644
--- a/packages/docs/src/examples/data-tables/expand.vue
+++ b/packages/docs/src/examples/data-tables/expand.vue
@@ -1,36 +1,26 @@
 <!-- eslint-disable vue/no-unused-vars -->
 <template>
-  <div>
-    <v-toolbar flat color="white">
-      <v-toolbar-title>Expandable Table</v-toolbar-title>
-      <v-spacer></v-spacer>
-      <v-btn color="primary" dark @click="expand = !expand">
-        {{ expand ? 'Close' : 'Keep' }} other rows
-      </v-btn>
-    </v-toolbar>
-    <v-data-table
-      :headers="headers"
-      :items="desserts"
-      :expand="expand"
-      item-key="name"
-    >
-      <template slot="items" slot-scope="props">
-        <tr @click="props.expanded = !props.expanded">
-          <td>{{ props.item.name }}</td>
-          <td class="text-xs-right">{{ props.item.calories }}</td>
-          <td class="text-xs-right">{{ props.item.fat }}</td>
-          <td class="text-xs-right">{{ props.item.carbs }}</td>
-          <td class="text-xs-right">{{ props.item.protein }}</td>
-          <td class="text-xs-right">{{ props.item.iron }}</td>
-        </tr>
-      </template>
-      <template slot="expand" slot-scope="props">
-        <v-card flat>
-          <v-card-text>Peek-a-boo!</v-card-text>
-        </v-card>
-      </template>
-    </v-data-table>
-  </div>
+  <v-data-table
+    :headers="headers"
+    :items="desserts"
+    item-key="name"
+    show-expand
+    :single-expand="expand"
+    class="elevation-1"
+  >
+    <template #top>
+      <v-toolbar flat color="white">
+        <v-toolbar-title>Expandable Table</v-toolbar-title>
+        <v-spacer></v-spacer>
+        <v-btn color="primary" dark @click="expand = !expand">
+          {{ expand ? 'Close' : 'Keep' }} other rows
+        </v-btn>
+      </v-toolbar>
+    </template>
+    <template #item.expanded="{ headers }">
+      <td :colspan="headers.length">Peek-a-boo!</td>
+    </template>
+  </v-data-table>
 </template>
 
 <script>
diff --git a/packages/docs/src/examples/data-tables/footer.vue b/packages/docs/src/examples/data-tables/footer.vue
index 6cce9df6540..4d15b1f5add 100644
--- a/packages/docs/src/examples/data-tables/footer.vue
+++ b/packages/docs/src/examples/data-tables/footer.vue
@@ -4,14 +4,6 @@
     :items="desserts"
     class="elevation-1"
   >
-    <template slot="items" slot-scope="props">
-      <td>{{ props.item.name }}</td>
-      <td class="text-xs-right">{{ props.item.calories }}</td>
-      <td class="text-xs-right">{{ props.item.fat }}</td>
-      <td class="text-xs-right">{{ props.item.carbs }}</td>
-      <td class="text-xs-right">{{ props.item.protein }}</td>
-      <td class="text-xs-right">{{ props.item.iron }}</td>
-    </template>
     <template slot="footer">
       <td :colspan="headers.length">
         <strong>This is an extra footer</strong>
diff --git a/packages/docs/src/examples/data-tables/headerCell.vue b/packages/docs/src/examples/data-tables/headerCell.vue
index 75075d847c0..51f29939664 100644
--- a/packages/docs/src/examples/data-tables/headerCell.vue
+++ b/packages/docs/src/examples/data-tables/headerCell.vue
@@ -14,14 +14,6 @@
         </span>
       </v-tooltip>
     </template>
-    <template slot="items" slot-scope="props">
-      <td>{{ props.item.name }}</td>
-      <td class="text-xs-right">{{ props.item.calories }}</td>
-      <td class="text-xs-right">{{ props.item.fat }}</td>
-      <td class="text-xs-right">{{ props.item.carbs }}</td>
-      <td class="text-xs-right">{{ props.item.protein }}</td>
-      <td class="text-xs-right">{{ props.item.iron }}</td>
-    </template>
   </v-data-table>
 </template>
 
diff --git a/packages/docs/src/examples/data-tables/headerless.vue b/packages/docs/src/examples/data-tables/headerless.vue
index 8996d77299b..8ba23754502 100644
--- a/packages/docs/src/examples/data-tables/headerless.vue
+++ b/packages/docs/src/examples/data-tables/headerless.vue
@@ -1,25 +1,29 @@
 <template>
   <v-data-table
+    :headers="headers"
     :items="desserts"
+    hide-default-header
+    hide-default-footer
     class="elevation-1"
-    hide-actions
-    hide-headers
-  >
-    <template slot="items" slot-scope="props">
-      <td>{{ props.item.name }}</td>
-      <td class="text-xs-right">{{ props.item.calories }}</td>
-      <td class="text-xs-right">{{ props.item.fat }}</td>
-      <td class="text-xs-right">{{ props.item.carbs }}</td>
-      <td class="text-xs-right">{{ props.item.protein }}</td>
-      <td class="text-xs-right">{{ props.item.iron }}</td>
-    </template>
-  </v-data-table>
+  ></v-data-table>
 </template>
 
 <script>
   export default {
     data () {
       return {
+        headers: [
+          {
+            text: 'Dessert (100g serving)',
+            align: 'left',
+            value: 'name'
+          },
+          { text: 'Calories', value: 'calories' },
+          { text: 'Fat (g)', value: 'fat' },
+          { text: 'Carbs (g)', value: 'carbs' },
+          { text: 'Protein (g)', value: 'protein' },
+          { text: 'Iron (%)', value: 'iron' }
+        ],
         desserts: [
           {
             name: 'Frozen Yogurt',
diff --git a/packages/docs/src/examples/data-tables/headers.vue b/packages/docs/src/examples/data-tables/headers.vue
index cc89f7e4a1d..4eb38b0c194 100644
--- a/packages/docs/src/examples/data-tables/headers.vue
+++ b/packages/docs/src/examples/data-tables/headers.vue
@@ -3,49 +3,36 @@
     v-model="selected"
     :headers="headers"
     :items="desserts"
-    :pagination.sync="pagination"
-    select-all
+    :options.sync="options"
+    show-select
     item-key="name"
+    hide-default-header
     class="elevation-1"
   >
-    <template slot="headers" slot-scope="props">
-      <tr>
-        <th>
-          <v-checkbox
-            :input-value="props.all"
-            :indeterminate="props.indeterminate"
-            primary
-            hide-details
-            @click.stop="toggleAll"
-          ></v-checkbox>
-        </th>
-        <th
-          v-for="header in props.headers"
-          :key="header.text"
-          :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
-          @click="changeSort(header.value)"
-        >
-          <v-icon small>arrow_upward</v-icon>
-          {{ header.text }}
-        </th>
-      </tr>
-    </template>
-    <template slot="items" slot-scope="props">
-      <tr :active="props.selected" @click="props.selected = !props.selected">
-        <td>
-          <v-checkbox
-            :input-value="props.selected"
-            primary
-            hide-details
-          ></v-checkbox>
-        </td>
-        <td>{{ props.item.name }}</td>
-        <td class="text-xs-right">{{ props.item.calories }}</td>
-        <td class="text-xs-right">{{ props.item.fat }}</td>
-        <td class="text-xs-right">{{ props.item.carbs }}</td>
-        <td class="text-xs-right">{{ props.item.protein }}</td>
-        <td class="text-xs-right">{{ props.item.iron }}</td>
-      </tr>
+    <template v-slot:header="{ props, on }">
+      <thead>
+        <tr>
+          <th>
+            <!-- <v-checkbox
+              :input-value="props.all"
+              :indeterminate="props.indeterminate"
+              primary
+              hide-details
+              @click.stop="toggleAll"
+            ></v-checkbox> -->
+            checkbox
+          </th>
+          <th
+            v-for="header in props.headers"
+            :key="header.text"
+            :class="['column sortable', options.sortDesc ? 'desc' : 'asc', header.value === options.sortBy ? 'active' : '']"
+            @click="on.sort(header.value)"
+          >
+            <v-icon small>arrow_upward</v-icon>
+            {{ header.text }}
+          </th>
+        </tr>
+      </thead>
     </template>
   </v-data-table>
 </template>
@@ -53,7 +40,7 @@
 <script>
   export default {
     data: () => ({
-      pagination: {
+      options: {
         sortBy: 'name'
       },
       selected: [],
@@ -159,11 +146,11 @@
         else this.selected = this.desserts.slice()
       },
       changeSort (column) {
-        if (this.pagination.sortBy === column) {
-          this.pagination.descending = !this.pagination.descending
+        if (this.options.sortBy === column) {
+          this.options.descending = !this.options.descending
         } else {
-          this.pagination.sortBy = column
-          this.pagination.descending = false
+          this.options.sortBy = column
+          this.options.descending = false
         }
       }
     }
diff --git a/packages/docs/src/examples/data-tables/noData.vue b/packages/docs/src/examples/data-tables/noData.vue
index 61c0d6778de..b961c4dd74d 100644
--- a/packages/docs/src/examples/data-tables/noData.vue
+++ b/packages/docs/src/examples/data-tables/noData.vue
@@ -4,8 +4,8 @@
     :items="desserts"
     class="elevation-1"
   >
-    <template slot="no-data">
-      <v-alert :value="true" color="error" icon="warning">
+    <template v-slot:no-data>
+      <v-alert :value="true" color="error" icon="warning" class="ma-2">
         Sorry, nothing to display here :(
       </v-alert>
     </template>
diff --git a/packages/docs/src/examples/data-tables/paginate.vue b/packages/docs/src/examples/data-tables/paginate.vue
index b01e52b5bd7..5da779dec94 100644
--- a/packages/docs/src/examples/data-tables/paginate.vue
+++ b/packages/docs/src/examples/data-tables/paginate.vue
@@ -3,22 +3,14 @@
     <v-data-table
       :headers="headers"
       :items="desserts"
-      :search="search"
-      hide-actions
-      :pagination.sync="pagination"
+      :page.sync="page"
+      :items-per-page="5"
+      @pageCount="pageCount = $event"
+      hide-default-footer
       class="elevation-1"
-    >
-      <template slot="items" slot-scope="props">
-        <td>{{ props.item.name }}</td>
-        <td class="text-xs-right">{{ props.item.calories }}</td>
-        <td class="text-xs-right">{{ props.item.fat }}</td>
-        <td class="text-xs-right">{{ props.item.carbs }}</td>
-        <td class="text-xs-right">{{ props.item.protein }}</td>
-        <td class="text-xs-right">{{ props.item.iron }}</td>
-      </template>
-    </v-data-table>
+    ></v-data-table>
     <div class="text-xs-center pt-2">
-      <v-pagination v-model="pagination.page" :length="pages"></v-pagination>
+      <v-pagination v-model="page" :length="pageCount"></v-pagination>
     </div>
   </div>
 </template>
@@ -27,9 +19,8 @@
   export default {
     data () {
       return {
-        search: '',
-        pagination: {},
-        selected: [],
+        page: 1,
+        pageCount: 0,
         headers: [
           {
             text: 'Dessert (100g serving)',
@@ -126,15 +117,6 @@
           }
         ]
       }
-    },
-    computed: {
-      pages () {
-        if (this.pagination.rowsPerPage == null ||
-          this.pagination.totalItems == null
-        ) return 0
-
-        return Math.ceil(this.pagination.totalItems / this.pagination.rowsPerPage)
-      }
     }
   }
 </script>
diff --git a/packages/docs/src/examples/data-tables/progress.vue b/packages/docs/src/examples/data-tables/progress.vue
index a656371779f..f79dff34d2e 100644
--- a/packages/docs/src/examples/data-tables/progress.vue
+++ b/packages/docs/src/examples/data-tables/progress.vue
@@ -5,14 +5,8 @@
     :loading="true"
     class="elevation-1"
   >
-    <v-progress-linear slot="progress" color="blue" indeterminate></v-progress-linear>
-    <template slot="items" slot-scope="props">
-      <td>{{ props.item.name }}</td>
-      <td class="text-xs-right">{{ props.item.calories }}</td>
-      <td class="text-xs-right">{{ props.item.fat }}</td>
-      <td class="text-xs-right">{{ props.item.carbs }}</td>
-      <td class="text-xs-right">{{ props.item.protein }}</td>
-      <td class="text-xs-right">{{ props.item.iron }}</td>
+    <template v-slot:progress>
+      <v-progress-linear color="green" indeterminate></v-progress-linear>
     </template>
   </v-data-table>
 </template>
diff --git a/packages/docs/src/examples/data-tables/search.vue b/packages/docs/src/examples/data-tables/search.vue
index 2900c7b3b5c..316fb0a8d5d 100644
--- a/packages/docs/src/examples/data-tables/search.vue
+++ b/packages/docs/src/examples/data-tables/search.vue
@@ -16,17 +16,11 @@
       :items="desserts"
       :search="search"
     >
-      <template slot="items" slot-scope="props">
-        <td>{{ props.item.name }}</td>
-        <td class="text-xs-right">{{ props.item.calories }}</td>
-        <td class="text-xs-right">{{ props.item.fat }}</td>
-        <td class="text-xs-right">{{ props.item.carbs }}</td>
-        <td class="text-xs-right">{{ props.item.protein }}</td>
-        <td class="text-xs-right">{{ props.item.iron }}</td>
+      <template v-slot:no-results>
+        <v-alert  :value="true" color="error" icon="warning" class="ma-2">
+          Your search for "{{ search }}" found no results.
+        </v-alert>
       </template>
-      <v-alert slot="no-results" :value="true" color="error" icon="warning">
-        Your search for "{{ search }}" found no results.
-      </v-alert>
     </v-data-table>
   </v-card>
 </template>
diff --git a/packages/docs/src/examples/data-tables/select.vue b/packages/docs/src/examples/data-tables/select.vue
index 7a9052a14e7..3873474a872 100644
--- a/packages/docs/src/examples/data-tables/select.vue
+++ b/packages/docs/src/examples/data-tables/select.vue
@@ -4,25 +4,9 @@
     :headers="headers"
     :items="desserts"
     item-key="name"
-    select-all
+    show-select
     class="elevation-1"
-  >
-    <template slot="items" slot-scope="props">
-      <td>
-        <v-checkbox
-          v-model="props.selected"
-          primary
-          hide-details
-        ></v-checkbox>
-      </td>
-      <td>{{ props.item.name }}</td>
-      <td class="text-xs-right">{{ props.item.calories }}</td>
-      <td class="text-xs-right">{{ props.item.fat }}</td>
-      <td class="text-xs-right">{{ props.item.carbs }}</td>
-      <td class="text-xs-right">{{ props.item.protein }}</td>
-      <td class="text-xs-right">{{ props.item.iron }}</td>
-    </template>
-  </v-data-table>
+  ></v-data-table>
 </template>
 
 <script>
diff --git a/packages/docs/src/examples/data-tables/server.vue b/packages/docs/src/examples/data-tables/server.vue
index 0bec28952c0..f3127787477 100644
--- a/packages/docs/src/examples/data-tables/server.vue
+++ b/packages/docs/src/examples/data-tables/server.vue
@@ -3,20 +3,11 @@
     <v-data-table
       :headers="headers"
       :items="desserts"
-      :pagination.sync="pagination"
-      :total-items="totalDesserts"
+      :options.sync="options"
+      :server-items-length="totalDesserts"
       :loading="loading"
       class="elevation-1"
-    >
-      <template slot="items" slot-scope="props">
-        <td>{{ props.item.name }}</td>
-        <td class="text-xs-right">{{ props.item.calories }}</td>
-        <td class="text-xs-right">{{ props.item.fat }}</td>
-        <td class="text-xs-right">{{ props.item.carbs }}</td>
-        <td class="text-xs-right">{{ props.item.protein }}</td>
-        <td class="text-xs-right">{{ props.item.iron }}</td>
-      </template>
-    </v-data-table>
+    ></v-data-table>
   </div>
 </template>
 
@@ -27,7 +18,7 @@
         totalDesserts: 0,
         desserts: [],
         loading: true,
-        pagination: {},
+        options: {},
         headers: [
           {
             text: 'Dessert (100g serving)',
@@ -44,7 +35,7 @@
       }
     },
     watch: {
-      pagination: {
+      options: {
         handler () {
           this.getDataFromApi()
             .then(data => {
@@ -66,12 +57,12 @@
       getDataFromApi () {
         this.loading = true
         return new Promise((resolve, reject) => {
-          const { sortBy, descending, page, rowsPerPage } = this.pagination
+          const { sortBy, descending, page, itemsPerPage } = this.options
 
           let items = this.getDesserts()
           const total = items.length
 
-          if (this.pagination.sortBy) {
+          if (this.options.sortBy) {
             items = items.sort((a, b) => {
               const sortA = a[sortBy]
               const sortB = b[sortBy]
@@ -88,8 +79,8 @@
             })
           }
 
-          if (rowsPerPage > 0) {
-            items = items.slice((page - 1) * rowsPerPage, page * rowsPerPage)
+          if (itemsPerPage > 0) {
+            items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
           }
 
           setTimeout(() => {
diff --git a/packages/docs/src/examples/data-tables/sort.vue b/packages/docs/src/examples/data-tables/sort.vue
index 99a4a12abe2..7e6fec2a937 100644
--- a/packages/docs/src/examples/data-tables/sort.vue
+++ b/packages/docs/src/examples/data-tables/sort.vue
@@ -3,21 +3,12 @@
     <v-data-table
       :headers="headers"
       :items="desserts"
-      :search="search"
-      :pagination.sync="pagination"
+      :sort-by.sync="sortBy"
+      :sort-desc.sync="descending"
       class="elevation-1"
-    >
-      <template slot="items" slot-scope="props">
-        <td>{{ props.item.name }}</td>
-        <td class="text-xs-right">{{ props.item.calories }}</td>
-        <td class="text-xs-right">{{ props.item.fat }}</td>
-        <td class="text-xs-right">{{ props.item.carbs }}</td>
-        <td class="text-xs-right">{{ props.item.protein }}</td>
-        <td class="text-xs-right">{{ props.item.iron }}</td>
-      </template>
-    </v-data-table>
+    ></v-data-table>
     <div class="text-xs-center pt-2">
-      <v-btn color="primary" @click="toggleOrder">Toggle sort order</v-btn>
+      <v-btn color="primary" @click="toggleOrder" class="mr-2">Toggle sort order</v-btn>
       <v-btn color="primary" @click="nextSort">Sort next column</v-btn>
     </div>
   </div>
@@ -28,9 +19,8 @@
     data () {
       return {
         search: '',
-        pagination: {
-          sortBy: 'fat'
-        },
+        sortBy: 'fat',
+        descending: false,
         selected: [],
         headers: [
           {
@@ -131,13 +121,13 @@
     },
     methods: {
       toggleOrder () {
-        this.pagination.descending = !this.pagination.descending
+        this.descending = !this.descending
       },
       nextSort () {
-        let index = this.headers.findIndex(h => h.value === this.pagination.sortBy)
+        let index = this.headers.findIndex(h => h.value === this.sortBy)
         index = (index + 1) % this.headers.length
         index = index === 0 ? index + 1 : index
-        this.pagination.sortBy = this.headers[index].value
+        this.sortBy = this.headers[index].value
       }
     }
   }
diff --git a/packages/docs/src/examples/data-tables/usage.vue b/packages/docs/src/examples/data-tables/usage.vue
index 29b75215a3f..5992b7b8e19 100644
--- a/packages/docs/src/examples/data-tables/usage.vue
+++ b/packages/docs/src/examples/data-tables/usage.vue
@@ -2,17 +2,9 @@
   <v-data-table
     :headers="headers"
     :items="desserts"
+    :items-per-page="5"
     class="elevation-1"
-  >
-    <template slot="items" slot-scope="props">
-      <td>{{ props.item.name }}</td>
-      <td class="text-xs-right">{{ props.item.calories }}</td>
-      <td class="text-xs-right">{{ props.item.fat }}</td>
-      <td class="text-xs-right">{{ props.item.carbs }}</td>
-      <td class="text-xs-right">{{ props.item.protein }}</td>
-      <td class="text-xs-right">{{ props.item.iron }}</td>
-    </template>
-  </v-data-table>
+  ></v-data-table>
 </template>
 
 <script>
diff --git a/packages/vuetify/src/components/VCheckbox/VSimpleCheckbox.ts b/packages/vuetify/src/components/VCheckbox/VSimpleCheckbox.ts
new file mode 100644
index 00000000000..d3d43e59b65
--- /dev/null
+++ b/packages/vuetify/src/components/VCheckbox/VSimpleCheckbox.ts
@@ -0,0 +1,81 @@
+import Vue, { VNode, VNodeDirective } from 'vue'
+import { VIcon } from '../VIcon'
+
+import Colorable from '../../mixins/colorable'
+import Themeable from '../../mixins/themeable'
+import { wrapInArray } from '../../util/helpers'
+
+export default Vue.extend({
+  name: 'v-simple-checkbox',
+
+  functional: true,
+
+  props: {
+    ...Colorable.options.props,
+    ...Themeable.options.props,
+    disabled: Boolean,
+    ripple: {
+      type: Boolean,
+      default: true
+    },
+    value: Boolean,
+    indeterminate: Boolean,
+    indeterminateIcon: {
+      type: String,
+      default: '$vuetify.icons.checkboxIndeterminate'
+    },
+    onIcon: {
+      type: String,
+      default: '$vuetify.icons.checkboxOn'
+    },
+    offIcon: {
+      type: String,
+      default: '$vuetify.icons.checkboxOff'
+    }
+  },
+
+  render (h, { props, data }): VNode {
+    const children = []
+
+    if (props.ripple && !props.disabled) {
+      const ripple = h('div', Colorable.options.methods.setTextColor(props.color, {
+        staticClass: 'v-input--selection-controls__ripple',
+        directives: [{
+          name: 'ripple',
+          value: { center: true }
+        }] as VNodeDirective[]
+      }))
+
+      children.push(ripple)
+    }
+
+    let icon = props.offIcon
+    if (props.indeterminate) icon = props.indeterminateIcon
+    else if (props.value) icon = props.onIcon
+
+    children.push(h(VIcon, Colorable.options.methods.setTextColor(props.color, {
+      props: {
+        disabled: props.disabled,
+        dark: props.dark,
+        light: props.light
+      }
+    }), icon))
+
+    const classes = {
+      'v-simple-checkbox': true,
+      'v-simple-checkbox--disabled': props.disabled
+    }
+
+    return h('div', {
+      ...data,
+      class: classes,
+      on: {
+        click: () => {
+          if (data.on && data.on.input && !props.disabled) {
+            wrapInArray(data.on.input).forEach(f => f(!props.value))
+          }
+        }
+      }
+    }, children)
+  }
+})
diff --git a/packages/vuetify/src/components/VCheckbox/index.js b/packages/vuetify/src/components/VCheckbox/index.js
index 2e6909e995f..9acfb0776df 100644
--- a/packages/vuetify/src/components/VCheckbox/index.js
+++ b/packages/vuetify/src/components/VCheckbox/index.js
@@ -1,4 +1,5 @@
 import VCheckbox from './VCheckbox'
+import VSimpleCheckbox from './VSimpleCheckbox'
 
-export { VCheckbox }
+export { VCheckbox, VSimpleCheckbox }
 export default VCheckbox
diff --git a/packages/vuetify/src/components/VData/VData.ts b/packages/vuetify/src/components/VData/VData.ts
new file mode 100644
index 00000000000..88ec3b23195
--- /dev/null
+++ b/packages/vuetify/src/components/VData/VData.ts
@@ -0,0 +1,350 @@
+// Helpers
+import { wrapInArray, sortItems, deepEqual, groupByProperty, searchItems } from '../../util/helpers'
+import { PropValidator } from 'vue/types/options'
+import Vue, { VNode } from 'vue'
+
+export interface DataOptions {
+  page: number
+  itemsPerPage: number
+  sortBy: string[]
+  sortDesc: boolean[]
+  groupBy: string[]
+  groupDesc: boolean[]
+  multiSort: boolean
+  mustSort: boolean
+}
+
+export interface DataPaginaton {
+  page: number
+  itemsPerPage: number
+  pageStart: number
+  pageStop: number
+  pageCount: number
+  itemsLength: number
+}
+
+export interface DataProps {
+  items: any[]
+  pagination: DataPaginaton
+  options: DataOptions
+  updateOptions: (obj: any) => void
+  sort: (value: string) => void
+  group: (value: string) => void
+  groupedItems: Record<string, any[]>
+  // loading?: boolean
+}
+
+export default Vue.extend({
+  name: 'v-data',
+
+  inheritAttrs: false,
+
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    } as PropValidator<any[]>,
+    itemKey: {
+      type: String,
+      default: 'id'
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    sortBy: {
+      type: [String, Array],
+      default: () => []
+    } as PropValidator<string | string[]>,
+    sortDesc: {
+      type: [Boolean, Array],
+      default: () => []
+    } as PropValidator<boolean | boolean[]>,
+    customSort: {
+      type: Function, // TODO: specific typing?
+      default: sortItems
+    },
+    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[]>,
+    locale: {
+      type: String,
+      default: 'en-US'
+    },
+    disableSort: Boolean,
+    disablePagination: Boolean,
+    disableFiltering: Boolean,
+    search: String,
+    customFilter: {
+      type: Function, // TODO: specific typing?
+      default: searchItems
+    },
+    serverItemsLength: {
+      type: Number,
+      default: -1
+    }
+  },
+
+  data () {
+    return {
+      internalOptions: {
+        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
+      } as DataOptions
+    }
+  },
+
+  computed: {
+    itemsLength (): number {
+      return this.serverItemsLength >= 0 ? this.serverItemsLength : this.filteredItems.length
+    },
+    pageCount (): number {
+      return this.internalOptions.itemsPerPage === -1
+        ? 1
+        : Math.ceil(this.itemsLength / this.internalOptions.itemsPerPage) // TODO: can't use items.length here
+    },
+    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)
+    },
+    pagination (): DataPaginaton {
+      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.serverItemsLength <= 0) {
+        items = this.sortItems(items)
+      }
+
+      if (!this.disablePagination && this.serverItemsLength <= 0) {
+        items = this.paginateItems(items)
+      }
+
+      this.$emit('current-items', items)
+
+      return items
+    },
+    groupedItems (): Record<string, any[]> {
+      return groupByProperty(this.computedItems, this.internalOptions.groupBy[0])
+    },
+    scopedProps (): DataProps {
+      const props = {
+        sort: this.sort,
+        sortArray: this.sortArray,
+        group: this.group,
+        items: this.computedItems,
+        options: this.internalOptions,
+        updateOptions: this.updateOptions,
+        pagination: this.pagination,
+        groupedItems: this.groupedItems
+      }
+
+      return props
+    }
+  },
+
+  watch: {
+    options: {
+      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)
+        this.$emit('pagination', this.pagination)
+      },
+      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:itemsPerPage', itemsPerPage)
+    },
+    sortBy (sortBy: string | string[]) {
+      this.updateOptions({ sortBy: wrapInArray(sortBy) })
+    },
+    'internalOptions.sortBy' (sortBy: string[], old: string[]) {
+      !deepEqual(sortBy, old) && this.$emit('update:sortBy', 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:sortDesc', 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:groupBy', 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:groupDesc', Array.isArray(this.groupDesc) ? groupDesc : groupDesc[0])
+    },
+    multiSort (multiSort: boolean) {
+      this.updateOptions({ multiSort })
+    },
+    'internalOptions.multiSort' (multiSort: boolean) {
+      this.$emit('update:multiSort', multiSort)
+    },
+    mustSort (mustSort: boolean) {
+      this.updateOptions({ mustSort })
+    },
+    'internalOptions.mustSort' (mustSort: boolean) {
+      this.$emit('update:mustSort', mustSort)
+    },
+    pageCount: {
+      handler (pageCount: number) {
+        this.$emit('pageCount', pageCount)
+      },
+      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.mustSort,
+        this.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 = Object.assign({}, this.internalOptions, {
+        ...options,
+        page: Math.max(1, Math.min(options.page || this.internalOptions.page, this.pageCount))
+      })
+    },
+    sortItems (items: any[]) {
+      const sortBy = this.internalOptions.groupBy.concat(this.internalOptions.sortBy)
+      const sortDesc = this.internalOptions.groupDesc.concat(this.internalOptions.sortDesc)
+      return this.customSort(items, sortBy, sortDesc, this.locale)
+    },
+    paginateItems (items: 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 (items.length < this.pageStart) this.internalOptions.page = 1
+
+      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/VDataFooter.ts b/packages/vuetify/src/components/VData/VDataFooter.ts
new file mode 100644
index 00000000000..5790902be38
--- /dev/null
+++ b/packages/vuetify/src/components/VData/VDataFooter.ts
@@ -0,0 +1,215 @@
+// Helpers
+import { DataOptions, DataPaginaton } from './VData'
+import { PropValidator } from 'vue/types/options'
+import Vue, { VNode, VNodeChildrenArrayContents } from 'vue'
+import VSelect from '../VSelect/VSelect'
+import VIcon from '../VIcon'
+import VBtn from '../VBtn'
+
+// Styles
+
+export default Vue.extend({
+  name: 'v-data-footer',
+
+  props: {
+    options: {
+      type: Object,
+      required: true
+    } as PropValidator<DataOptions>,
+    pagination: {
+      type: Object,
+      required: true
+    } as PropValidator<DataPaginaton>,
+    itemsPerPageOptions: {
+      type: Array,
+      default: () => ([5, 10, 15, -1])
+    } as PropValidator<any[]>,
+    prevIcon: {
+      type: String,
+      default: '$vuetify.icons.prev'
+    },
+    nextIcon: {
+      type: String,
+      default: '$vuetify.icons.next'
+    },
+    firstIcon: {
+      type: String,
+      default: '$vuetify.icons.first'
+    },
+    lastIcon: {
+      type: String,
+      default: '$vuetify.icons.last'
+    },
+    itemsPerPageText: {
+      type: String,
+      default: '$vuetify.dataIterator.itemsPerPageText'
+    },
+    itemsPerPageAllText: {
+      type: String,
+      default: '$vuetify.dataIterator.itemsPerPageAll'
+    },
+    showFirstLastPage: Boolean,
+    showCurrentPage: Boolean,
+    disablePagination: Boolean,
+    disableItemsPerPage: Boolean
+  },
+
+  computed: {
+    disableNextPageIcon (): boolean {
+      return this.options.itemsPerPage < 0 ||
+        this.options.page * this.options.itemsPerPage >= this.pagination.itemsLength ||
+        this.pagination.pageStop < 0
+    },
+    isCustomItemsPerPage (): boolean {
+      for (let i = 0; i < this.itemsPerPageOptions.length; i++) {
+        if (this.options.itemsPerPage === this.itemsPerPageOptions[i]) return false
+      }
+
+      return true
+    },
+    computedItemsPerPageOptions (): any[] {
+      const itemsPerPageOptions = this.itemsPerPageOptions.slice()
+
+      if (this.isCustomItemsPerPage) {
+        itemsPerPageOptions.push(this.options.itemsPerPage)
+
+        itemsPerPageOptions.sort((a, b) => {
+          if (a === -1) return 1
+          else if (b === -1) return -1
+          else return a - b
+        })
+      }
+
+      return itemsPerPageOptions.map(value => ({ text: value === -1 ? this.$vuetify.t(this.itemsPerPageAllText) : String(value), value }))
+    }
+  },
+
+  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 })
+    },
+    genItemsPerPageSelect () {
+      return this.$createElement('div', {
+        staticClass: 'v-data-footer__select'
+      }, [
+        this.$vuetify.t(this.itemsPerPageText),
+        this.$createElement(VSelect, {
+          attrs: {
+            'aria-label': this.itemsPerPageText
+          },
+          props: {
+            disabled: this.disableItemsPerPage,
+            items: this.computedItemsPerPageOptions,
+            value: this.options.itemsPerPage,
+            hideDetails: true,
+            auto: true,
+            minWidth: '75px'
+          },
+          on: {
+            input: this.onChangeItemsPerPage
+          }
+        })
+      ])
+    },
+    genPaginationInfo () {
+      let children: VNodeChildrenArrayContents = ['–']
+
+      if (this.pagination.itemsLength) {
+        const itemsLength = this.pagination.itemsLength
+        const pageStart = this.pagination.pageStart + 1
+        const pageStop = itemsLength < this.pagination.pageStop || this.pagination.pageStop < 0
+          ? itemsLength
+          : this.pagination.pageStop
+
+        children = this.$scopedSlots.pageText
+          ? [this.$scopedSlots.pageText({ pageStart, pageStop, itemsLength })]
+          : [`${pageStart}-${pageStop} of ${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 icons: VNodeChildrenArrayContents = []
+
+      icons.push(this.genIcon(
+        this.onPreviousPage,
+        this.options.page === 1,
+        'Previous page',
+        this.$vuetify.rtl ? this.nextIcon : this.prevIcon
+      ))
+
+      if (this.showCurrentPage) {
+        icons.push(this.$createElement('span', [this.options.page.toString()]))
+      }
+
+      icons.push(this.genIcon(
+        this.onNextPage,
+        this.disableNextPageIcon,
+        'Next page',
+        this.$vuetify.rtl ? this.prevIcon : this.nextIcon
+      ))
+
+      if (this.showFirstLastPage) {
+        icons.unshift(this.genIcon(
+          this.onFirstPage,
+          this.options.page === 1,
+          'First page',
+          this.$vuetify.rtl ? this.lastIcon : this.firstIcon
+        ))
+
+        icons.push(this.genIcon(
+          this.onLastPage,
+          this.options.page === this.pagination.pageCount || this.options.itemsPerPage === -1,
+          'Last page',
+          this.$vuetify.rtl ? this.firstIcon : this.lastIcon
+        ))
+      }
+
+      return icons
+    }
+  },
+
+  render (): VNode {
+    return this.$createElement('div', {
+      staticClass: 'v-data-footer'
+    }, [
+      this.genItemsPerPageSelect(),
+      this.genPaginationInfo(),
+      this.genIcons()
+    ])
+  }
+})
diff --git a/packages/vuetify/src/components/VData/index.ts b/packages/vuetify/src/components/VData/index.ts
new file mode 100644
index 00000000000..c2ff42c2b5d
--- /dev/null
+++ b/packages/vuetify/src/components/VData/index.ts
@@ -0,0 +1,11 @@
+import VData from './VData'
+import VDataFooter from './VDataFooter'
+
+export { VData, VDataFooter }
+
+export default {
+  $_vuetify_subcomponents: {
+    VData,
+    VDataFooter
+  }
+}
diff --git a/packages/vuetify/src/components/VDataIterator/VDataIterator.js b/packages/vuetify/src/components/VDataIterator/VDataIterator.js
deleted file mode 100644
index e54fb99d8e7..00000000000
--- a/packages/vuetify/src/components/VDataIterator/VDataIterator.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import '../../stylus/components/_data-iterator.styl'
-
-import DataIterable from '../../mixins/data-iterable'
-
-/* @vue/component */
-export default {
-  name: 'v-data-iterator',
-
-  mixins: [DataIterable],
-
-  inheritAttrs: false,
-
-  props: {
-    contentTag: {
-      type: String,
-      default: 'div'
-    },
-    contentProps: {
-      type: Object,
-      required: false
-    },
-    contentClass: {
-      type: String,
-      required: false
-    }
-  },
-
-  computed: {
-    classes () {
-      return {
-        'v-data-iterator': true,
-        'v-data-iterator--select-all': this.selectAll !== false,
-        ...this.themeClasses
-      }
-    }
-  },
-
-  created () {
-    this.initPagination()
-  },
-
-  methods: {
-    genContent () {
-      const children = this.genItems()
-
-      const data = {
-        'class': this.contentClass,
-        attrs: this.$attrs,
-        on: this.$listeners,
-        props: this.contentProps
-      }
-
-      return this.$createElement(this.contentTag, data, children)
-    },
-    genEmptyItems (content) {
-      return [this.$createElement('div', {
-        'class': 'text-xs-center',
-        style: 'width: 100%'
-      }, content)]
-    },
-    genFilteredItems () {
-      if (!this.$scopedSlots.item) {
-        return null
-      }
-
-      const items = []
-      for (let index = 0, len = this.filteredItems.length; index < len; ++index) {
-        const item = this.filteredItems[index]
-        const props = this.createProps(item, index)
-        items.push(this.$scopedSlots.item(props))
-      }
-
-      return items
-    },
-    genFooter () {
-      const children = []
-
-      if (this.$slots.footer) {
-        children.push(this.$slots.footer)
-      }
-
-      if (!this.hideActions) {
-        children.push(this.genActions())
-      }
-
-      if (!children.length) return null
-      return this.$createElement('div', children)
-    },
-    genHeader () {
-      const children = []
-
-      if (this.$slots.header) {
-        children.push(this.$slots.header)
-      }
-
-      if (!children.length) return null
-      return this.$createElement('div', children)
-    }
-  },
-
-  render (h) {
-    return h('div', {
-      'class': this.classes
-    }, [
-      this.genHeader(),
-      this.genContent(),
-      this.genFooter()
-    ])
-  }
-}
diff --git a/packages/vuetify/src/components/VDataIterator/VDataIterator.ts b/packages/vuetify/src/components/VDataIterator/VDataIterator.ts
new file mode 100644
index 00000000000..d19dc61dfa9
--- /dev/null
+++ b/packages/vuetify/src/components/VDataIterator/VDataIterator.ts
@@ -0,0 +1,212 @@
+import { VNode, VNodeChildren } from 'vue'
+
+// Components
+import { VData } from '../VData'
+
+// Helpers
+import { deepEqual, getObjectValueByPath } from '../../util/helpers'
+import { DataProps } from '../VData/VData'
+import { PropValidator } from 'vue/types/options'
+import mixins from '../../util/mixins'
+import Themeable from '../../mixins/themeable'
+
+/* @vue/component */
+export default mixins(Themeable).extend({
+  name: 'v-data-iterator',
+
+  props: {
+    ...VData.options.props, // TODO: filter out props not used
+    value: {
+      type: Array,
+      default: () => []
+    } as PropValidator<any[]>,
+    singleSelect: Boolean,
+    expanded: {
+      type: Array,
+      default: () => []
+    } as PropValidator<any[]>,
+    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'
+    }
+  },
+
+  data: () => ({
+    selection: {} as Record<string, boolean>,
+    expansion: {} as Record<string, boolean>,
+    internalCurrentItems: [] as any[]
+  }),
+
+  computed: {
+    everyItem (): boolean {
+      return !!this.internalCurrentItems.length && this.internalCurrentItems.every((i: any) => this.isSelected(i))
+    },
+    someItems (): boolean {
+      return this.internalCurrentItems.some((i: any) => this.isSelected(i))
+    }
+  },
+
+  watch: {
+    value (value: any[]) {
+      this.selection = value.reduce((selection, item) => {
+        selection[getObjectValueByPath(item, this.itemKey)] = true
+        return selection
+      }, {})
+    },
+    selection: {
+      handler (value: Record<string, boolean>, old: Record<string, boolean>) {
+        if (deepEqual(value, old)) return
+        const keys = Object.keys(value).filter(k => value[k])
+        const selected = !keys.length ? [] : this.items.filter(i => keys.includes(String(getObjectValueByPath(i, this.itemKey))))
+        this.$emit('input', selected)
+      },
+      deep: true
+    },
+    expanded (value: any[]) {
+      this.expansion = value.reduce((expansion, item) => {
+        expansion[getObjectValueByPath(item, this.itemKey)] = true
+        return expansion
+      }, {})
+    },
+    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)
+    }
+  },
+
+  methods: {
+    toggleSelectAll (value: boolean): void {
+      this.internalCurrentItems.forEach((item: any) => {
+        const key = getObjectValueByPath(item, this.itemKey)
+        this.$set(this.selection, key, value)
+      })
+    },
+    isSelected (item: any): boolean {
+      return this.selection[getObjectValueByPath(item, this.itemKey)] || false
+    },
+    select (item: any, value = true): void {
+      const selection = this.singleSelect ? {} : Object.assign({}, this.selection)
+      const key = getObjectValueByPath(item, this.itemKey)
+
+      if (value) selection[key] = true
+      else delete selection[key]
+
+      this.selection = selection
+      this.$emit('item-selected', { item, 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) {
+      const props = {
+        item,
+        select: {
+          props: {
+            value: this.isSelected(item)
+          },
+          on: {
+            input: (v: boolean) => this.select(item, v)
+          }
+        },
+        expand: {
+          props: {
+            value: this.isExpanded(item)
+          },
+          on: {
+            input: (v: boolean) => this.expand(item, v)
+          }
+        }
+      }
+
+      return props
+    },
+    genEmptyWrapper (content: VNodeChildren) {
+      return this.$createElement('div', content)
+    },
+    genEmpty (itemsLength: number) {
+      if (itemsLength <= 0 && this.loading) {
+        const loading = this.$slots['loading'] || this.$vuetify.t(this.loadingText)
+        return this.genEmptyWrapper(loading)
+      } else if (itemsLength <= 0 && !this.items.length) {
+        const noData = this.$slots['no-data'] || this.$vuetify.t(this.noDataText)
+        return this.genEmptyWrapper(noData)
+      } else if (itemsLength <= 0 && this.search) {
+        const noResults = this.$slots['no-results'] || this.$vuetify.t(this.noResultsText)
+        return this.genEmptyWrapper(noResults)
+      }
+
+      return null
+    },
+    genItems (props: DataProps) {
+      const empty = this.genEmpty(props.pagination.itemsLength)
+      if (empty) return [empty]
+
+      if (this.$scopedSlots.default) return this.$scopedSlots.default(props)
+
+      if (this.$scopedSlots.item) {
+        return props.items.map((item: any) => this.$scopedSlots.item!(this.createItemProps(item)))
+      }
+
+      return []
+    },
+    genSlots (slot: string, props: any = {}): VNodeChildren {
+      if (this.$scopedSlots[slot]) return this.$scopedSlots[slot]!(props)
+      else if (this.$slots[slot]) return this.$slots[slot]
+      return []
+    },
+    genDefaultScopedSLot (props: any) {
+      return this.$createElement('div', {
+        staticClass: 'v-data-iterator'
+      }, [
+        this.genSlots('prepend', props),
+        this.genItems(props),
+        this.genSlots('append', props)
+      ]) as any
+    }
+  },
+
+  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:itemsPerPage': (v: any) => this.$emit('update:itemsPerPage', v),
+        'update:sortBy': (v: any) => this.$emit('update:sortBy', v),
+        'update:sortDesc': (v: any) => this.$emit('update:sortDesc', v),
+        'update:groupBy': (v: any) => this.$emit('update:groupBy', v),
+        'update:groupDesc': (v: any) => this.$emit('update:groupDesc', 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)
+        }
+      },
+      scopedSlots: {
+        default: this.genDefaultScopedSLot
+      }
+    })
+  }
+})
diff --git a/packages/vuetify/src/components/VDataIterator/index.js b/packages/vuetify/src/components/VDataIterator/index.ts
similarity index 100%
rename from packages/vuetify/src/components/VDataIterator/index.js
rename to packages/vuetify/src/components/VDataIterator/index.ts
diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.js b/packages/vuetify/src/components/VDataTable/VDataTable.js
deleted file mode 100644
index ccef7d60de0..00000000000
--- a/packages/vuetify/src/components/VDataTable/VDataTable.js
+++ /dev/null
@@ -1,121 +0,0 @@
-import '../../stylus/components/_tables.styl'
-import '../../stylus/components/_data-table.styl'
-
-import DataIterable from '../../mixins/data-iterable'
-
-import Head from './mixins/head'
-import Body from './mixins/body'
-import Foot from './mixins/foot'
-import Progress from './mixins/progress'
-
-import {
-  createSimpleFunctional,
-  getObjectValueByPath
-} from '../../util/helpers'
-
-// Importing does not work properly
-const VTableOverflow = createSimpleFunctional('v-table__overflow')
-
-/* @vue/component */
-export default {
-  name: 'v-data-table',
-
-  mixins: [DataIterable, Head, Body, Foot, Progress],
-
-  props: {
-    headers: {
-      type: Array,
-      default: () => []
-    },
-    headersLength: {
-      type: Number
-    },
-    headerText: {
-      type: String,
-      default: 'text'
-    },
-    headerKey: {
-      type: String,
-      default: null
-    },
-    hideHeaders: Boolean,
-    rowsPerPageText: {
-      type: String,
-      default: '$vuetify.dataTable.rowsPerPageText'
-    },
-    customFilter: {
-      type: Function,
-      default: (items, search, filter, headers) => {
-        search = search.toString().toLowerCase()
-        if (search.trim() === '') return items
-
-        const props = headers.map(h => h.value)
-
-        return items.filter(item => props.some(prop => filter(getObjectValueByPath(item, prop, item[prop]), search)))
-      }
-    }
-  },
-
-  data () {
-    return {
-      actionsClasses: 'v-datatable__actions',
-      actionsRangeControlsClasses: 'v-datatable__actions__range-controls',
-      actionsSelectClasses: 'v-datatable__actions__select',
-      actionsPaginationClasses: 'v-datatable__actions__pagination'
-    }
-  },
-
-  computed: {
-    classes () {
-      return {
-        'v-datatable v-table': true,
-        'v-datatable--select-all': this.selectAll !== false,
-        ...this.themeClasses
-      }
-    },
-    filteredItems () {
-      return this.filteredItemsImpl(this.headers)
-    },
-    headerColumns () {
-      return this.headersLength || this.headers.length + (this.selectAll !== false)
-    }
-  },
-
-  created () {
-    const firstSortable = this.headers.find(h => (
-      !('sortable' in h) || h.sortable)
-    )
-
-    this.defaultPagination.sortBy = !this.disableInitialSort && firstSortable
-      ? firstSortable.value
-      : null
-
-    this.initPagination()
-  },
-
-  methods: {
-    hasTag (elements, tag) {
-      return Array.isArray(elements) && elements.find(e => e.tag === tag)
-    },
-    genTR (children, data = {}) {
-      return this.$createElement('tr', data, children)
-    }
-  },
-
-  render (h) {
-    const tableOverflow = h(VTableOverflow, {}, [
-      h('table', {
-        'class': this.classes
-      }, [
-        this.genTHead(),
-        this.genTBody(),
-        this.genTFoot()
-      ])
-    ])
-
-    return h('div', [
-      tableOverflow,
-      this.genActionsFooter()
-    ])
-  }
-}
diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.sass b/packages/vuetify/src/components/VDataTable/VDataTable.sass
new file mode 100644
index 00000000000..bdf23ec43ef
--- /dev/null
+++ b/packages/vuetify/src/components/VDataTable/VDataTable.sass
@@ -0,0 +1,293 @@
+// Imports
+@import '../../styles/styles.sass'
+@import './_variables.scss'
+@import './_mixins.sass'
+
+// Theme
+.v-data-table.theme--light
+  @include data-table-theme($material-light)
+.v-data-table.theme--dark
+  @include data-table-theme($material-dark)
+
+.v-data-table-virtual
+  position: relative
+  padding-right: 17px
+
+  &__scroller
+    position: absolute
+    top: 0
+    right: 0
+    height: 100%
+    width: 17px
+    overflow-x: hidden
+
+  &__wrapper
+    width: 100%
+    height: 100%
+    overflow-x: auto
+    overflow-y: hidden
+
+.v-table-regular
+  &__wrapper
+    overflow-y: auto
+
+.v-data-table
+  table
+    width: 100%
+    max-width: 100%
+    border-collapse: collapse
+    // border-spacing: 0
+
+    colgroup
+      .divider
+        border-right: 1px solid lightgrey
+
+  &--dense
+    td
+      height: 24px
+    th
+      height: 32px
+
+  &--fixed
+    .v-data-table__wrapper
+      overflow-y: auto
+
+    thead
+      th
+        position: sticky
+        top: 0
+        z-index: 10
+
+    .v-table__header, .v-data-footer
+      margin-right: 17px
+
+  &--mobile
+    tr, td, th
+      display: block
+
+    td, th
+      padding: 14px
+
+  &__progress
+    height: auto !important
+
+    th
+      height: auto !important
+      border: none !important
+      padding: 0
+
+      .v-progress-linear
+        margin: 0
+
+td, th
+  padding: 0 16px
+
+.v-row
+  &__header
+    font-weight: 600
+
+  &__value
+    text-align: right
+
+.v-simple-checkbox
+  align-self: center
+  position: relative
+  user-select: none
+  cursor: pointer
+
+  &--disabled
+    cursor: default
+
+.v-data-table-header
+  &--mobile
+    th
+      height: initial
+
+      > div
+        display: flex
+
+        .v-simple-checkbox
+          margin-right: 24px
+
+        .v-select
+          margin-top: 0
+
+  th
+    font-weight: 500
+    font-size: 12px
+    transition: .3s map-get($transition, 'swing')
+    white-space: nowrap
+    user-select: none
+    position: relative
+
+    .resize-handle
+      z-index: 10
+      position: absolute
+      right: -4px
+      top: 0
+      height: 100%
+      width: 8px
+      cursor: ew-resize
+
+      &:hover
+        background: grey
+
+  .sortable
+    pointer-events: auto
+    cursor: pointer
+    outline: 0
+
+    i
+      font-size: 18px
+      display: inline-block
+      opacity: 0
+      transition: .3s map-get($transition, 'swing')
+
+    &:focus,
+    &:hover
+      i
+        opacity: .6
+
+    &.active
+      transform: none
+
+      i
+        opacity: 1
+
+      &.desc
+        i
+          transform: rotate(-180deg)
+
+.v-data-table__body
+  .v-row
+    transition: background $primary-transition
+    will-change: background
+
+  .v-cell
+    font-weight: 400
+    font-size: 13px
+
+td, th
+  > .v-input
+    margin-top: 0
+    padding-top: 0
+
+    .v-input--selection-controls__input
+      margin-right: 0
+
+td
+  height: 48px
+
+th
+  height: 48px
+
+  .badge
+    display: inline-flex
+    justify-content: center
+    border: 0px
+    border-radius: 50%
+    background-color: lightgrey // TODO: theme
+    min-width: 16px
+    min-height: 16px
+    height: 16px
+    width: 16px
+    color: white // TODO: theme
+    font-size: 0.8rem
+
+th
+  font-weight: bold
+
+tr > th
+  white-space: normal
+
+.v-row, .v-row-expandable
+  &:not(:last-child)
+    .v-cell
+      border-bottom: 1px solid rgba(0,0,0,.12) // TODO: theme
+
+.v-cell, .v-head
+  word-break: break-word
+  overflow: hidden
+  text-overflow: ellipsis
+
+/** Actions */
+.v-data-footer
+  display: flex
+  flex-wrap: wrap
+  justify-content: flex-end
+  align-items: center
+  font-size: 12px
+
+  .v-btn
+    color: inherit
+
+    &:first-of-type
+      margin-right: 7px
+
+    &:last-of-type
+      margin-left: 7px
+
+  &__range-controls
+    display: flex
+    align-items: center
+    min-height: 48px
+
+  &__pagination
+    display: block
+    text-align: center
+    margin: 0 32px 0 24px
+
+  &__select
+    display: flex
+    align-items: center
+    justify-content: flex-end
+    margin-right: 14px
+    white-space: nowrap
+
+    .v-select
+      flex: 0 1 0
+      margin: 13px 0 13px 34px
+      padding: 0
+      position: initial
+
+    .v-select__selections
+      flex-wrap: nowrap
+
+      .v-select__selection--comma
+        font-size: 12px
+
+.v-row-expandable
+  &__wrapper
+    transition: all 0.3s ease-out
+
+.v-data-table__expand
+  &-row
+    border: none !important
+
+  &-col
+    padding: 0 !important
+    height: 0px !important
+
+    &--expanded
+      border-bottom: 1px solid rgba(0,0,0,0.12) // TODO: theme
+
+  &-content
+    transition: height $primary-transition
+
+    > .card
+      border-radius: 0
+      box-shadow: none
+
+.v-row-group
+  &__header, &__summary
+    background: lightgrey
+
+    td
+      height: 35px
+
+.expand__icon
+  user-select: none
+  cursor: pointer
+
+  &--active
+    transform: rotate(-180deg)
diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.ts b/packages/vuetify/src/components/VDataTable/VDataTable.ts
new file mode 100644
index 00000000000..d95ec1a8152
--- /dev/null
+++ b/packages/vuetify/src/components/VDataTable/VDataTable.ts
@@ -0,0 +1,477 @@
+import './VDataTable.sass'
+
+// Types
+import { VNode, VNodeChildrenArrayContents, VNodeChildren } from 'vue'
+import { PropValidator } from 'vue/types/options'
+import { DataProps } from '../VData/VData'
+import { TableHeader } from './mixins/header'
+
+// Components
+import { VData, VDataFooter } from '../VData'
+import VBtn from '../VBtn'
+import VDataIterator from '../VDataIterator'
+import VDataTableHeader from './VDataTableHeader'
+import VDataTableVirtual from './VDataTableVirtual'
+import VIcon from '../VIcon'
+import VProgressLinear from '../VProgressLinear'
+import VRow from './VRow'
+import VRowGroup from './VRowGroup'
+import VSimpleCheckbox from '../VCheckbox/VSimpleCheckbox'
+
+// Helpers
+import { deepEqual, getObjectValueByPath, convertToUnit } from '../../util/helpers'
+
+function getPrefixedScopedSlots (prefix: string, scopedSlots: any) {
+  return Object.keys(scopedSlots).filter(k => k.startsWith(prefix)).reduce((obj: any, k: string) => {
+    obj[k.replace(prefix, '')] = scopedSlots[k]
+    return obj
+  }, {})
+}
+
+/* @vue/component */
+export default VDataIterator.extend({
+  name: 'v-data-table',
+
+  provide (): object {
+    return { dataTable: this }
+  },
+
+  props: {
+    headers: {
+      type: Array
+    } as PropValidator<TableHeader[]>,
+    showSelect: Boolean,
+    showExpand: Boolean,
+    showGroupBy: Boolean,
+    virtualRows: Boolean,
+    mobileBreakpoint: {
+      type: String,
+      default: 'sm'
+    },
+    height: [Number, String],
+    hideDefaultFooter: Boolean,
+    hideDefaultHeader: Boolean,
+    caption: String,
+    dense: Boolean,
+    footerProps: Object,
+    headerProps: Object,
+    calculateWidths: Boolean
+  },
+
+  data () {
+    return {
+      internalGroupBy: [] as string[],
+      openCache: {} as { [key: string]: boolean },
+      widths: [] as number[]
+    }
+  },
+
+  computed: {
+    computedHeaders (): TableHeader[] {
+      const headers = this.headers.filter(h => h.value === undefined || !this.internalGroupBy.find(v => v === h.value))
+
+      this.showSelect && headers.unshift({ text: '', value: 'dataTableSelect', sortable: false, width: '1px' })
+      this.showExpand && headers.unshift({ text: '', value: 'dataTableExpand', sortable: false, width: '1px' })
+
+      return headers
+    },
+    isMobile (): boolean {
+      return !!(this.$vuetify.breakpoint as any)[this.mobileBreakpoint] // TODO: fix typing
+    }
+  },
+
+  mounted () {
+    // if ((!this.sortBy || !this.sortBy.length) && (!this.options.sortBy || !this.options.sortBy.length)) {
+    //   const firstSortable = this.headers.find(h => !('sortable' in h) || !!h.sortable)
+    //   if (firstSortable) this.updateOptions({ sortBy: [firstSortable.value], sortDesc: [false] })
+    // }
+
+    if (this.calculateWidths) {
+      window.addEventListener('resize', this.calcWidths)
+    }
+
+    this.calcWidths()
+  },
+
+  beforeDestroy () {
+    if (this.calculateWidths) {
+      window.removeEventListener('resize', this.calcWidths)
+    }
+  },
+
+  methods: {
+    calcWidths () {
+      this.widths = Array.from(this.$el.querySelectorAll('th')).map(e => e.clientWidth)
+    },
+    customFilterWithColumns (items: any[], search: string) {
+      const filterableHeaders = this.headers.filter(h => !!h.filter)
+      if (filterableHeaders.length) {
+        items = items.filter(i => filterableHeaders.every(h => h.filter!(getObjectValueByPath(i, h.value), this.search, i)))
+      }
+
+      return this.customFilter(items, search)
+    },
+    customSortWithHeaders (items: any[], sortBy: string[], sortDesc: boolean[], locale: string) {
+      const customSorters = this.computedHeaders.reduce((obj: Record<string, Function>, header: TableHeader) => {
+        if (header.sort) obj[header.value] = header.sort
+        return obj
+      }, {})
+
+      return this.customSort(items, sortBy, sortDesc, locale, customSorters)
+    },
+    createItemProps (item: any) {
+      const props = VDataIterator.options.methods.createItemProps.call(this, item)
+
+      // TODO: Will {}, props mess up .syncing?
+      return Object.assign(props, { headers: this.computedHeaders })
+    },
+    genCaption (props: DataProps) {
+      if (this.caption) return [this.$createElement('caption', [this.caption])]
+
+      return this.genSlots('caption', props)
+    },
+    genColgroup (props: DataProps) {
+      return this.$createElement('colgroup', this.computedHeaders.map(header => {
+        return this.$createElement('col', {
+          class: {
+            'divider': header.divider || header.resizable,
+            'resizable': header.resizable
+          },
+          style: {
+            width: header.width
+          }
+        })
+      }))
+    },
+    genLoading () {
+      const progress = this.$slots['progress'] ? this.$slots.progress : this.$createElement(VProgressLinear, {
+        props: {
+          color: this.loading === true ? 'primary' : this.loading,
+          height: 2,
+          indeterminate: true
+        }
+      })
+
+      const th = this.$createElement('th', {
+        staticClass: 'column',
+        attrs: {
+          colspan: this.computedHeaders.length
+        }
+      }, [progress])
+
+      return this.$createElement('tr', {
+        staticClass: 'v-data-table__progress'
+      }, [th])
+    },
+    genHeaders (props: DataProps) {
+      const data = {
+        props: {
+          ...this.headerProps,
+          headers: this.computedHeaders,
+          options: props.options,
+          mobile: this.isMobile
+        },
+        on: {
+          sort: props.sort,
+          group: props.group
+        }
+      }
+
+      const children: VNodeChildrenArrayContents = [this.genSlots('header', data)]
+
+      if (!this.hideDefaultHeader) {
+        const scopedSlots = getPrefixedScopedSlots('header.', this.$scopedSlots)
+        children.push(this.$createElement(VDataTableHeader, {
+          ...data,
+          scopedSlots
+        }))
+      }
+
+      if (this.loading) children.push(this.genLoading())
+
+      return children
+    },
+    genEmptyWrapper (content: VNodeChildrenArrayContents) {
+      return this.$createElement('tr', [
+        this.$createElement('td', {
+          attrs: {
+            colspan: this.computedHeaders.length
+          }
+        }, content)
+      ])
+    },
+    genItems (items: any[], props: DataProps): VNodeChildren {
+      const empty = this.genEmpty(props.pagination.itemsLength)
+      if (empty) return [empty]
+
+      return props.options.groupBy.length
+        ? this.genGroupedRows(props.groupedItems!, props)
+        : this.genRows(items, props)
+    },
+    genGroupedRows (groupedItems: Record<string, any[]>, props: DataProps): VNodeChildren {
+      const groups = Object.keys(groupedItems || {})
+
+      return groups.map(group => {
+        if (!this.openCache.hasOwnProperty(group)) this.$set(this.openCache, group, true)
+
+        if (this.$scopedSlots.group) {
+          return this.$scopedSlots.group({
+            group,
+            options: props.options,
+            items: groupedItems![group],
+            headers: this.computedHeaders
+          })
+        } else {
+          return this.genDefaultGroupedRow(group, groupedItems![group], props)
+        }
+      })
+    },
+    genDefaultGroupedRow (group: string, items: any[], props: DataProps) {
+      const isOpen = !!this.openCache[group]
+      const children: VNodeChildren = [
+        this.$createElement('template', { slot: 'row.content' }, this.genDefaultRows(props.groupedItems![group], props))
+      ]
+
+      if (this.$scopedSlots['group.header']) {
+        children.unshift(this.$createElement('template', { slot: 'column.header' }, [
+          this.$scopedSlots['group.header']!({ group, groupBy: props.options.groupBy, items, headers: this.computedHeaders })
+        ]))
+      } else {
+        const toggle = this.$createElement(VBtn, {
+          staticClass: 'ma-0',
+          props: {
+            icon: true,
+            small: true
+          },
+          on: {
+            click: () => this.$set(this.openCache, group, !this.openCache[group])
+          }
+        }, [this.$createElement(VIcon, [isOpen ? 'remove' : 'add'])])
+
+        const remove = this.$createElement(VBtn, {
+          staticClass: 'ma-0',
+          props: {
+            icon: true,
+            small: true
+          },
+          on: {
+            click: () => props.updateOptions({ groupBy: [], groupDesc: [] })
+          }
+        }, [this.$createElement(VIcon, ['close'])])
+
+        const column = this.$createElement('td', {
+          staticClass: 'text-xs-left',
+          attrs: {
+            colspan: this.computedHeaders.length
+          }
+        }, [toggle, `${props.options.groupBy[0]}: ${group}`, remove])
+
+        children.unshift(this.$createElement('template', { slot: 'column.header' }, [column]))
+      }
+
+      if (this.$scopedSlots['group.summary']) {
+        children.push(this.$createElement('template', { slot: 'column.summary' }, [
+          this.$scopedSlots['group.summary']!({ group, groupBy: props.options.groupBy, items, headers: this.computedHeaders })
+        ]))
+      }
+
+      return this.$createElement(VRowGroup, {
+        key: group,
+        props: {
+          value: isOpen
+        }
+      }, children)
+    },
+    genRows (items: any[], props: DataProps): VNodeChildren {
+      return this.$scopedSlots.item ? this.genScopedRows(items, props) : this.genDefaultRows(items, props)
+    },
+    genScopedRows (items: any[], props: DataProps): VNodeChildren {
+      return items.map((item: any) => this.$scopedSlots.item!(this.createItemProps(item)))
+    },
+    genDefaultRows (items: any[], props: DataProps): VNodeChildren {
+      return this.$scopedSlots['item.expanded']
+        ? items.map(item => this.genDefaultExpandedRow(item))
+        : items.map(item => this.genDefaultSimpleRow(item))
+    },
+    genDefaultExpandedRow (item: any): VNode {
+      const isExpanded = this.isExpanded(item)
+      const headerRow = this.genDefaultSimpleRow(item, isExpanded ? 'expanded expanded__row' : null)
+      const expandedRow = this.$createElement('tr', {
+        staticClass: 'expanded expanded__content'
+      }, [this.$scopedSlots['item.expanded']!({ item, headers: this.computedHeaders })])
+
+      return this.$createElement(VRowGroup, {
+        props: {
+          value: isExpanded
+        }
+      }, [
+        this.$createElement('template', { slot: 'row.header' }, [headerRow]),
+        this.$createElement('template', { slot: 'row.content' }, [expandedRow])
+      ])
+    },
+    genDefaultSimpleRow (item: any, classes: string | string[] | object | null = null): VNode {
+      const scopedSlots = getPrefixedScopedSlots('item.', this.$scopedSlots)
+
+      if (this.showSelect) {
+        const data = {
+          props: {
+            value: this.isSelected(item)
+          },
+          on: {
+            input: (v: any) => this.select(item, v)
+          }
+        }
+
+        const slot = scopedSlots['dataTableSelect']
+        scopedSlots['dataTableSelect'] = slot ? () => slot(data) : () => this.$createElement(VSimpleCheckbox, {
+          staticClass: 'v-data-table__checkbox',
+          ...data
+        })
+      }
+
+      const expanded = this.isExpanded(item)
+
+      if (this.showExpand) {
+        scopedSlots['dataTableExpand'] = () => this.$createElement(VIcon, {
+          staticClass: 'expand__icon',
+          class: {
+            'expand__icon--active': expanded
+          },
+          on: {
+            click: () => this.expand(item, !expanded)
+          }
+        }, [this.$vuetify.icons.expand as string]) // TODO: prop?
+      }
+
+      return this.$createElement(VRow, {
+        key: getObjectValueByPath(item, this.itemKey),
+        class: classes,
+        props: {
+          headers: this.computedHeaders,
+          item,
+          mobile: this.isMobile,
+          rtl: this.$vuetify.rtl
+        },
+        scopedSlots
+      })
+    },
+    genBody (props: DataProps): VNode | string | VNodeChildren {
+      if (this.$scopedSlots.body) return this.$scopedSlots.body!(props)
+
+      return this.$createElement('tbody', [
+        this.genSlots('body.prepend', props),
+        this.genItems(props.items, props),
+        this.genSlots('body.append', props)
+      ])
+    },
+    genFooters (props: DataProps) {
+      const data = {
+        props: {
+          ...this.footerProps,
+          options: props.options,
+          pagination: props.pagination
+        },
+        on: {
+          'update:options': (value: any) => props.updateOptions(value)
+        },
+        widths: this.widths,
+        headers: this.computedHeaders
+      }
+
+      const children: VNodeChildren = [
+        this.genSlots('footer', data)
+      ]
+
+      if (!this.hideDefaultFooter) {
+        children.push(this.$createElement(VDataFooter, data))
+      }
+
+      return children
+    },
+    genTable (props: DataProps): VNode {
+      return this.$createElement('div', {
+        staticClass: 'v-data-table__wrapper',
+        style: {
+          height: convertToUnit(this.height)
+        }
+      }, [
+        this.$createElement('table', [
+          this.genCaption(props),
+          this.genColgroup(props),
+          this.genHeaders(props),
+          this.genBody(props)
+        ])
+      ])
+    },
+    genDefaultScopedSlot (props: DataProps): VNode {
+      const classes = {
+        'v-data-table--dense': this.dense,
+        'v-data-table--fixed': !!this.height,
+        'v-data-table--mobile': this.isMobile,
+        ...this.themeClasses
+      }
+
+      // TODO: Do we have to support static? Is there another way?
+      // if (this.static) {
+      //   return this.$createElement('div', ['static'])
+      // }
+
+      if (this.virtualRows) {
+        return this.$createElement(VDataTableVirtual, {
+          class: classes,
+          props: {
+            itemsLength: props.items.length,
+            height: Number(this.height)
+          },
+          scopedSlots: {
+            items: ({ start, stop }) => this.genItems(props.items.slice(start, stop), props) as any // TODO: What is up with this typing?
+          }
+        }, [
+          this.$createElement('template', { slot: 'caption' }, this.genCaption(props)),
+          this.$createElement('template', { slot: 'header' }, this.genHeaders(props)),
+          this.$createElement('template', { slot: 'footer' }, this.genFooters(props))
+        ])
+      }
+
+      return this.$createElement('div', {
+        staticClass: 'v-data-table',
+        class: classes
+      }, [
+        this.genSlots('top'),
+        this.genTable(props),
+        this.genFooters(props)
+      ])
+    }
+  },
+
+  render (): VNode {
+    return this.$createElement(VData, {
+      props: {
+        ...this.$props,
+        customFilter: this.customFilterWithColumns,
+        customSort: this.customSortWithHeaders
+      },
+      on: {
+        'update:options': (v: any, old: any) => {
+          this.internalGroupBy = v.groupBy || []
+          !deepEqual(v, old) && this.$emit('update:options', v)
+        },
+        'update:page': (v: any) => this.$emit('update:page', v),
+        'update:itemsPerPage': (v: any) => this.$emit('update:itemsPerPage', v),
+        'update:sortBy': (v: any) => this.$emit('update:sortBy', v),
+        'update:sortDesc': (v: any) => this.$emit('update:sortDesc', v),
+        'update:groupBy': (v: any) => this.$emit('update:groupBy', v),
+        'update:groupDesc': (v: any) => this.$emit('update:groupDesc', 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)
+        },
+        'pageCount': (v: number) => this.$emit('pageCount', v)
+      },
+      scopedSlots: {
+        default: this.genDefaultScopedSlot as any
+      }
+    })
+  }
+})
diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeader.ts b/packages/vuetify/src/components/VDataTable/VDataTableHeader.ts
new file mode 100644
index 00000000000..1dc432a7c31
--- /dev/null
+++ b/packages/vuetify/src/components/VDataTable/VDataTableHeader.ts
@@ -0,0 +1,27 @@
+import Vue from 'vue'
+import dedupeModelListeners from '../../util/dedupeModelListeners'
+import rebuildSlots from '../../util/rebuildFunctionalSlots'
+
+import VDataTableHeaderMobile from './VDataTableHeaderMobile'
+import VDataTableHeaderDesktop from './VDataTableHeaderDesktop'
+
+export default Vue.extend({
+  name: 'v-data-table-header',
+
+  functional: true,
+
+  props: {
+    mobile: Boolean
+  },
+
+  render (h, { props, data, slots }) {
+    dedupeModelListeners(data)
+    const children = rebuildSlots(slots(), h)
+
+    if (props.mobile) {
+      return h(VDataTableHeaderMobile, data, children)
+    } else {
+      return h(VDataTableHeaderDesktop, data, children)
+    }
+  }
+})
diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaderDesktop.ts b/packages/vuetify/src/components/VDataTable/VDataTableHeaderDesktop.ts
new file mode 100644
index 00000000000..d061cbed5d6
--- /dev/null
+++ b/packages/vuetify/src/components/VDataTable/VDataTableHeaderDesktop.ts
@@ -0,0 +1,92 @@
+// Helpers
+import { VNode } from 'vue'
+import mixins from '../../util/mixins'
+import header, { TableHeader } from './mixins/header'
+import { getTextAlignment } from '../../util/helpers'
+
+export default mixins(header).extend({
+  name: 'v-data-table-header-desktop',
+
+  methods: {
+    genGroupByToggle (header: TableHeader) {
+      return this.$createElement('span', {
+        on: {
+          click: () => this.$emit('group', header.value)
+        }
+      }, ['group'])
+    },
+    genHeader (header: TableHeader) {
+      const listeners: any = {}
+      const children = []
+      const attrs = {
+        role: 'columnheader',
+        scope: 'col',
+        'aria-label': header.text || '',
+        'aria-sort': 'none'
+      }
+
+      let classes = {
+        [getTextAlignment(header.align, this.$vuetify.rtl)]: true
+      }
+
+      if (header.value === 'dataTableSelect') {
+        children.push(this.genSelectAll())
+      } else {
+        children.push(this.$scopedSlots[header.value]
+          ? this.$scopedSlots[header.value]!(header)
+          : this.$createElement('span', [header.text])
+        )
+
+        if (header.sortable || !header.hasOwnProperty('sortable')) {
+          listeners['click'] = () => this.$emit('sort', header.value)
+
+          const sortIndex = this.options.sortBy.findIndex(k => k === header.value)
+          const beingSorted = sortIndex >= 0
+          const isDesc = this.options.sortDesc[sortIndex]
+
+          classes = {
+            ...classes,
+            'sortable': true,
+            'active': beingSorted,
+            'asc': beingSorted && !isDesc,
+            'desc': beingSorted && isDesc
+          }
+
+          if (beingSorted) {
+            attrs['aria-sort'] = isDesc ? 'descending' : 'ascending'
+            attrs['aria-label'] += isDesc
+              ? this.$vuetify.t('$vuetify.dataTable.ariaLabel.sortDescending')
+              : this.$vuetify.t('$vuetify.dataTable.ariaLabel.sortAscending')
+          } else {
+            attrs['aria-label'] += this.$vuetify.t('$vuetify.dataTable.ariaLabel.sortNone')
+          }
+
+          if (header.align === 'end') children.unshift(this.genSortIcon())
+          else children.push(this.genSortIcon())
+
+          if (this.options.multiSort && beingSorted) {
+            children.push(this.$createElement('span', { class: 'badge' }, [String(sortIndex + 1)]))
+          }
+        }
+
+        if (this.dataTable.showGroupBy) {
+          children.push(this.genGroupByToggle(header))
+        }
+      }
+
+      return this.$createElement('th', {
+        attrs,
+        class: classes,
+        on: listeners
+      }, children)
+    }
+  },
+
+  render (): VNode {
+    return this.$createElement('thead', {
+      staticClass: 'v-data-table-header'
+    }, [
+      this.$createElement('tr', this.headers.map(header => this.genHeader(header)))
+    ])
+  }
+})
diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaderMobile.ts b/packages/vuetify/src/components/VDataTable/VDataTableHeaderMobile.ts
new file mode 100644
index 00000000000..2004606a5de
--- /dev/null
+++ b/packages/vuetify/src/components/VDataTable/VDataTableHeaderMobile.ts
@@ -0,0 +1,80 @@
+import { VNode, VNodeChildrenArrayContents } from 'vue'
+import mixins from '../../util/mixins'
+import VSelect from '../VSelect/VSelect'
+import VChip from '../VChip'
+import header from './mixins/header'
+
+export default mixins(header).extend({
+  name: 'v-data-table-header-mobile',
+
+  methods: {
+    genSortChip (props: any) {
+      const children: VNodeChildrenArrayContents = [props.item.text]
+
+      const sortIndex = this.options.sortBy.findIndex(k => k === props.item.value)
+      const beingSorted = sortIndex >= 0
+      const isDesc = this.options.sortDesc[sortIndex]
+
+      children.push(this.$createElement('div', {
+        staticClass: 'v-chip__close',
+        class: {
+          'sortable': true,
+          'active': beingSorted,
+          'asc': beingSorted && !isDesc,
+          'desc': beingSorted && isDesc
+        }
+      }, [this.genSortIcon()]))
+
+      return this.$createElement(VChip, {
+        staticClass: 'sortable',
+        nativeOn: {
+          click: (e: MouseEvent) => {
+            e.stopPropagation()
+            this.$emit('sort', props.item.value)
+            // this.dataTable.resetExpanded()
+            // this.dataTable.sort(props.item.value)
+          }
+        }
+      }, children)
+    },
+    genSortSelect () {
+      return this.$createElement(VSelect, {
+        props: {
+          label: 'Sort by',
+          items: this.headers.filter(h => h.value !== 'dataTableSelect'),
+          hideDetails: true,
+          multiple: this.options.multiSort,
+          value: this.options.multiSort ? this.options.sortBy : this.options.sortBy[0]
+        },
+        on: {
+          change: (v: string | string[]) => this.$emit('sort', v)
+        },
+        scopedSlots: {
+          selection: props => this.genSortChip(props) as any // TODO: whyyy?
+        }
+      })
+    }
+  },
+
+  render (h): VNode {
+    const children: VNodeChildrenArrayContents = []
+
+    if (this.headers.find(header => header.value === 'dataTableSelect')) {
+      children.push(this.genSelectAll())
+    }
+
+    children.push(this.genSortSelect())
+
+    const th = h('th', {
+      attrs: {
+        colspan: this.headers.length
+      }
+    }, [h('div', children)])
+
+    const tr = h('tr', [th])
+
+    return h('thead', {
+      staticClass: 'v-data-table-header v-data-table-header--mobile'
+    }, [tr])
+  }
+})
diff --git a/packages/vuetify/src/components/VDataTable/VDataTableVirtual.ts b/packages/vuetify/src/components/VDataTable/VDataTableVirtual.ts
new file mode 100644
index 00000000000..74cbd400df9
--- /dev/null
+++ b/packages/vuetify/src/components/VDataTable/VDataTableVirtual.ts
@@ -0,0 +1,126 @@
+import Vue, { VNode } from 'vue'
+import { convertToUnit } from '../../util/helpers'
+
+export default Vue.extend({
+  name: 'v-data-table-virtual',
+
+  props: {
+    bufferLength: {
+      type: Number,
+      default: 10
+    },
+    headerHeight: {
+      type: Number,
+      default: 48
+    },
+    height: Number,
+    itemsLength: Number,
+    rowHeight: {
+      type: Number,
+      default: 48
+    }
+  },
+
+  data: () => ({
+    scrollTop: 0
+  }),
+
+  computed: {
+    bufferHeight (): number {
+      return (this.bufferLength * this.rowHeight) / 2
+    },
+    totalHeight (): number {
+      const headerHeight = this.$slots.header ? this.headerHeight : 0
+      return (this.itemsLength * this.rowHeight) + headerHeight
+    },
+    startIndex (): number {
+      return Math.max(0, Math.ceil((this.scrollTop - this.bufferHeight) / this.rowHeight))
+    },
+    offsetTop (): number {
+      return Math.max(0, this.startIndex * this.rowHeight)
+    },
+    visibleRows (): number {
+      return Math.ceil(Number(this.height) / this.rowHeight) + this.bufferLength
+    },
+    stopIndex (): number {
+      return this.startIndex + this.visibleRows
+    },
+    offsetBottom (): number {
+      return Math.max(0, ((this.itemsLength - this.visibleRows) * this.rowHeight) - this.offsetTop)
+    }
+  },
+
+  watch: {
+    scrollTop: 'setScrollTop'
+  },
+
+  mounted () {
+    this.setScrollTop()
+  },
+
+  methods: {
+    createStyleHeight (height: number) {
+      return {
+        height: `${height}px`
+      }
+    },
+    setScrollTop () {
+      const wrapper = this.$refs.wrapper as Element
+      wrapper.scrollTop = this.scrollTop
+    },
+    genScroller () {
+      return this.$createElement('div', {
+        ref: 'scroller',
+        staticClass: 'v-data-table-virtual__scroller',
+        on: {
+          scroll: (e: Event) => {
+            const target = e.target as Element
+            this.scrollTop = target.scrollTop
+          }
+        }
+      }, [
+        this.$createElement('div', {
+          style: this.createStyleHeight(this.totalHeight)
+        })
+      ])
+    },
+    genBody () {
+      return this.$createElement('tbody', [
+        this.$createElement('tr', { style: this.createStyleHeight(this.offsetTop) }),
+        this.$scopedSlots.items ? this.$scopedSlots.items({ start: this.startIndex, stop: this.stopIndex }) : null,
+        this.$createElement('tr', { style: this.createStyleHeight(this.offsetBottom) })
+      ])
+    },
+    genWrapper () {
+      return this.$createElement('div', {
+        ref: 'wrapper',
+        staticClass: 'v-data-table-virtual__wrapper',
+        on: {
+          mousewheel: (e: WheelEvent) => {
+            const scroller = this.$refs.scroller as Element
+            scroller.scrollTop = Math.max(0, Math.min(this.totalHeight, this.scrollTop + e.deltaY))
+          }
+        }
+      }, [
+        this.$createElement('table', [
+          this.$slots.caption,
+          this.$slots.header,
+          this.genBody()
+        ])
+      ])
+    }
+  },
+
+  render (h): VNode {
+    return h('div', {
+      staticClass: 'v-data-table v-data-table-virtual',
+      style: {
+        height: convertToUnit(this.height)
+      }
+    }, [
+      this.genWrapper(),
+      this.genScroller(),
+      this.$slots.footer
+    ])
+  }
+})
diff --git a/packages/vuetify/src/components/VDataTable/VRow.ts b/packages/vuetify/src/components/VDataTable/VRow.ts
new file mode 100644
index 00000000000..897ccc80f4b
--- /dev/null
+++ b/packages/vuetify/src/components/VDataTable/VRow.ts
@@ -0,0 +1,57 @@
+// Types
+import Vue, { VNode } from 'vue'
+import { PropValidator } from 'vue/types/options'
+import { TableHeader } from './mixins/header'
+
+// Utils
+import { getObjectValueByPath, getTextAlignment } from '../../util/helpers'
+
+export default Vue.extend({
+  name: 'v-row',
+
+  functional: true,
+
+  props: {
+    headers: Array as PropValidator<TableHeader[]>,
+    item: Object,
+    mobile: Boolean,
+    rtl: Boolean
+  },
+
+  render (h, { props, slots, data }): VNode {
+    const computedSlots = slots()
+
+    const columns = props.headers.map(header => {
+      const classes = {
+        [getTextAlignment(header.align, props.rtl)]: true
+      }
+
+      const children = []
+      const value = getObjectValueByPath(props.item, header.value)
+
+      const scopedSlot = data.scopedSlots && data.scopedSlots[header.value]
+      const regularSlot = computedSlots[header.value]
+
+      if (scopedSlot) {
+        children.push(scopedSlot({ item: props.item, header, value, mobile: props.mobile }))
+      } else if (regularSlot) {
+        children.push(regularSlot)
+      } else {
+        if (props.mobile) {
+          children.push(h('div', { class: 'd-flex justify-content-between' }, [
+            h('span', { staticClass: 'v-row__header' }, [header.text]),
+            h('span', { staticClass: 'v-row__value' }, [value])
+          ]))
+        } else {
+          children.push(value)
+        }
+      }
+
+      return h('td', {
+        class: classes
+      }, children)
+    }) as any
+
+    return h('tr', data, columns)
+  }
+})
diff --git a/packages/vuetify/src/components/VDataTable/VRowGroup.ts b/packages/vuetify/src/components/VDataTable/VRowGroup.ts
new file mode 100644
index 00000000000..7701bd04389
--- /dev/null
+++ b/packages/vuetify/src/components/VDataTable/VRowGroup.ts
@@ -0,0 +1,48 @@
+import Vue, { VNode } from 'vue'
+
+export default Vue.extend({
+  name: 'v-row-group',
+
+  functional: true,
+
+  props: {
+    value: {
+      type: Boolean,
+      default: true
+    },
+    headerClass: {
+      type: String,
+      default: 'v-row-group__header'
+    },
+    contentClass: String,
+    summaryClass: {
+      type: String,
+      default: 'v-row-group__summary'
+    }
+  },
+
+  render (h, { slots, props }): VNode {
+    const computedSlots = slots()
+    const children = []
+
+    if (computedSlots['column.header']) {
+      children.push(h('tr', {
+        staticClass: props.headerClass
+      }, computedSlots['column.header']))
+    } else if (computedSlots['row.header']) {
+      children.push(...computedSlots['row.header'])
+    }
+
+    if (computedSlots['row.content'] && props.value) children.push(...computedSlots['row.content'])
+
+    if (computedSlots['column.summary']) {
+      children.push(h('tr', {
+        staticClass: props.summaryClass
+      }, computedSlots['column.summary']))
+    } else if (computedSlots['row.summary']) {
+      children.push(...computedSlots['row.summary'])
+    }
+
+    return children as any
+  }
+})
diff --git a/packages/vuetify/src/components/VDataTable/_mixins.sass b/packages/vuetify/src/components/VDataTable/_mixins.sass
new file mode 100644
index 00000000000..880d1c8f71a
--- /dev/null
+++ b/packages/vuetify/src/components/VDataTable/_mixins.sass
@@ -0,0 +1,56 @@
+@mixin data-table-theme($material)
+  background-color: map-get($material, 'cards')
+  color: map-deep-get($material, 'text', 'primary')
+
+  &--fixed
+    thead th
+      background: white
+      border-bottom: 0px !important
+      box-shadow: inset 0 -1px 0 rgba(map-get($material, 'fg-color'), map-get($material, 'divider-percent'))
+
+  thead
+    tr
+
+      &:last-child th
+        border-bottom: 1px solid rgba(map-get($material, 'fg-color'), map-get($material, 'divider-percent'))
+
+      th
+        // box-shadow: inset 0 -1px 0 rgba(map-get($material, 'fg-color'), map-get($material, 'divider-percent'))
+        color: rgba(map-get($material, 'text-color'), map-get($material, 'secondary-text-percent'))
+
+      &.sortable
+        i
+          color: rgba(map-get($material, 'fg-color'), map-get($material, 'disabledORhints-text-percent'))
+
+        &:hover
+          color: rgba(map-get($material, 'fg-color'), map-get($material, 'primary-text-percent'))
+
+        &.active
+          color: rgba(map-get($material, 'fg-color'), map-get($material, 'primary-text-percent'))
+
+          i
+            color: rgba(map-get($material, 'fg-color'), map-get($material, 'primary-text-percent'))
+
+  tbody
+    tr
+      &:not(:last-child)
+        border-bottom: 1px solid rgba(map-get($material, 'fg-color'), map-get($material, 'divider-percent'))
+
+      &.active
+        background: map-deep-get($material, 'table', 'active')
+
+      &:hover:not(.datatable__expand-row)
+        background: map-deep-get($material, 'table', 'hover')
+
+      &.expanded
+        border-bottom: 0
+
+        &.expanded__row
+          background: map-deep-get($material, 'table', 'active')
+
+        &.expanded__content
+          box-shadow: inset 0px 4px 8px -5px rgba(50, 50, 50, 0.75), inset 0px -4px 8px -5px rgba(50, 50, 50, 0.75)
+
+    .v-table__footer
+      .v-row
+        border-top: 1px solid rgba(map-get($material, 'fg-color'), map-get($material, 'divider-percent'))
diff --git a/packages/vuetify/src/components/VDataTable/_variables.scss b/packages/vuetify/src/components/VDataTable/_variables.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/vuetify/src/components/VDataTable/index.js b/packages/vuetify/src/components/VDataTable/index.ts
similarity index 56%
rename from packages/vuetify/src/components/VDataTable/index.js
rename to packages/vuetify/src/components/VDataTable/index.ts
index de5db911a73..a4968f90a64 100644
--- a/packages/vuetify/src/components/VDataTable/index.js
+++ b/packages/vuetify/src/components/VDataTable/index.ts
@@ -1,15 +1,21 @@
 import { createSimpleFunctional } from '../../util/helpers'
 
 import VDataTable from './VDataTable'
+import VDataTableHeader from './VDataTableHeader'
+import VRow from './VRow'
+import VRowGroup from './VRowGroup'
 import VEditDialog from './VEditDialog'
 
 const VTableOverflow = createSimpleFunctional('v-table__overflow')
 
-export { VDataTable, VEditDialog, VTableOverflow }
+export { VDataTable, VEditDialog, VTableOverflow, VRow, VRowGroup, VDataTableHeader }
 
 export default {
   $_vuetify_subcomponents: {
     VDataTable,
+    VDataTableHeader,
+    VRow,
+    VRowGroup,
     VEditDialog,
     VTableOverflow
   }
diff --git a/packages/vuetify/src/components/VDataTable/mixins/body.js b/packages/vuetify/src/components/VDataTable/mixins/body.js
deleted file mode 100644
index 9f44212aab0..00000000000
--- a/packages/vuetify/src/components/VDataTable/mixins/body.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import ExpandTransitionGenerator from '../../transitions/expand-transition'
-
-import { getObjectValueByPath } from '../../../util/helpers'
-
-/* @vue/component */
-export default {
-  methods: {
-    genTBody () {
-      const children = this.genItems()
-
-      return this.$createElement('tbody', children)
-    },
-    genExpandedRow (props) {
-      const children = []
-
-      if (this.isExpanded(props.item)) {
-        const expand = this.$createElement('div', {
-          class: 'v-datatable__expand-content',
-          key: getObjectValueByPath(props.item, this.itemKey)
-        }, [this.$scopedSlots.expand(props)])
-
-        children.push(expand)
-      }
-
-      const transition = this.$createElement('transition-group', {
-        class: 'v-datatable__expand-col',
-        attrs: { colspan: this.headerColumns },
-        props: {
-          tag: 'td'
-        },
-        on: ExpandTransitionGenerator('v-datatable__expand-col--expanded')
-      }, children)
-
-      return this.genTR([transition], { class: 'v-datatable__expand-row' })
-    },
-    genFilteredItems () {
-      if (!this.$scopedSlots.items) {
-        return null
-      }
-
-      const rows = []
-      for (let index = 0, len = this.filteredItems.length; index < len; ++index) {
-        const item = this.filteredItems[index]
-        const props = this.createProps(item, index)
-        const row = this.$scopedSlots.items(props)
-
-        rows.push(this.hasTag(row, 'td')
-          ? this.genTR(row, {
-            key: this.itemKey ? getObjectValueByPath(props.item, this.itemKey) : index,
-            attrs: { active: this.isSelected(item) }
-          })
-          : row)
-
-        if (this.$scopedSlots.expand) {
-          const expandRow = this.genExpandedRow(props)
-          rows.push(expandRow)
-        }
-      }
-
-      return rows
-    },
-    genEmptyItems (content) {
-      if (this.hasTag(content, 'tr')) {
-        return content
-      } else if (this.hasTag(content, 'td')) {
-        return this.genTR(content)
-      } else {
-        return this.genTR([this.$createElement('td', {
-          class: {
-            'text-xs-center': typeof content === 'string'
-          },
-          attrs: { colspan: this.headerColumns }
-        }, content)])
-      }
-    }
-  }
-}
diff --git a/packages/vuetify/src/components/VDataTable/mixins/foot.js b/packages/vuetify/src/components/VDataTable/mixins/foot.js
deleted file mode 100644
index 0f43475c15e..00000000000
--- a/packages/vuetify/src/components/VDataTable/mixins/foot.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/* @vue/component */
-export default {
-  methods: {
-    genTFoot () {
-      if (!this.$slots.footer) {
-        return null
-      }
-
-      const footer = this.$slots.footer
-      const row = this.hasTag(footer, 'td') ? this.genTR(footer) : footer
-
-      return this.$createElement('tfoot', [row])
-    },
-    genActionsFooter () {
-      if (this.hideActions) {
-        return null
-      }
-
-      return this.$createElement('div', {
-        'class': this.classes
-      }, this.genActions())
-    }
-  }
-}
diff --git a/packages/vuetify/src/components/VDataTable/mixins/head.js b/packages/vuetify/src/components/VDataTable/mixins/head.js
deleted file mode 100644
index 90ab5acacb8..00000000000
--- a/packages/vuetify/src/components/VDataTable/mixins/head.js
+++ /dev/null
@@ -1,138 +0,0 @@
-import { consoleWarn } from '../../../util/console'
-
-import VCheckbox from '../../VCheckbox'
-import VIcon from '../../VIcon'
-
-/* @vue/component */
-export default {
-  props: {
-    sortIcon: {
-      type: String,
-      default: '$vuetify.icons.sort'
-    }
-  },
-
-  methods: {
-    genTHead () {
-      if (this.hideHeaders) return // Exit Early since no headers are needed.
-
-      let children = []
-
-      if (this.$scopedSlots.headers) {
-        const row = this.$scopedSlots.headers({
-          headers: this.headers,
-          indeterminate: this.indeterminate,
-          all: this.everyItem
-        })
-
-        children = [this.hasTag(row, 'th') ? this.genTR(row) : row, this.genTProgress()]
-      } else {
-        const row = this.headers.map((o, i) => this.genHeader(o, this.headerKey ? o[this.headerKey] : i))
-        const checkbox = this.$createElement(VCheckbox, {
-          props: {
-            dark: this.dark,
-            light: this.light,
-            color: this.selectAll === true ? '' : this.selectAll,
-            hideDetails: true,
-            inputValue: this.everyItem,
-            indeterminate: this.indeterminate
-          },
-          on: { change: this.toggle }
-        })
-
-        this.hasSelectAll && row.unshift(this.$createElement('th', [checkbox]))
-
-        children = [this.genTR(row), this.genTProgress()]
-      }
-
-      return this.$createElement('thead', [children])
-    },
-    genHeader (header, key) {
-      const array = [
-        this.$scopedSlots.headerCell
-          ? this.$scopedSlots.headerCell({ header })
-          : header[this.headerText]
-      ]
-
-      return this.$createElement('th', ...this.genHeaderData(header, array, key))
-    },
-    genHeaderData (header, children, key) {
-      const classes = ['column']
-      const data = {
-        key,
-        attrs: {
-          role: 'columnheader',
-          scope: 'col',
-          width: header.width || null,
-          'aria-label': header[this.headerText] || '',
-          'aria-sort': 'none'
-        }
-      }
-
-      if (header.sortable == null || header.sortable) {
-        this.genHeaderSortingData(header, children, data, classes)
-      } else {
-        data.attrs['aria-label'] += ': Not sorted.' // TODO: Localization
-      }
-
-      classes.push(`text-xs-${header.align || 'left'}`)
-      if (Array.isArray(header.class)) {
-        classes.push(...header.class)
-      } else if (header.class) {
-        classes.push(header.class)
-      }
-      data.class = classes
-
-      return [data, children]
-    },
-    genHeaderSortingData (header, children, data, classes) {
-      if (!('value' in header)) {
-        consoleWarn('Headers must have a value property that corresponds to a value in the v-model array', this)
-      }
-
-      data.attrs.tabIndex = 0
-      data.on = {
-        click: () => {
-          this.expanded = {}
-          this.sort(header.value)
-        },
-        keydown: e => {
-          // check for space
-          if (e.keyCode === 32) {
-            e.preventDefault()
-            this.sort(header.value)
-          }
-        }
-      }
-
-      classes.push('sortable')
-      const icon = this.$createElement(VIcon, {
-        props: {
-          small: true
-        }
-      }, this.sortIcon)
-      if (!header.align || header.align === 'left') {
-        children.push(icon)
-      } else {
-        children.unshift(icon)
-      }
-
-      const pagination = this.computedPagination
-      const beingSorted = pagination.sortBy === header.value
-      if (beingSorted) {
-        classes.push('active')
-        if (pagination.descending) {
-          classes.push('desc')
-          data.attrs['aria-sort'] = 'descending'
-          data.attrs['aria-label'] += ': Sorted descending. Activate to remove sorting.' // TODO: Localization
-        } else {
-          classes.push('asc')
-          data.attrs['aria-sort'] = 'ascending'
-          data.attrs['aria-label'] += ': Sorted ascending. Activate to sort descending.' // TODO: Localization
-        }
-      } else {
-        data.attrs['aria-label'] += ': Not sorted. Activate to sort ascending.' // TODO: Localization
-      }
-    }
-  }
-}
diff --git a/packages/vuetify/src/components/VDataTable/mixins/header.ts b/packages/vuetify/src/components/VDataTable/mixins/header.ts
new file mode 100644
index 00000000000..2a409623d65
--- /dev/null
+++ b/packages/vuetify/src/components/VDataTable/mixins/header.ts
@@ -0,0 +1,82 @@
+// Helpers
+import Vue from 'vue'
+import { PropValidator } from 'vue/types/options'
+import { DataOptions } from '../../VData/VData'
+import VIcon from '../../VIcon'
+import VSimpleCheckbox from '../../VCheckbox/VSimpleCheckbox'
+import mixins from '../../../util/mixins'
+import { VDataTable } from '../'
+
+export interface TableHeader {
+  text: string
+  value: string
+  align?: 'start' | 'center' | 'end'
+  sortable?: boolean
+  resizable?: boolean
+  divider?: boolean
+  class?: string | string[]
+  width?: string | number
+  type?: 'showExpand' | 'showSelect'
+  filter?: (value: any, search: string, item: any) => boolean
+  sort?: (a: any, b: any) => number
+}
+
+type VDataTableInstance = InstanceType<typeof VDataTable>
+
+interface options extends Vue {
+  dataTable: VDataTableInstance
+}
+
+export default mixins<options>().extend({
+  inject: ['dataTable'],
+
+  props: {
+    headers: {
+      type: Array,
+      required: true
+    } as PropValidator<TableHeader[]>,
+    options: {
+      type: Object,
+      default: () => ({
+        page: 1,
+        itemsPerPage: 10,
+        sortBy: [],
+        sortDesc: [],
+        groupBy: [],
+        groupDesc: [],
+        multiSort: false,
+        mustSort: false
+      })
+    } as PropValidator<DataOptions>,
+    sortIcon: {
+      type: String,
+      default: '$vuetify.icons.sort'
+    }
+  },
+
+  methods: {
+    genSelectAll () {
+      const data = {
+        props: {
+          value: this.dataTable.everyItem,
+          indeterminate: !this.dataTable.everyItem && this.dataTable.someItems
+        },
+        on: {
+          input: (v: boolean) => this.dataTable.toggleSelectAll(v)
+        }
+      }
+
+      if (this.$scopedSlots.dataTableSelect) {
+        return this.$scopedSlots.dataTableSelect(data)
+      }
+
+      return this.$createElement(VSimpleCheckbox, {
+        staticClass: 'v-data-table__checkbox',
+        ...data
+      })
+    },
+    genSortIcon () {
+      return this.$createElement(VIcon, [this.sortIcon])
+    }
+  }
+})
diff --git a/packages/vuetify/src/components/VDataTable/mixins/progress.js b/packages/vuetify/src/components/VDataTable/mixins/progress.js
deleted file mode 100644
index 82403a46fdb..00000000000
--- a/packages/vuetify/src/components/VDataTable/mixins/progress.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/* @vue/component */
-export default {
-  methods: {
-    genTProgress () {
-      const col = this.$createElement('th', {
-        staticClass: 'column',
-        attrs: {
-          colspan: this.headerColumns
-        }
-      }, [this.genProgress()])
-
-      return this.genTR([col], {
-        staticClass: 'v-datatable__progress'
-      })
-    }
-  }
-}
diff --git a/packages/vuetify/src/components/index.ts b/packages/vuetify/src/components/index.ts
index 225fef9d0d5..19eaac69906 100644
--- a/packages/vuetify/src/components/index.ts
+++ b/packages/vuetify/src/components/index.ts
@@ -16,6 +16,7 @@ export * from './VChip'
 export * from './VChipGroup'
 export * from './VCombobox'
 export * from './VCounter'
+export * from './VData'
 export * from './VDataIterator'
 export * from './VDataTable'
 export * from './VDatePicker'
diff --git a/packages/vuetify/src/locale/en.ts b/packages/vuetify/src/locale/en.ts
index a0a3d48566c..89eeef82d89 100644
--- a/packages/vuetify/src/locale/en.ts
+++ b/packages/vuetify/src/locale/en.ts
@@ -1,15 +1,21 @@
 export default {
   close: 'Close',
   dataIterator: {
-    rowsPerPageText: 'Items per page:',
-    rowsPerPageAll: 'All',
+    itemsPerPageText: 'Items per page:',
+    itemsPerPageAll: 'All',
     pageText: '{0}-{1} of {2}',
     noResultsText: 'No matching records found',
     nextPage: 'Next page',
-    prevPage: 'Previous page'
+    prevPage: 'Previous page',
+    loadingText: 'Loading items...'
   },
   dataTable: {
-    rowsPerPageText: 'Rows per page:'
+    itemsPerPageText: 'Rows per page:',
+    ariaLabel: {
+      sortDescending: ': Sorted descending. Activate to remove sorting.',
+      sortAscending: ': Sorted ascending. Activate to sort descending.',
+      sortNone: ': Not sorted. Activate to sort ascending.'
+    }
   },
   noDataText: 'No data available',
   carousel: {
diff --git a/packages/vuetify/src/mixins/data-iterable.js b/packages/vuetify/src/mixins/data-iterable.js
deleted file mode 100644
index e1f100ffad0..00000000000
--- a/packages/vuetify/src/mixins/data-iterable.js
+++ /dev/null
@@ -1,495 +0,0 @@
-import VBtn from '../components/VBtn'
-import VIcon from '../components/VIcon'
-import VSelect from '../components/VSelect'
-
-import Filterable from './filterable'
-import Themeable from './themeable'
-import Loadable from './loadable'
-
-import { getObjectValueByPath, isObject } from '../util/helpers'
-import { consoleWarn } from '../util/console'
-
-/**
- * DataIterable
- *
- * @mixin
- *
- * Base behavior for data table and data iterator
- * providing selection, pagination, sorting and filtering.
- *
- */
-/* @vue/component */
-export default {
-  name: 'data-iterable',
-
-  mixins: [Filterable, Loadable, Themeable],
-
-  props: {
-    expand: Boolean,
-    hideActions: Boolean,
-    disableInitialSort: Boolean,
-    mustSort: Boolean,
-    noResultsText: {
-      type: String,
-      default: '$vuetify.dataIterator.noResultsText'
-    },
-    nextIcon: {
-      type: String,
-      default: '$vuetify.icons.next'
-    },
-    prevIcon: {
-      type: String,
-      default: '$vuetify.icons.prev'
-    },
-    rowsPerPageItems: {
-      type: Array,
-      default () {
-        return [
-          5,
-          10,
-          25,
-          {
-            text: '$vuetify.dataIterator.rowsPerPageAll',
-            value: -1
-          }
-        ]
-      }
-    },
-    rowsPerPageText: {
-      type: String,
-      default: '$vuetify.dataIterator.rowsPerPageText'
-    },
-    selectAll: [Boolean, String],
-    search: {
-      required: false
-    },
-    filter: {
-      type: Function,
-      default: (val, search) => {
-        return val != null &&
-          typeof val !== 'boolean' &&
-          val.toString().toLowerCase().indexOf(search) !== -1
-      }
-    },
-    customFilter: {
-      type: Function,
-      default: (items, search, filter) => {
-        search = search.toString().toLowerCase()
-        if (search.trim() === '') return items
-
-        return items.filter(i => (
-          Object.keys(i).some(j => filter(i[j], search))
-        ))
-      }
-    },
-    customSort: {
-      type: Function,
-      default: (items, index, isDescending) => {
-        if (index === null) return items
-
-        return items.sort((a, b) => {
-          let sortA = getObjectValueByPath(a, index)
-          let sortB = getObjectValueByPath(b, index)
-
-          if (isDescending) {
-            [sortA, sortB] = [sortB, sortA]
-          }
-
-          // Check if both are numbers
-          if (!isNaN(sortA) && !isNaN(sortB)) {
-            return sortA - sortB
-          }
-
-          // Check if both cannot be evaluated
-          if (sortA === null && sortB === null) {
-            return 0
-          }
-
-          [sortA, sortB] = [sortA, sortB]
-            .map(s => (
-              (s || '').toString().toLocaleLowerCase()
-            ))
-
-          if (sortA > sortB) return 1
-          if (sortA < sortB) return -1
-
-          return 0
-        })
-      }
-    },
-    value: {
-      type: Array,
-      default: () => []
-    },
-    items: {
-      type: Array,
-      required: true,
-      default: () => []
-    },
-    totalItems: {
-      type: Number,
-      default: null
-    },
-    itemKey: {
-      type: String,
-      default: 'id'
-    },
-    pagination: {
-      type: Object,
-      default: () => {}
-    }
-  },
-
-  data: () => ({
-    searchLength: 0,
-    defaultPagination: {
-      descending: false,
-      page: 1,
-      rowsPerPage: 5,
-      sortBy: null,
-      totalItems: 0
-    },
-    expanded: {},
-    actionsClasses: 'v-data-iterator__actions',
-    actionsRangeControlsClasses: 'v-data-iterator__actions__range-controls',
-    actionsSelectClasses: 'v-data-iterator__actions__select',
-    actionsPaginationClasses: 'v-data-iterator__actions__pagination'
-  }),
-
-  computed: {
-    computedPagination () {
-      return this.hasPagination
-        ? this.pagination
-        : this.defaultPagination
-    },
-    computedRowsPerPageItems () {
-      return this.rowsPerPageItems.map(item => {
-        return isObject(item)
-          ? Object.assign({}, item, {
-            text: this.$vuetify.lang.t(item.text)
-          })
-          : { value: item, text: Number(item).toLocaleString(this.$vuetify.lang.current) }
-      })
-    },
-    hasPagination () {
-      const pagination = this.pagination || {}
-
-      return Object.keys(pagination).length > 0
-    },
-    hasSelectAll () {
-      return this.selectAll !== undefined && this.selectAll !== false
-    },
-    itemsLength () {
-      if (this.hasSearch) return this.searchLength
-      return this.totalItems || this.items.length
-    },
-    indeterminate () {
-      return this.hasSelectAll && this.someItems && !this.everyItem
-    },
-    everyItem () {
-      return this.filteredItems.length &&
-        this.filteredItems.every(i => this.isSelected(i))
-    },
-    someItems () {
-      return this.filteredItems.some(i => this.isSelected(i))
-    },
-    getPage () {
-      const { rowsPerPage } = this.computedPagination
-
-      return rowsPerPage === Object(rowsPerPage)
-        ? rowsPerPage.value
-        : rowsPerPage
-    },
-    pageStart () {
-      return this.getPage === -1
-        ? 0
-        : (this.computedPagination.page - 1) * this.getPage
-    },
-    pageStop () {
-      return this.getPage === -1
-        ? this.itemsLength
-        : this.computedPagination.page * this.getPage
-    },
-    filteredItems () {
-      return this.filteredItemsImpl()
-    },
-    selected () {
-      const selected = {}
-      for (let index = 0; index < this.value.length; index++) {
-        const key = getObjectValueByPath(this.value[index], this.itemKey)
-        selected[key] = true
-      }
-      return selected
-    },
-    hasSearch () {
-      return this.search != null
-    }
-  },
-
-  watch: {
-    items () {
-      if (this.pageStart >= this.itemsLength) {
-        this.resetPagination()
-      }
-      const newItemKeys = new Set(this.items.map(item => getObjectValueByPath(item, this.itemKey)))
-      const selection = this.value.filter(item => newItemKeys.has(getObjectValueByPath(item, this.itemKey)))
-
-      if (selection.length !== this.value.length) {
-        this.$emit('input', selection)
-      }
-    },
-    search () {
-      this.$nextTick(() => {
-        this.updatePagination({ page: 1, totalItems: this.itemsLength })
-      })
-    },
-    'computedPagination.sortBy': 'resetPagination',
-    'computedPagination.descending': 'resetPagination'
-  },
-
-  methods: {
-    initPagination () {
-      if (!this.rowsPerPageItems.length) {
-        consoleWarn(`The prop 'rows-per-page-items' can not be empty`, this)
-      } else {
-        this.defaultPagination.rowsPerPage = this.rowsPerPageItems[0]
-      }
-
-      this.defaultPagination.totalItems = this.items.length
-
-      this.updatePagination(
-        Object.assign({}, this.defaultPagination, this.pagination)
-      )
-    },
-    updatePagination (val) {
-      const pagination = this.hasPagination
-        ? this.pagination
-        : this.defaultPagination
-      const updatedPagination = Object.assign({}, pagination, val)
-      this.$emit('update:pagination', updatedPagination)
-
-      if (!this.hasPagination) {
-        this.defaultPagination = updatedPagination
-      }
-    },
-    isSelected (item) {
-      return this.selected[getObjectValueByPath(item, this.itemKey)]
-    },
-    isExpanded (item) {
-      return this.expanded[getObjectValueByPath(item, this.itemKey)]
-    },
-    filteredItemsImpl (...additionalFilterArgs) {
-      if (this.totalItems) return this.items
-
-      let items = this.items.slice()
-
-      if (this.hasSearch) {
-        items = this.customFilter(items, this.search, this.filter, ...additionalFilterArgs)
-        this.searchLength = items.length
-      }
-
-      items = this.customSort(
-        items,
-        this.computedPagination.sortBy,
-        this.computedPagination.descending
-      )
-
-      return this.hideActions &&
-        !this.hasPagination
-        ? items
-        : items.slice(this.pageStart, this.pageStop)
-    },
-    resetPagination () {
-      this.computedPagination.page !== 1 &&
-        this.updatePagination({ page: 1 })
-    },
-    sort (index) {
-      const { sortBy, descending } = this.computedPagination
-      if (sortBy === null) {
-        this.updatePagination({ sortBy: index, descending: false })
-      } else if (sortBy === index && !descending) {
-        this.updatePagination({ descending: true })
-      } else if (sortBy !== index) {
-        this.updatePagination({ sortBy: index, descending: false })
-      } else if (!this.mustSort) {
-        this.updatePagination({ sortBy: null, descending: null })
-      } else {
-        this.updatePagination({ sortBy: index, descending: false })
-      }
-    },
-    toggle (value) {
-      const selected = Object.assign({}, this.selected)
-      for (let index = 0; index < this.filteredItems.length; index++) {
-        const key = getObjectValueByPath(this.filteredItems[index], this.itemKey)
-        selected[key] = value
-      }
-
-      this.$emit('input', this.items.filter(i => {
-        const key = getObjectValueByPath(i, this.itemKey)
-        return selected[key]
-      }))
-    },
-    createProps (item, index) {
-      const props = { item, index }
-      const keyProp = this.itemKey
-      const itemKey = getObjectValueByPath(item, keyProp)
-
-      Object.defineProperty(props, 'selected', {
-        get: () => this.selected[itemKey],
-        set: value => {
-          if (itemKey == null) {
-            consoleWarn(`"${keyProp}" attribute must be defined for item`, this)
-          }
-
-          let selected = this.value.slice()
-          if (value) selected.push(item)
-          else selected = selected.filter(i => getObjectValueByPath(i, keyProp) !== itemKey)
-          this.$emit('input', selected)
-        }
-      })
-
-      Object.defineProperty(props, 'expanded', {
-        get: () => this.expanded[itemKey],
-        set: value => {
-          if (itemKey == null) {
-            consoleWarn(`"${keyProp}" attribute must be defined for item`, this)
-          }
-
-          if (!this.expand) {
-            for (const key in this.expanded) {
-              this.expanded.hasOwnProperty(key) && this.$set(this.expanded, key, false)
-            }
-          }
-          this.$set(this.expanded, itemKey, value)
-        }
-      })
-
-      return props
-    },
-    genItems () {
-      if (!this.itemsLength && !this.items.length) {
-        const noData = this.$slots['no-data'] || this.$vuetify.lang.t(this.noDataText)
-        return [this.genEmptyItems(noData)]
-      }
-
-      if (!this.filteredItems.length) {
-        const noResults = this.$slots['no-results'] || this.$vuetify.lang.t(this.noResultsText)
-        return [this.genEmptyItems(noResults)]
-      }
-
-      return this.genFilteredItems()
-    },
-    genPrevIcon () {
-      return this.$createElement(VBtn, {
-        props: {
-          disabled: this.computedPagination.page === 1,
-          icon: true,
-          text: true
-        },
-        on: {
-          click: () => {
-            const page = this.computedPagination.page
-            this.updatePagination({ page: page - 1 })
-          }
-        },
-        attrs: {
-          'aria-label': this.$vuetify.lang.t('$vuetify.dataIterator.prevPage')
-        }
-      }, [this.$createElement(VIcon, this.$vuetify.rtl ? this.nextIcon : this.prevIcon)])
-    },
-    genNextIcon () {
-      const pagination = this.computedPagination
-      const disabled = pagination.rowsPerPage < 0 ||
-        pagination.page * pagination.rowsPerPage >= this.itemsLength ||
-        this.pageStop < 0
-
-      return this.$createElement(VBtn, {
-        props: {
-          disabled,
-          icon: true,
-          text: true
-        },
-        on: {
-          click: () => {
-            const page = this.computedPagination.page
-            this.updatePagination({ page: page + 1 })
-          }
-        },
-        attrs: {
-          'aria-label': this.$vuetify.lang.t('$vuetify.dataIterator.nextPage')
-        }
-      }, [this.$createElement(VIcon, this.$vuetify.rtl ? this.prevIcon : this.nextIcon)])
-    },
-    genSelect () {
-      return this.$createElement('div', {
-        'class': this.actionsSelectClasses
-      }, [
-        this.$vuetify.lang.t(this.rowsPerPageText),
-        this.$createElement(VSelect, {
-          attrs: {
-            'aria-label': this.$vuetify.lang.t(this.rowsPerPageText)
-          },
-          props: {
-            items: this.computedRowsPerPageItems,
-            value: this.computedPagination.rowsPerPage,
-            hideDetails: true,
-            menuProps: {
-              auto: true,
-              dark: this.dark,
-              light: this.light,
-              minWidth: '75px'
-            }
-          },
-          on: {
-            input: val => {
-              this.updatePagination({
-                page: 1,
-                rowsPerPage: val
-              })
-            }
-          }
-        })
-      ])
-    },
-    genPagination () {
-      let pagination = '–'
-
-      if (this.itemsLength) {
-        const stop = this.itemsLength < this.pageStop || this.pageStop < 0
-          ? this.itemsLength
-          : this.pageStop
-
-        pagination = this.$scopedSlots.pageText
-          ? this.$scopedSlots.pageText({
-            pageStart: this.pageStart + 1,
-            pageStop: stop,
-            itemsLength: this.itemsLength
-          })
-          : this.$vuetify.lang.t('$vuetify.dataIterator.pageText',
-            ...([this.pageStart + 1, stop, this.itemsLength].map(n => Number(n).toLocaleString(this.$vuetify.lang.current))))
-      }
-
-      return this.$createElement('div', {
-        'class': this.actionsPaginationClasses
-      }, [pagination])
-    },
-    genActions () {
-      const rangeControls = this.$createElement('div', {
-        'class': this.actionsRangeControlsClasses
-      }, [
-        this.genPagination(),
-        this.genPrevIcon(),
-        this.genNextIcon()
-      ])
-
-      return [this.$createElement('div', {
-        'class': this.actionsClasses
-      }, [
-        this.$slots['actions-prepend'] ? this.$createElement('div', {}, this.$slots['actions-prepend']) : null,
-        this.rowsPerPageItems.length > 1 ? this.genSelect() : null,
-        rangeControls,
-        this.$slots['actions-append'] ? this.$createElement('div', {}, this.$slots['actions-append']) : null
-      ])]
-    }
-  }
-}
diff --git a/packages/vuetify/src/stylus/components/_data-table.styl b/packages/vuetify/src/stylus/components/_data-table.styl
index 067621a54e6..d4716803cbf 100644
--- a/packages/vuetify/src/stylus/components/_data-table.styl
+++ b/packages/vuetify/src/stylus/components/_data-table.styl
@@ -2,72 +2,282 @@
 @import '../theme'
 
 /* Theme */
-v-datatable($material)
+v-data-table($material)
+  background-color: $material.cards
+  color: $material.text.primary
+
+  &--fixed
+    thead th
+      background: white
+      border-bottom: 0px !important
+      box-shadow: inset 0 -1px 0 rgba($material.fg-color, $material.divider-percent)
+
   thead
-    th.column.sortable
-      .v-icon
-        color: rgba($material.fg-color, $material.disabledORhints-text-percent)
+    tr
 
-      &:hover
-        color: rgba($material.fg-color, $material.primary-text-percent)
+      &:last-child th
+        border-bottom: 1px solid rgba($material.fg-color, $material.divider-percent)
 
-      &.active
-        color: rgba($material.fg-color, $material.primary-text-percent)
+      th
+        // box-shadow: inset 0 -1px 0 rgba($material.fg-color, $material.divider-percent)
+        color: rgba($material.text-color, $material.secondary-text-percent)
+
+      &.sortable
+        i
+          color: rgba($material.fg-color, $material.disabledORhints-text-percent)
 
-        .v-icon
+        &:hover
           color: rgba($material.fg-color, $material.primary-text-percent)
 
-  .v-datatable__actions
-    background-color: $material.cards
-    color: rgba($material.fg-color, $material.secondary-text-percent)
-    border-top: 1px solid rgba($material.fg-color, $material.divider-percent)
+        &.active
+          color: rgba($material.fg-color, $material.primary-text-percent)
 
-theme(v-datatable, "v-datatable")
+          i
+            color: rgba($material.fg-color, $material.primary-text-percent)
 
-.v-datatable
-  .v-input--selection-controls
-    margin: 0
-    padding: 0
+  tbody
+    tr
+      &:not(:last-child)
+        border-bottom: 1px solid rgba($material.fg-color, $material.divider-percent)
 
-  thead
-    th.column.sortable
-      cursor: pointer
-      outline: 0
+      &.active
+        background: $material.table.active
+
+      &:hover:not(.datatable__expand-row)
+        background: $material.table.hover
+
+      &.expanded
+        border-bottom: 0
+
+        &.expanded__row
+          background: $material.table.active
+
+        &.expanded__content
+          box-shadow: inset 0px 4px 8px -5px rgba(50, 50, 50, 0.75), inset 0px -4px 8px -5px rgba(50, 50, 50, 0.75)
+
+    .v-table__footer
+      .v-row
+        border-top: 1px solid rgba($material.fg-color, $material.divider-percent)
+
+theme(v-data-table, "v-data-table")
+
+.v-data-table-virtual
+  position: relative
+  padding-right: 17px
+
+  &__scroller
+    position: absolute
+    top: 0
+    right: 0
+    height: 100%
+    width: 17px
+    overflow-x: hidden
+
+  &__wrapper
+    width: 100%
+    height: 100%
+    overflow-x: auto
+    overflow-y: hidden
+
+.v-table-regular
+  &__wrapper
+    overflow-y: auto
+
+.v-data-table
+  table
+    width: 100%
+    max-width: 100%
+    border-collapse: collapse
+    // border-spacing: 0
+
+    colgroup
+      .divider
+        border-right: 1px solid lightgrey
+
+  &--dense
+    td
+      height: 24px
+    th
+      height: 32px
+
+  &--fixed
+    .v-data-table__wrapper
+      overflow-y: auto
+
+    thead
+      th
+        position: sticky
+        top: 0
+        z-index: 10
+
+    .v-table__header, .v-data-footer
+      margin-right: 17px
+
+  &--mobile
+    tr, td, th
+      display: block
+
+    td, th
+      padding: 14px
+
+  &__progress
+    height: auto !important
+
+    th
+      height: auto !important
+      border: none !important
+      padding: 0
+
+      .v-progress-linear
+        margin: 0
+
+td, th
+  padding: 0 16px
+
+.v-row
+  &__header
+    font-weight: 600
+
+  &__value
+    text-align: right
+
+.v-simple-checkbox
+  align-self: center
+  position: relative
+  user-select: none
+  cursor: pointer
 
-      .v-icon
-        font-size: 16px
-        display: inline-block
-        opacity: 0
-        transition: .3s $transition.swing
+  &--disabled
+    cursor: default
+
+.v-data-table-header
+  &--mobile
+    th
+      height: initial
+
+      > div
+        display: flex
+
+        .v-simple-checkbox
+          margin-right: 24px
+
+        .v-select
+          margin-top: 0
+
+  th
+    font-weight: 500
+    font-size: 12px
+    transition: .3s $transition.swing
+    white-space: nowrap
+    user-select: none
+    position: relative
+
+    .resize-handle
+      z-index: 10
+      position: absolute
+      right: -4px
+      top: 0
+      height: 100%
+      width: 8px
+      cursor: ew-resize
 
-      &:focus,
       &:hover
-        .v-icon
-          opacity: .6
+        background: grey
 
-      &.active
-        transform: none
+  .sortable
+    pointer-events: auto
+    cursor: pointer
+    outline: 0
+
+    i
+      font-size: 18px
+      display: inline-block
+      opacity: 0
+      transition: .3s $transition.swing
+
+    &:focus,
+    &:hover
+      i
+        opacity: .6
+
+    &.active
+      transform: none
+
+      i
+        opacity: 1
+
+      &.desc
+        i
+          transform: rotate(-180deg)
+
+.v-data-table__body
+  .v-row
+    transition: background $primary-transition
+    will-change: background
+
+  .v-cell
+    font-weight: 400
+    font-size: 13px
+
+td, th
+  > .v-input
+    margin-top: 0
+    padding-top: 0
 
-        .v-icon
-          opacity: 1
+    .v-input--selection-controls__input
+      margin-right: 0
 
-        &.desc
-          .v-icon
-            transform: rotate(-180deg)
+td
+  height: 48px
+
+th
+  height: 48px
+
+  .badge
+    display: inline-flex
+    justify-content: center
+    border: 0px
+    border-radius: 50%
+    background-color: lightgrey // TODO: theme
+    min-width: 16px
+    min-height: 16px
+    height: 16px
+    width: 16px
+    color: white // TODO: theme
+    font-size: 0.8rem
+
+th
+  font-weight: bold
+
+tr > th
+  white-space: normal
+
+.v-row, .v-row-expandable
+  &:not(:last-child)
+    .v-cell
+      border-bottom: 1px solid rgba(0,0,0,.12) // TODO: theme
+
+.v-cell, .v-head
+  word-break: break-word
+  overflow: hidden
+  text-overflow: ellipsis
 
 /** Actions */
-.v-datatable__actions
+.v-data-footer
   display: flex
+  flex-wrap: wrap
   justify-content: flex-end
   align-items: center
   font-size: 12px
-  flex-wrap: wrap-reverse
 
   .v-btn
     color: inherit
 
+    &:first-of-type
+      margin-right: 7px
+
     &:last-of-type
-      margin-left: 14px
+      margin-left: 7px
 
   &__range-controls
     display: flex
@@ -98,19 +308,11 @@ theme(v-datatable, "v-datatable")
       .v-select__selection--comma
         font-size: 12px
 
-.v-datatable__progress
-  height: auto !important
-
-  tr, td, th
-    height: auto !important
+.v-row-expandable
+  &__wrapper
+    transition: all 0.3s ease-out
 
-  th
-    padding: 0 !important
-
-    .v-progress-linear
-      margin: 0
-
-.v-datatable__expand
+.v-data-table__expand
   &-row
     border: none !important
 
@@ -119,7 +321,7 @@ theme(v-datatable, "v-datatable")
     height: 0px !important
 
     &--expanded
-      border-bottom: 1px solid rgba(0,0,0,0.12)
+      border-bottom: 1px solid rgba(0,0,0,0.12) // TODO: theme
 
   &-content
     transition: height $primary-transition
@@ -127,3 +329,17 @@ theme(v-datatable, "v-datatable")
     > .card
       border-radius: 0
       box-shadow: none
+
+.v-row-group
+  &__header, &__summary
+    background: lightgrey
+
+    td
+      height: 35px
+
+.expand__icon
+  user-select: none
+  cursor: pointer
+
+  &--active
+    transform: rotate(-180deg)
diff --git a/packages/vuetify/src/stylus/components/_tables.styl b/packages/vuetify/src/stylus/components/_tables.styl
deleted file mode 100644
index d03a982a254..00000000000
--- a/packages/vuetify/src/stylus/components/_tables.styl
+++ /dev/null
@@ -1,100 +0,0 @@
-@import '../bootstrap'
-@import '../theme'
-
-/* Theme */
-v-table($material)
-  background-color: $material.cards
-  color: $material.text.primary
-
-  thead
-    tr
-      &:first-child
-        border-bottom: 1px solid rgba($material.fg-color, $material.divider-percent)
-
-    th
-      color: rgba($material.text-color, $material.secondary-text-percent)
-
-  tbody
-    tr
-      &:not(:last-child)
-        border-bottom: 1px solid rgba($material.fg-color, $material.divider-percent)
-
-      &[active]
-        background: $material.table.active
-
-      &:hover:not(.v-datatable__expand-row)
-        background: $material.table.hover
-
-  tfoot
-    tr
-      border-top: 1px solid rgba($material.fg-color, $material.divider-percent)
-
-theme(v-table, "v-table")
-
-.v-table
-  &__overflow
-    width: 100%
-    overflow-x: auto
-    overflow-y: hidden
-
-table.v-table
-  border-radius: 2px
-  border-collapse: collapse
-  border-spacing: 0
-  width: 100%
-  max-width: 100%
-
-  thead, tbody
-    td, th
-      &:not(:nth-child(1)), &:first-child
-        padding: 0 24px
-
-  thead
-    tr
-      height: 56px
-
-    th
-      font-weight: 500
-      font-size: 12px
-      transition: .3s $transition.swing
-      white-space: nowrap
-      user-select: none
-
-      &.sortable
-        pointer-events: auto
-
-      > div
-        width: 100%
-
-  tbody
-    tr
-      transition: background $primary-transition
-      will-change: background
-
-    td, th
-      height: 48px
-
-    td
-      font-weight: 400
-      font-size: 13px
-
-  .input-group--selection-controls
-    padding: 0
-
-    .input-group__details
-      display: none
-
-    &.checkbox
-      .v-icon
-        left: 50%
-        transform: translateX(-50%)
-
-      .input-group--selection-controls__ripple
-        left: 50%
-        transform: translate(-50%, -50%)
-
-  tfoot
-    tr
-      height: 48px
-      td
-        padding: 0 24px
diff --git a/packages/vuetify/src/util/helpers.ts b/packages/vuetify/src/util/helpers.ts
index 7e30a246ad7..f0783e41fff 100644
--- a/packages/vuetify/src/util/helpers.ts
+++ b/packages/vuetify/src/util/helpers.ts
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { VNode, VNodeDirective, FunctionalComponentOptions } from 'vue/types'
+import { VNode, VNodeDirective, FunctionalComponentOptions, VNodeChildrenArrayContents } from 'vue/types'
 import { VuetifyIcon } from 'vuetify'
 
 export function createSimpleFunctional (
@@ -346,6 +346,88 @@ export function upperFirst (str: string): string {
   return str.charAt(0).toUpperCase() + str.slice(1)
 }
 
+export function groupByProperty (xs: any[], key: string): Record<string, any[]> {
+  return xs.reduce((rv, x) => {
+    (rv[x[key]] = rv[x[key]] || []).push(x)
+    return rv
+  }, {})
+}
+
+export function wrapInArray<T> (v: T | T[]): T[] { return Array.isArray(v) ? v : [v] }
+
+export function computeSlots (cmp: Vue, name: string, props: object) {
+  const slots: VNodeChildrenArrayContents = []
+
+  if (cmp.$slots[name]) slots.push(...cmp.$slots[name])
+  if (cmp.$scopedSlots[name]) {
+    const scoped = cmp.$scopedSlots[name]!(props)
+    Array.isArray(scoped) ? slots.push(...scoped) : slots.push(scoped)
+  }
+
+  return slots
+}
+
+export function sortItems (
+  items: any[],
+  sortBy: string[],
+  sortDesc: boolean[],
+  locale: string,
+  customSorters?: Record<string, (a: any, b: any) => number>
+) {
+  if (sortBy === null || !sortBy.length) return items
+
+  return items.sort((a: any, b: any): number => {
+    for (let i = 0; i < sortBy.length; i++) {
+      const sortKey = sortBy[i]
+
+      let sortA = getObjectValueByPath(a, sortKey)
+      let sortB = getObjectValueByPath(b, sortKey)
+
+      if (sortDesc[i]) {
+        [sortA, sortB] = [sortB, sortA]
+      }
+
+      if (customSorters && customSorters[sortKey]) return customSorters[sortKey](sortA, sortB)
+
+      // Check if both cannot be evaluated
+      if (sortA === null && sortB === null) {
+        return 0
+      }
+
+      [sortA, sortB] = [sortA, sortB].map(s => (s || '').toString().toLocaleLowerCase())
+
+      if (sortA !== sortB) {
+        if (!isNaN(sortA) && !isNaN(sortB)) return Number(sortA) - Number(sortB)
+        return sortA.localeCompare(sortB, locale)
+      }
+    }
+
+    return 0
+  })
+}
+
+export function searchItems (items: any[], search: string) {
+  if (!search) return items
+  search = search.toString().toLowerCase()
+  if (search.trim() === '') return items
+
+  return items.filter(i => Object.keys(i).some(j => {
+    const val = i[j]
+    return val != null &&
+      typeof val !== 'boolean' &&
+      val.toString().toLowerCase().indexOf(search) !== -1
+  }))
+}
+
+export function getTextAlignment (align: string | undefined, rtl: boolean): string {
+  align = align || 'start'
+
+  if (align === 'start') align = rtl ? 'right' : 'left'
+  else if (align === 'end') align = rtl ? 'left' : 'right'
+
+  return `text-xs-${align}`
+}
+
 /**
  * Returns:
  *  - 'normal' for old style slots - `<template slot="default">`
diff --git a/packages/vuetify/test/unit/components/VDataIterator/VDataIterator.spec.js b/packages/vuetify/test/unit/components/VDataIterator/VDataIterator.spec.js
index 54726a843d5..f12e3a81d58 100644
--- a/packages/vuetify/test/unit/components/VDataIterator/VDataIterator.spec.js
+++ b/packages/vuetify/test/unit/components/VDataIterator/VDataIterator.spec.js
@@ -3,7 +3,7 @@ import { test } from '@/test'
 import VDataIterator from '@/components/VDataIterator'
 import VBtn from '@/components/VBtn'
 
-test('VDataIterator.js', ({ mount, compileToFunctions }) => {
+test.skip('VDataIterator.js', ({ mount, compileToFunctions }) => {
   function dataIteratorTestData () {
     return {
       propsData: {
diff --git a/packages/vuetify/test/unit/components/VDataIterator/__snapshots__/VDataIterator.spec.js.snap b/packages/vuetify/test/unit/components/VDataIterator/__snapshots__/VDataIterator.spec.js.snap
deleted file mode 100644
index e1953a79a46..00000000000
--- a/packages/vuetify/test/unit/components/VDataIterator/__snapshots__/VDataIterator.spec.js.snap
+++ /dev/null
@@ -1,814 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`VDataIterator.js should match a snapshot - footer slot 1`] = `
-
-<div class="v-data-iterator theme--light">
-  <div>
-  </div>
-  <div>
-    <span>
-      footer
-    </span>
-    <div class="v-data-iterator__actions">
-      <div class="v-data-iterator__actions__select">
-        Items per page:
-        <div role="combobox"
-             class="v-input v-text-field v-select v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light"
-        >
-          <div class="v-input__control">
-            <div class="v-input__slot">
-              <div class="v-select__slot">
-                <div class="v-select__selections">
-                  <div class="v-select__selection v-select__selection--comma">
-                    5
-                  </div>
-                  <input aria-label="Items per page:"
-                         readonly="readonly"
-                         type="text"
-                         autocomplete="on"
-                         aria-readonly="false"
-                  >
-                </div>
-                <div class="v-input__append-inner">
-                  <div class="v-input__icon v-input__icon--append">
-                    <i aria-hidden="true"
-                       class="v-icon material-icons theme--light"
-                    >
-                      arrow_drop_down
-                    </i>
-                  </div>
-                </div>
-              </div>
-              <div class="v-menu">
-                <div class="v-menu__content theme--light v-menu__content--auto "
-                     style="max-height: 200px; min-width: 75px; max-width: auto; top: 12px; left: 0px; z-index: 0; display: none;"
-                >
-                  <div class="v-select-list v-card theme--light">
-                    <div role="list"
-                         class="v-list theme--light"
-                    >
-                      <div role="listitem">
-                        <a class="v-list__tile v-list__tile--link v-list__tile--active theme--light primary--text">
-                          <div class="v-list__tile__content">
-                            <div class="v-list__tile__title">
-                              5
-                            </div>
-                          </div>
-                        </a>
-                      </div>
-                      <div role="listitem">
-                        <a class="v-list__tile v-list__tile--link theme--light">
-                          <div class="v-list__tile__content">
-                            <div class="v-list__tile__title">
-                              10
-                            </div>
-                          </div>
-                        </a>
-                      </div>
-                      <div role="listitem">
-                        <a class="v-list__tile v-list__tile--link theme--light">
-                          <div class="v-list__tile__content">
-                            <div class="v-list__tile__title">
-                              25
-                            </div>
-                          </div>
-                        </a>
-                      </div>
-                      <div role="listitem">
-                        <a class="v-list__tile v-list__tile--link theme--light">
-                          <div class="v-list__tile__content">
-                            <div class="v-list__tile__title">
-                              All
-                            </div>
-                          </div>
-                        </a>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="v-data-iterator__actions__range-controls">
-        <div class="v-data-iterator__actions__pagination">
-          1-3 of 3
-        </div>
-        <button disabled="disabled"
-                type="button"
-                class="v-btn v-btn--disabled v-btn--fab v-btn--flat 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 material-icons theme--light"
-            >
-              chevron_left
-            </i>
-          </span>
-        </button>
-        <button disabled="disabled"
-                type="button"
-                class="v-btn v-btn--disabled v-btn--fab v-btn--flat 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 material-icons theme--light"
-            >
-              chevron_right
-            </i>
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-
-`;
-
-exports[`VDataIterator.js should match a snapshot - hideActions and no footer slot 1`] = `
-
-<div class="v-data-iterator theme--light">
-  <div>
-  </div>
-</div>
-
-`;
-
-exports[`VDataIterator.js should match a snapshot - no data 1`] = `
-
-<div class="v-data-iterator theme--light">
-  <div>
-    <div class="text-xs-center"
-         style="width: 100%;"
-    >
-      No data available
-    </div>
-  </div>
-  <div>
-    <div class="v-data-iterator__actions">
-      <div class="v-data-iterator__actions__select">
-        Items per page:
-        <div role="combobox"
-             class="v-input v-text-field v-select v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light"
-        >
-          <div class="v-input__control">
-            <div class="v-input__slot">
-              <div class="v-select__slot">
-                <div class="v-select__selections">
-                  <div class="v-select__selection v-select__selection--comma">
-                    5
-                  </div>
-                  <input aria-label="Items per page:"
-                         readonly="readonly"
-                         type="text"
-                         autocomplete="on"
-                         aria-readonly="false"
-                  >
-                </div>
-                <div class="v-input__append-inner">
-                  <div class="v-input__icon v-input__icon--append">
-                    <i aria-hidden="true"
-                       class="v-icon material-icons theme--light"
-                    >
-                      arrow_drop_down
-                    </i>
-                  </div>
-                </div>
-              </div>
-              <div class="v-menu">
-                <div class="v-menu__content theme--light v-menu__content--auto "
-                     style="max-height: 200px; min-width: 75px; max-width: auto; top: 12px; left: 0px; z-index: 0; display: none;"
-                >
-                  <div class="v-select-list v-card theme--light">
-                    <div role="list"
-                         class="v-list theme--light"
-                    >
-                      <div role="listitem">
-                        <a class="v-list__tile v-list__tile--link v-list__tile--active theme--light primary--text">
-                          <div class="v-list__tile__content">
-                            <div class="v-list__tile__title">
-                              5
-                            </div>
-                          </div>
-                        </a>
-                      </div>
-                      <div role="listitem">
-                        <a class="v-list__tile v-list__tile--link theme--light">
-                          <div class="v-list__tile__content">
-                            <div class="v-list__tile__title">
-                              10
-                            </div>
-                          </div>
-                        </a>
-                      </div>
-                      <div role="listitem">
-                        <a class="v-list__tile v-list__tile--link theme--light">
-                          <div class="v-list__tile__content">
-                            <div class="v-list__tile__title">
-                              25
-                            </div>
-                          </div>
-                        </a>
-                      </div>
-                      <div role="listitem">
-                        <a class="v-list__tile v-list__tile--link theme--light">
-                          <div class="v-list__tile__content">
-                            <div class="v-list__tile__title">
-                              All
-                            </div>
-                          </div>
-                        </a>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="v-data-iterator__actions__range-controls">
-        <div class="v-data-iterator__actions__pagination">
-          –
-        </div>
-        <button disabled="disabled"
-                type="button"
-                class="v-btn v-btn--disabled v-btn--fab v-btn--flat 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 material-icons theme--light"
-            >
-              chevron_left
-            </i>
-          </span>
-        </button>
-        <button disabled="disabled"
-                type="button"
-                class="v-btn v-btn--disabled v-btn--fab v-btn--flat 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 material-icons theme--light"
-            >
-              chevron_right
-            </i>
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-
-`;
-
-exports[`VDataIterator.js should match a snapshot - no matching records 1`] = `
-
-<div class="v-data-iterator theme--light">
-  <div>
-    <div class="text-xs-center"
-         style="width: 100%;"
-    >
-      No matching records found
-    </div>
-  </div>
-  <div>
-    <div class="v-data-iterator__actions">
-      <div class="v-data-iterator__actions__select">
-        Items per page:
-        <div role="combobox"
-             class="v-input v-text-field v-select v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light"
-        >
-          <div class="v-input__control">
-            <div class="v-input__slot">
-              <div class="v-select__slot">
-                <div class="v-select__selections">
-                  <div class="v-select__selection v-select__selection--comma">
-                    5
-                  </div>
-                  <input aria-label="Items per page:"
-                         readonly="readonly"
-                         type="text"
-                         autocomplete="on"
-                         aria-readonly="false"
-                  >
-                </div>
-                <div class="v-input__append-inner">
-                  <div class="v-input__icon v-input__icon--append">
-                    <i aria-hidden="true"
-                       class="v-icon material-icons theme--light"
-                    >
-                      arrow_drop_down
-                    </i>
-                  </div>
-                </div>
-              </div>
-              <div class="v-menu">
-                <div class="v-menu__content theme--light v-menu__content--auto "
-                     style="max-height: 200px; min-width: 75px; max-width: auto; top: 12px; left: 0px; z-index: 0; display: none;"
-                >
-                  <div class="v-select-list v-card theme--light">
-                    <div role="list"
-                         class="v-list theme--light"
-                    >
-                      <div role="listitem">
-                        <a class="v-list__tile v-list__tile--link v-list__tile--active theme--light primary--text">
-                          <div class="v-list__tile__content">
-                            <div class="v-list__tile__title">
-                              5
-                            </div>
-                          </div>
-                        </a>
-                      </div>
-                      <div role="listitem">
-                        <a class="v-list__tile v-list__tile--link theme--light">
-                          <div class="v-list__tile__content">
-                            <div class="v-list__tile__title">
-                              10
-                            </div>
-                          </div>
-                        </a>
-                      </div>
-                      <div role="listitem">
-                        <a class="v-list__tile v-list__tile--link theme--light">
-                          <div class="v-list__tile__content">
-                            <div class="v-list__tile__title">
-                              25
-                            </div>
-                          </div>
-                        </a>
-                      </div>
-                      <div role="listitem">
-                        <a class="v-list__tile v-list__tile--link theme--light">
-                          <div class="v-list__tile__content">
-                            <div class="v-list__tile__title">
-                              All
-                            </div>
-                          </div>
-                        </a>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="v-data-iterator__actions__range-controls">
-        <div class="v-data-iterator__actions__pagination">
-          –
-        </div>
-        <button disabled="disabled"
-                type="button"
-                class="v-btn v-btn--disabled v-btn--fab v-btn--flat 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 material-icons theme--light"
-            >
-              chevron_left
-            </i>
-          </span>
-        </button>
-        <button disabled="disabled"
-                type="button"
-                class="v-btn v-btn--disabled v-btn--fab v-btn--flat 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 material-icons theme--light"
-            >
-              chevron_right
-            </i>
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-
-`;
-
-exports[`VDataIterator.js should match a snapshot - with data 1`] = `
-
-<div class="v-data-iterator theme--light">
-  <span>
-    <div>
-      b
-    </div>
-    <div>
-      c
-    </div>
-    <div>
-      a
-    </div>
-  </span>
-  <div>
-    <div class="v-data-iterator__actions">
-      <div class="v-data-iterator__actions__select">
-        Items per page:
-        <div role="combobox"
-             class="v-input v-text-field v-select v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light"
-        >
-          <div class="v-input__control">
-            <div class="v-input__slot">
-              <div class="v-select__slot">
-                <div class="v-select__selections">
-                  <div class="v-select__selection v-select__selection--comma">
-                    5
-                  </div>
-                  <input aria-label="Items per page:"
-                         readonly="readonly"
-                         type="text"
-                         autocomplete="on"
-                         aria-readonly="false"
-                  >
-                </div>
-                <div class="v-input__append-inner">
-                  <div class="v-input__icon v-input__icon--append">
-                    <i aria-hidden="true"
-                       class="v-icon material-icons theme--light"
-                    >
-                      arrow_drop_down
-                    </i>
-                  </div>
-                </div>
-              </div>
-              <div class="v-menu">
-                <div class="v-menu__content theme--light v-menu__content--auto "
-                     style="max-height: 200px; min-width: 75px; max-width: auto; top: 12px; left: 0px; z-index: 0; display: none;"
-                >
-                  <div class="v-select-list v-card theme--light">
-                    <div role="list"
-                         class="v-list theme--light"
-                    >
-                      <div role="listitem">
-                        <a class="v-list__tile v-list__tile--link v-list__tile--active theme--light primary--text">
-                          <div class="v-list__tile__content">
-                            <div class="v-list__tile__title">
-                              5
-                            </div>
-                          </div>
-                        </a>
-                      </div>
-                      <div role="listitem">
-                        <a class="v-list__tile v-list__tile--link theme--light">
-                          <div class="v-list__tile__content">
-                            <div class="v-list__tile__title">
-                              10
-                            </div>
-                          </div>
-                        </a>
-                      </div>
-                      <div role="listitem">
-                        <a class="v-list__tile v-list__tile--link theme--light">
-                          <div class="v-list__tile__content">
-                            <div class="v-list__tile__title">
-                              25
-                            </div>
-                          </div>
-                        </a>
-                      </div>
-                      <div role="listitem">
-                        <a class="v-list__tile v-list__tile--link theme--light">
-                          <div class="v-list__tile__content">
-                            <div class="v-list__tile__title">
-                              All
-                            </div>
-                          </div>
-                        </a>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="v-data-iterator__actions__range-controls">
-        <div class="v-data-iterator__actions__pagination">
-          1-3 of 3
-        </div>
-        <button disabled="disabled"
-                type="button"
-                class="v-btn v-btn--disabled v-btn--fab v-btn--flat 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 material-icons theme--light"
-            >
-              chevron_left
-            </i>
-          </span>
-        </button>
-        <button disabled="disabled"
-                type="button"
-                class="v-btn v-btn--disabled v-btn--fab v-btn--flat 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 material-icons theme--light"
-            >
-              chevron_right
-            </i>
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-
-`;
-
-exports[`VDataIterator.js should match a snapshot - with data 2`] = `
-
-<div class="v-data-iterator__actions__range-controls">
-  <div class="v-data-iterator__actions__pagination">
-    1-3 of 3
-  </div>
-  <button disabled="disabled"
-          type="button"
-          class="v-btn v-btn--disabled v-btn--fab v-btn--flat 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 material-icons theme--light"
-      >
-        chevron_right
-      </i>
-    </span>
-  </button>
-  <button disabled="disabled"
-          type="button"
-          class="v-btn v-btn--disabled v-btn--fab v-btn--flat 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 material-icons theme--light"
-      >
-        chevron_left
-      </i>
-    </span>
-  </button>
-</div>
-
-`;
-
-exports[`VDataIterator.js should reset to page 1 when data is smaller than current page 1`] = `
-
-<div class="v-data-iterator theme--light">
-  <div>
-  </div>
-  <div>
-    <div class="v-data-iterator__actions">
-      <div class="v-data-iterator__actions__select">
-        Items per page:
-        <div role="combobox"
-             class="v-input v-text-field v-select v-input--hide-details theme--light"
-        >
-          <div class="v-input__control">
-            <div class="v-input__slot">
-              <div class="v-select__slot">
-                <div class="v-select__selections">
-                  <input aria-label="Items per page:"
-                         readonly="readonly"
-                         type="text"
-                         autocomplete="on"
-                         aria-readonly="false"
-                  >
-                </div>
-                <div class="v-input__append-inner">
-                  <div class="v-input__icon v-input__icon--append">
-                    <i aria-hidden="true"
-                       class="v-icon material-icons theme--light"
-                    >
-                      arrow_drop_down
-                    </i>
-                  </div>
-                </div>
-              </div>
-              <div class="v-menu">
-                <div class="v-menu__content theme--light v-menu__content--auto "
-                     style="max-height: 200px; min-width: 75px; max-width: auto; top: 12px; left: 0px; z-index: 0; display: none;"
-                >
-                  <div class="v-select-list v-card theme--light">
-                    <div role="list"
-                         class="v-list theme--light"
-                    >
-                      <div role="listitem">
-                        <a class="v-list__tile v-list__tile--link theme--light">
-                          <div class="v-list__tile__content">
-                            <div class="v-list__tile__title">
-                              5
-                            </div>
-                          </div>
-                        </a>
-                      </div>
-                      <div role="listitem">
-                        <a class="v-list__tile v-list__tile--link theme--light">
-                          <div class="v-list__tile__content">
-                            <div class="v-list__tile__title">
-                              10
-                            </div>
-                          </div>
-                        </a>
-                      </div>
-                      <div role="listitem">
-                        <a class="v-list__tile v-list__tile--link theme--light">
-                          <div class="v-list__tile__content">
-                            <div class="v-list__tile__title">
-                              25
-                            </div>
-                          </div>
-                        </a>
-                      </div>
-                      <div role="listitem">
-                        <a class="v-list__tile v-list__tile--link theme--light">
-                          <div class="v-list__tile__content">
-                            <div class="v-list__tile__title">
-                              All
-                            </div>
-                          </div>
-                        </a>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="v-data-iterator__actions__range-controls">
-        <div class="v-data-iterator__actions__pagination">
-          2-2 of 3
-        </div>
-        <button type="button"
-                class="v-btn v-btn--fab v-btn--flat 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 material-icons theme--light"
-            >
-              chevron_left
-            </i>
-          </span>
-        </button>
-        <button type="button"
-                class="v-btn v-btn--fab v-btn--flat 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 material-icons theme--light"
-            >
-              chevron_right
-            </i>
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-
-`;
-
-exports[`VDataIterator.js should reset to page 1 when data is smaller than current page 2`] = `
-
-<div class="v-data-iterator theme--light">
-  <div>
-    <div class="text-xs-center"
-         style="width: 100%;"
-    >
-      No data available
-    </div>
-  </div>
-  <div>
-    <div class="v-data-iterator__actions">
-      <div class="v-data-iterator__actions__select">
-        Items per page:
-        <div role="combobox"
-             class="v-input v-text-field v-select v-input--hide-details theme--light"
-        >
-          <div class="v-input__control">
-            <div class="v-input__slot">
-              <div class="v-select__slot">
-                <div class="v-select__selections">
-                  <input aria-label="Items per page:"
-                         readonly="readonly"
-                         type="text"
-                         autocomplete="on"
-                         aria-readonly="false"
-                  >
-                </div>
-                <div class="v-input__append-inner">
-                  <div class="v-input__icon v-input__icon--append">
-                    <i aria-hidden="true"
-                       class="v-icon material-icons theme--light"
-                    >
-                      arrow_drop_down
-                    </i>
-                  </div>
-                </div>
-              </div>
-              <div class="v-menu">
-                <div class="v-menu__content theme--light v-menu__content--auto "
-                     style="max-height: 200px; min-width: 75px; max-width: auto; top: 12px; left: 0px; z-index: 0; display: none;"
-                >
-                  <div class="v-select-list v-card theme--light">
-                    <div role="list"
-                         class="v-list theme--light"
-                    >
-                      <div role="listitem">
-                        <a class="v-list__tile v-list__tile--link theme--light">
-                          <div class="v-list__tile__content">
-                            <div class="v-list__tile__title">
-                              5
-                            </div>
-                          </div>
-                        </a>
-                      </div>
-                      <div role="listitem">
-                        <a class="v-list__tile v-list__tile--link theme--light">
-                          <div class="v-list__tile__content">
-                            <div class="v-list__tile__title">
-                              10
-                            </div>
-                          </div>
-                        </a>
-                      </div>
-                      <div role="listitem">
-                        <a class="v-list__tile v-list__tile--link theme--light">
-                          <div class="v-list__tile__content">
-                            <div class="v-list__tile__title">
-                              25
-                            </div>
-                          </div>
-                        </a>
-                      </div>
-                      <div role="listitem">
-                        <a class="v-list__tile v-list__tile--link theme--light">
-                          <div class="v-list__tile__content">
-                            <div class="v-list__tile__title">
-                              All
-                            </div>
-                          </div>
-                        </a>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="v-data-iterator__actions__range-controls">
-        <div class="v-data-iterator__actions__pagination">
-          –
-        </div>
-        <button type="button"
-                class="v-btn v-btn--fab v-btn--flat 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 material-icons theme--light"
-            >
-              chevron_left
-            </i>
-          </span>
-        </button>
-        <button type="button"
-                class="v-btn v-btn--disabled v-btn--fab v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
-                aria-label="Next page"
-                disabled="disabled"
-        >
-          <span class="v-btn__content">
-            <i aria-hidden="true"
-               class="v-icon material-icons theme--light"
-            >
-              chevron_right
-            </i>
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-
-`;
diff --git a/packages/vuetify/test/unit/components/VDataTable/VDataTable.spec.js b/packages/vuetify/test/unit/components/VDataTable/VDataTable.spec.js
index b7c24c6b78f..dd6b53e3f3b 100644
--- a/packages/vuetify/test/unit/components/VDataTable/VDataTable.spec.js
+++ b/packages/vuetify/test/unit/components/VDataTable/VDataTable.spec.js
@@ -2,7 +2,7 @@ import Vue from 'vue'
 import { test } from '@/test'
 import VDataTable from '@/components/VDataTable/VDataTable'
 
-test('VDataTable.vue', ({ mount, compileToFunctions }) => {
+test.skip('VDataTable.vue', ({ mount, compileToFunctions }) => {
   function dataTableTestData () {
     return {
       propsData: {
diff --git a/packages/vuetify/test/unit/components/VDataTable/__snapshots__/VDataTable.spec.js.snap b/packages/vuetify/test/unit/components/VDataTable/__snapshots__/VDataTable.spec.js.snap
deleted file mode 100644
index ec90ecdeca6..00000000000
--- a/packages/vuetify/test/unit/components/VDataTable/__snapshots__/VDataTable.spec.js.snap
+++ /dev/null
@@ -1,667 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`VDataTable.vue should match a snapshot - no data 1`] = `
-
-<div>
-  <div class="v-table__overflow">
-    <table class="v-datatable v-table theme--light">
-      <thead>
-        <tr>
-          <th role="columnheader"
-              scope="col"
-              aria-label="First Column: Sorted ascending. Activate to sort descending."
-              aria-sort="ascending"
-              tabindex="0"
-              class="column sortable active asc text-xs-left a-string"
-          >
-            First Column
-            <i aria-hidden="true"
-               class="v-icon material-icons theme--light"
-               style="font-size: 16px;"
-            >
-              arrow_upward
-            </i>
-          </th>
-          <th role="columnheader"
-              scope="col"
-              aria-label="Second Column: Not sorted."
-              aria-sort="none"
-              class="column text-xs-left"
-          >
-            Second Column
-          </th>
-          <th role="columnheader"
-              scope="col"
-              aria-label="Third Column: Not sorted. Activate to sort ascending."
-              aria-sort="none"
-              tabindex="0"
-              class="column sortable text-xs-left an array"
-          >
-            Third Column
-            <i aria-hidden="true"
-               class="v-icon material-icons theme--light"
-               style="font-size: 16px;"
-            >
-              arrow_upward
-            </i>
-          </th>
-        </tr>
-        <tr class="v-datatable__progress">
-          <th colspan="3"
-              class="column"
-          >
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td colspan="3"
-              class="text-xs-center"
-          >
-            No data available
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-  <div class="v-datatable v-table theme--light">
-    <div class="v-datatable__actions">
-      <div class="v-datatable__actions__select">
-        Rows per page:
-        <div role="combobox"
-             class="v-input v-text-field v-select v-input--hide-details theme--light"
-        >
-          <div class="v-input__control">
-            <div class="v-input__slot">
-              <div class="v-select__slot">
-                <div class="v-select__selections">
-                  <input aria-label="Rows per page:"
-                         readonly="readonly"
-                         type="text"
-                         autocomplete="on"
-                         aria-readonly="false"
-                  >
-                </div>
-                <div class="v-input__append-inner">
-                  <div class="v-input__icon v-input__icon--append">
-                    <i aria-hidden="true"
-                       class="v-icon material-icons theme--light"
-                    >
-                      arrow_drop_down
-                    </i>
-                  </div>
-                </div>
-              </div>
-              <div class="v-menu">
-                <div class="v-menu__content theme--light v-menu__content--auto "
-                     style="max-height: 200px; min-width: 75px; max-width: auto; top: 12px; left: 0px; z-index: 0; display: none;"
-                >
-                  <div class="v-select-list v-card theme--light">
-                    <div role="list"
-                         class="v-list theme--light"
-                    >
-                      <div role="listitem">
-                        <a class="v-list__tile v-list__tile--link theme--light">
-                          <div class="v-list__tile__content">
-                            <div class="v-list__tile__title">
-                              5
-                            </div>
-                          </div>
-                        </a>
-                      </div>
-                      <div role="listitem">
-                        <a class="v-list__tile v-list__tile--link theme--light">
-                          <div class="v-list__tile__content">
-                            <div class="v-list__tile__title">
-                              10
-                            </div>
-                          </div>
-                        </a>
-                      </div>
-                      <div role="listitem">
-                        <a class="v-list__tile v-list__tile--link theme--light">
-                          <div class="v-list__tile__content">
-                            <div class="v-list__tile__title">
-                              25
-                            </div>
-                          </div>
-                        </a>
-                      </div>
-                      <div role="listitem">
-                        <a class="v-list__tile v-list__tile--link theme--light">
-                          <div class="v-list__tile__content">
-                            <div class="v-list__tile__title">
-                              All
-                            </div>
-                          </div>
-                        </a>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="v-datatable__actions__range-controls">
-        <div class="v-datatable__actions__pagination">
-          –
-        </div>
-        <button disabled="disabled"
-                type="button"
-                class="v-btn v-btn--disabled v-btn--fab v-btn--flat 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 material-icons theme--light"
-            >
-              chevron_left
-            </i>
-          </span>
-        </button>
-        <button disabled="disabled"
-                type="button"
-                class="v-btn v-btn--disabled v-btn--fab v-btn--flat 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 material-icons theme--light"
-            >
-              chevron_right
-            </i>
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-
-`;
-
-exports[`VDataTable.vue should match a snapshot - no matching results 1`] = `
-
-<div>
-  <div class="v-table__overflow">
-    <table class="v-datatable v-table theme--light">
-      <thead>
-        <tr>
-          <th role="columnheader"
-              scope="col"
-              aria-label="First Column: Sorted ascending. Activate to sort descending."
-              aria-sort="ascending"
-              tabindex="0"
-              class="column sortable active asc text-xs-left a-string"
-          >
-            First Column
-            <i aria-hidden="true"
-               class="v-icon material-icons theme--light"
-               style="font-size: 16px;"
-            >
-              arrow_upward
-            </i>
-          </th>
-          <th role="columnheader"
-              scope="col"
-              aria-label="Second Column: Not sorted."
-              aria-sort="none"
-              class="column text-xs-left"
-          >
-            Second Column
-          </th>
-          <th role="columnheader"
-              scope="col"
-              aria-label="Third Column: Not sorted. Activate to sort ascending."
-              aria-sort="none"
-              tabindex="0"
-              class="column sortable text-xs-left an array"
-          >
-            Third Column
-            <i aria-hidden="true"
-               class="v-icon material-icons theme--light"
-               style="font-size: 16px;"
-            >
-              arrow_upward
-            </i>
-          </th>
-        </tr>
-        <tr class="v-datatable__progress">
-          <th colspan="3"
-              class="column"
-          >
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td colspan="3"
-              class="text-xs-center"
-          >
-            No matching records found
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-  <div class="v-datatable v-table theme--light">
-    <div class="v-datatable__actions">
-      <div class="v-datatable__actions__select">
-        Rows per page:
-        <div role="combobox"
-             class="v-input v-text-field v-select v-input--hide-details theme--light"
-        >
-          <div class="v-input__control">
-            <div class="v-input__slot">
-              <div class="v-select__slot">
-                <div class="v-select__selections">
-                  <input aria-label="Rows per page:"
-                         readonly="readonly"
-                         type="text"
-                         autocomplete="on"
-                         aria-readonly="false"
-                  >
-                </div>
-                <div class="v-input__append-inner">
-                  <div class="v-input__icon v-input__icon--append">
-                    <i aria-hidden="true"
-                       class="v-icon material-icons theme--light"
-                    >
-                      arrow_drop_down
-                    </i>
-                  </div>
-                </div>
-              </div>
-              <div class="v-menu">
-                <div class="v-menu__content theme--light v-menu__content--auto "
-                     style="max-height: 200px; min-width: 75px; max-width: auto; top: 12px; left: 0px; z-index: 0; display: none;"
-                >
-                  <div class="v-select-list v-card theme--light">
-                    <div role="list"
-                         class="v-list theme--light"
-                    >
-                      <div role="listitem">
-                        <a class="v-list__tile v-list__tile--link theme--light">
-                          <div class="v-list__tile__content">
-                            <div class="v-list__tile__title">
-                              5
-                            </div>
-                          </div>
-                        </a>
-                      </div>
-                      <div role="listitem">
-                        <a class="v-list__tile v-list__tile--link theme--light">
-                          <div class="v-list__tile__content">
-                            <div class="v-list__tile__title">
-                              10
-                            </div>
-                          </div>
-                        </a>
-                      </div>
-                      <div role="listitem">
-                        <a class="v-list__tile v-list__tile--link theme--light">
-                          <div class="v-list__tile__content">
-                            <div class="v-list__tile__title">
-                              25
-                            </div>
-                          </div>
-                        </a>
-                      </div>
-                      <div role="listitem">
-                        <a class="v-list__tile v-list__tile--link theme--light">
-                          <div class="v-list__tile__content">
-                            <div class="v-list__tile__title">
-                              All
-                            </div>
-                          </div>
-                        </a>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="v-datatable__actions__range-controls">
-        <div class="v-datatable__actions__pagination">
-          –
-        </div>
-        <button disabled="disabled"
-                type="button"
-                class="v-btn v-btn--disabled v-btn--fab v-btn--flat 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 material-icons theme--light"
-            >
-              chevron_left
-            </i>
-          </span>
-        </button>
-        <button disabled="disabled"
-                type="button"
-                class="v-btn v-btn--disabled v-btn--fab v-btn--flat 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 material-icons theme--light"
-            >
-              chevron_right
-            </i>
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-
-`;
-
-exports[`VDataTable.vue should match a snapshot - with data 1`] = `
-
-<div>
-  <div class="v-table__overflow">
-    <table class="v-datatable v-table theme--light">
-      <thead>
-        <tr>
-          <th role="columnheader"
-              scope="col"
-              aria-label="First Column: Sorted ascending. Activate to sort descending."
-              aria-sort="ascending"
-              tabindex="0"
-              class="column sortable active asc text-xs-left a-string"
-          >
-            First Column
-            <i aria-hidden="true"
-               class="v-icon material-icons theme--light"
-               style="font-size: 16px;"
-            >
-              arrow_upward
-            </i>
-          </th>
-          <th role="columnheader"
-              scope="col"
-              aria-label="Second Column: Not sorted."
-              aria-sort="none"
-              class="column text-xs-left"
-          >
-            Second Column
-          </th>
-          <th role="columnheader"
-              scope="col"
-              aria-label="Third Column: Not sorted. Activate to sort ascending."
-              aria-sort="none"
-              tabindex="0"
-              class="column sortable text-xs-left an array"
-          >
-            Third Column
-            <i aria-hidden="true"
-               class="v-icon material-icons theme--light"
-               style="font-size: 16px;"
-            >
-              arrow_upward
-            </i>
-          </th>
-        </tr>
-        <tr class="v-datatable__progress">
-          <th colspan="3"
-              class="column"
-          >
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>
-            b
-          </td>
-        </tr>
-        <tr>
-          <td>
-            c
-          </td>
-        </tr>
-        <tr>
-          <td>
-            a
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-  <div class="v-datatable v-table theme--light">
-    <div class="v-datatable__actions">
-      <div class="v-datatable__actions__select">
-        Rows per page:
-        <div role="combobox"
-             class="v-input v-text-field v-select v-input--hide-details theme--light"
-        >
-          <div class="v-input__control">
-            <div class="v-input__slot">
-              <div class="v-select__slot">
-                <div class="v-select__selections">
-                  <input aria-label="Rows per page:"
-                         readonly="readonly"
-                         type="text"
-                         autocomplete="on"
-                         aria-readonly="false"
-                  >
-                </div>
-                <div class="v-input__append-inner">
-                  <div class="v-input__icon v-input__icon--append">
-                    <i aria-hidden="true"
-                       class="v-icon material-icons theme--light"
-                    >
-                      arrow_drop_down
-                    </i>
-                  </div>
-                </div>
-              </div>
-              <div class="v-menu">
-                <div class="v-menu__content theme--light v-menu__content--auto "
-                     style="max-height: 200px; min-width: 75px; max-width: auto; top: 12px; left: 0px; z-index: 0; display: none;"
-                >
-                  <div class="v-select-list v-card theme--light">
-                    <div role="list"
-                         class="v-list theme--light"
-                    >
-                      <div role="listitem">
-                        <a class="v-list__tile v-list__tile--link theme--light">
-                          <div class="v-list__tile__content">
-                            <div class="v-list__tile__title">
-                              5
-                            </div>
-                          </div>
-                        </a>
-                      </div>
-                      <div role="listitem">
-                        <a class="v-list__tile v-list__tile--link theme--light">
-                          <div class="v-list__tile__content">
-                            <div class="v-list__tile__title">
-                              10
-                            </div>
-                          </div>
-                        </a>
-                      </div>
-                      <div role="listitem">
-                        <a class="v-list__tile v-list__tile--link theme--light">
-                          <div class="v-list__tile__content">
-                            <div class="v-list__tile__title">
-                              25
-                            </div>
-                          </div>
-                        </a>
-                      </div>
-                      <div role="listitem">
-                        <a class="v-list__tile v-list__tile--link theme--light">
-                          <div class="v-list__tile__content">
-                            <div class="v-list__tile__title">
-                              All
-                            </div>
-                          </div>
-                        </a>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="v-datatable__actions__range-controls">
-        <div class="v-datatable__actions__pagination">
-          1-3 of 3
-        </div>
-        <button disabled="disabled"
-                type="button"
-                class="v-btn v-btn--disabled v-btn--fab v-btn--flat 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 material-icons theme--light"
-            >
-              chevron_left
-            </i>
-          </span>
-        </button>
-        <button disabled="disabled"
-                type="button"
-                class="v-btn v-btn--disabled v-btn--fab v-btn--flat 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 material-icons theme--light"
-            >
-              chevron_right
-            </i>
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-
-`;
-
-exports[`VDataTable.vue should match a snapshot with single rows-per-page-items 1`] = `
-
-<div>
-  <div class="v-table__overflow">
-    <table class="v-datatable v-table theme--light">
-      <thead>
-        <tr>
-          <th role="columnheader"
-              scope="col"
-              aria-label="First Column: Sorted ascending. Activate to sort descending."
-              aria-sort="ascending"
-              tabindex="0"
-              class="column sortable active asc text-xs-left a-string"
-          >
-            First Column
-            <i aria-hidden="true"
-               class="v-icon material-icons theme--light"
-               style="font-size: 16px;"
-            >
-              arrow_upward
-            </i>
-          </th>
-          <th role="columnheader"
-              scope="col"
-              aria-label="Second Column: Not sorted."
-              aria-sort="none"
-              class="column text-xs-left"
-          >
-            Second Column
-          </th>
-          <th role="columnheader"
-              scope="col"
-              aria-label="Third Column: Not sorted. Activate to sort ascending."
-              aria-sort="none"
-              tabindex="0"
-              class="column sortable text-xs-left an array"
-          >
-            Third Column
-            <i aria-hidden="true"
-               class="v-icon material-icons theme--light"
-               style="font-size: 16px;"
-            >
-              arrow_upward
-            </i>
-          </th>
-        </tr>
-        <tr class="v-datatable__progress">
-          <th colspan="3"
-              class="column"
-          >
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-      </tbody>
-    </table>
-  </div>
-  <div class="v-datatable v-table theme--light">
-    <div class="v-datatable__actions">
-      <div class="v-datatable__actions__range-controls">
-        <div class="v-datatable__actions__pagination">
-          1-1 of 3
-        </div>
-        <button disabled="disabled"
-                type="button"
-                class="v-btn v-btn--disabled v-btn--fab v-btn--flat 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 material-icons theme--light"
-            >
-              chevron_left
-            </i>
-          </span>
-        </button>
-        <button type="button"
-                class="v-btn v-btn--fab v-btn--flat 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 material-icons theme--light"
-            >
-              chevron_right
-            </i>
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-
-`;
-
-exports[`VDataTable.vue should match display no-data-text when no data 1`] = `
-
-<td colspan="3"
-    class="text-xs-center"
->
-  foo
-</td>
-
-`;
-
-exports[`VDataTable.vue should match display no-results-text when no results 1`] = `
-
-<td colspan="3"
-    class="text-xs-center"
->
-  bar
-</td>
-
-`;
diff --git a/packages/vuetify/test/unit/mixins/data-iterable.spec.js b/packages/vuetify/test/unit/mixins/data-iterable.spec.js
deleted file mode 100644
index 64aa76f9dcc..00000000000
--- a/packages/vuetify/test/unit/mixins/data-iterable.spec.js
+++ /dev/null
@@ -1,126 +0,0 @@
-import { test } from '@/test'
-import DataIterable from '@/mixins/data-iterable'
-
-test('data-iterable.js', ({ mount }) => {
-
-  function dataIterableCmp(value, items) {
-    return mount({
-      mixins: [DataIterable],
-      render(h) {
-        return h('div', {}, this.genItems())
-      },
-      methods: {
-        genFilteredItems() {
-          const items = []
-          for (let index = 0, len = this.filteredItems.length; index < len; ++index) {
-            const item = this.filteredItems[index]
-            const props = this.createProps(item, index)
-            items.push(this.genItem(props))
-          }
-          return items
-        },
-        genItem(props) {
-          return this.$createElement('div', {
-            attrs: {
-              'class': 'select-me',
-            },
-            on: {
-              click: () => props.selected = true,
-            }
-          }, props.item.id)
-        },
-        genEmptyItems() {
-          return []
-        },
-      }
-    }, {
-      propsData: {
-        items,
-        value,
-      }
-    })
-  }
-
-  it('should update selection after items was set to an empty array', async () => {
-    const items = [{ id: 'foo' }, { id: 'bar' }]
-    let value = []
-
-    const wrapper = dataIterableCmp(value, items)
-
-    let callCount = 0
-    const selectionChanged = jest.fn()
-    // Emulate v-model behaviour
-    wrapper.vm.$on('input', function (newValue) {
-      callCount += 1
-      value = newValue
-      selectionChanged.apply(this, arguments)
-    })
-
-    wrapper.find('.select-me')[0].trigger('click')
-
-    expect(callCount).toBe(1)
-    expect(selectionChanged).toBeCalledWith([items[0]])
-
-    // All items have been removed, value which hold
-    // the selection is going to be updated
-    wrapper.setProps({ value, items: [] })
-
-    expect(callCount).toBe(2)
-    expect(selectionChanged).toBeCalledWith([])
-  })
-
-  it('should preserve selection after items changed to only the selection', async () => {
-    const items = [{ id: 'foo' }, { id: 'bar' }]
-    let value = []
-
-    const wrapper = dataIterableCmp(value, items)
-
-    let callCount = 0
-    const selectionChanged = jest.fn()
-    // Emulate v-model behaviour
-    wrapper.vm.$on('input', function (newValue) {
-      callCount += 1
-      value = newValue
-      selectionChanged.apply(this, arguments)
-    })
-
-    wrapper.find('.select-me')[0].trigger('click')
-
-    expect(callCount).toBe(1)
-    expect(selectionChanged).toBeCalledWith([items[0]])
-
-    // Only items[1] has been removed, value which hold
-    // the selection is not going to be updated
-    wrapper.setProps({ value, items: [items[0]] })
-
-    expect(callCount).toBe(1)
-  })
-
-  it('should update selection after items no longer contains selected item', async () => {
-    const items = [{ id: 'foo' }, { id: 'bar' }]
-    let value = []
-
-    const wrapper = dataIterableCmp(value, items)
-
-    let callCount = 0
-    const selectionChanged = jest.fn()
-    // Emulate v-model behaviour
-    wrapper.vm.$on('input', function (newValue) {
-      callCount += 1
-      value = newValue
-      selectionChanged.apply(this, arguments)
-    })
-
-    wrapper.find('.select-me')[0].trigger('click')
-
-    expect(callCount).toBe(1)
-    expect(selectionChanged).toBeCalledWith([items[0]])
-
-    // Only items[1] has been removed, value which hold
-    // the selection is not going to be updated
-    wrapper.setProps({ value, items: [items[1]] })
-
-    expect(callCount).toBe(2)
-    expect(selectionChanged).toBeCalledWith([])
-  })
-})
\ No newline at end of file