fix(VDataTable): expose slot props

packages/docs/src/examples/v-data-table/headers-multiple.vue

@@ -0,0 +1,121 @@
+<template>
+  <v-data-table
+    :headers="headers"
+    :items="desserts"
+    class="elevation-1"
+    item-key="name"
+    items-per-page="5"
+  ></v-data-table>
+</template>
+
+<script>
+  export default {
+    data: () => ({
+      desserts: [
+        {
+          name: 'Frozen Yogurt',
+          calories: 159,
+          fat: 6.0,
+          carbs: 24,
+          protein: 4.0,
+          iron: 1,
+        },
+        {
+          name: 'Ice cream sandwich',
+          calories: 237,
+          fat: 9.0,
+          carbs: 37,
+          protein: 4.3,
+          iron: 1,
+        },
+        {
+          name: 'Eclair',
+          calories: 262,
+          fat: 16.0,
+          carbs: 23,
+          protein: 6.0,
+          iron: 7,
+        },
+        {
+          name: 'Cupcake',
+          calories: 305,
+          fat: 3.7,
+          carbs: 67,
+          protein: 4.3,
+          iron: 8,
+        },
+        {
+          name: 'Gingerbread',
+          calories: 356,
+          fat: 16.0,
+          carbs: 49,
+          protein: 3.9,
+          iron: 16,
+        },
+        {
+          name: 'Jelly bean',
+          calories: 375,
+          fat: 0.0,
+          carbs: 94,
+          protein: 0.0,
+          iron: 0,
+        },
+        {
+          name: 'Lollipop',
+          calories: 392,
+          fat: 0.2,
+          carbs: 98,
+          protein: 0,
+          iron: 2,
+        },
+        {
+          name: 'Honeycomb',
+          calories: 408,
+          fat: 3.2,
+          carbs: 87,
+          protein: 6.5,
+          iron: 45,
+        },
+        {
+          name: 'Donut',
+          calories: 452,
+          fat: 25.0,
+          carbs: 51,
+          protein: 4.9,
+          iron: 22,
+        },
+        {
+          name: 'KitKat',
+          calories: 518,
+          fat: 26.0,
+          carbs: 65,
+          protein: 7,
+          iron: 6,
+        },
+      ],
+      headers: [
+        [
+          {
+            title: 'Dessert (100g serving)',
+            align: 'start',
+            sortable: false,
+            key: 'name',
+            rowspan: 2,
+          },
+          {
+            title: 'Properties',
+            key: 'foo',
+            colspan: 5,
+          },
+        ],
+        [
+          { title: 'Calories', align: 'end', key: 'calories' },
+          { title: 'Fat (g)', align: 'end', key: 'fat' },
+          { title: 'Carbs (g)', align: 'end', key: 'carbs' },
+          { title: 'Protein (g)', align: 'end', key: 'protein' },
+          { title: 'Iron (%)', align: 'end', key: 'iron' },
+        ],
+      ],
+    }),
+  }
+</script>

packages/docs/src/examples/v-data-table/misc-external-paginate.vue

@@ -6,13 +6,12 @@
     :items-per-page="itemsPerPage"
     hide-default-footer
     class="elevation-1"
-    @update:options="options = $event"
   >
     <template v-slot:bottom>
       <div class="text-center pt-2">
         <v-pagination
           v-model="page"
-          :length="options.pageCount"
+          :length="pageCount"
         ></v-pagination>
         <v-text-field
           :model-value="itemsPerPage"
@@ -33,9 +32,6 @@
   export default {
     data () {
       return {
-        options: {
-          pageCount: 1,
-        },
         page: 1,
         itemsPerPage: 5,
         headers: [
@@ -135,5 +131,10 @@
         ],
       }
     },
+    computed: {
+      pageCount () {
+        return Math.ceil(this.desserts.length / this.itemsPerPage)
+      },
+    },
   }
 </script>

packages/docs/src/examples/v-data-table/prop-dense.vue

@@ -98,7 +98,7 @@
           title: 'Dessert (100g serving)',
           align: 'start',
           sortable: false,
-          value: 'name',
+          key: 'name',
         },
         { title: 'Calories', align: 'end', key: 'calories' },
         { title: 'Fat (g)', align: 'end', key: 'fat' },

packages/docs/src/examples/v-data-table/prop-grouping.vue

@@ -8,7 +8,6 @@
     item-value="name"
   ></v-data-table>
 </template>
-
 <script>
   export default {
     data: () => ({
@@ -18,11 +17,11 @@
         {
           title: 'Dessert (100g serving)',
           align: 'start',
-          value: 'name',
+          key: 'name',
           groupable: false,
         },
-        { title: 'Category', value: 'category', align: 'end' },
-        { title: 'Dairy', value: 'dairy', align: 'end' },
+        { title: 'Category', key: 'category', align: 'end' },
+        { title: 'Dairy', key: 'dairy', align: 'end' },
       ],
       desserts: [
         {
@@ -73,6 +72,7 @@
         {
           name: 'KitKat',
           category: 'Candy',
+          dairy: 'Yes',
         },
       ],
     }),

packages/docs/src/examples/v-data-table/slot-headers.vue

@@ -5,11 +5,14 @@
     item-value="name"
     class="elevation-1"
   >
-    <template v-slot:headers="{ columns }">
+    <template v-slot:headers="{ columns, isSorted, getSortIcon, toggleSort }">
       <tr>
         <template v-for="column in columns" :key="column.key">
           <td>
-            <span class="mr-2">{{ column.title }}</span>
+            <span class="mr-2 cursor-pointer" @click="() => toggleSort(column)">{{ column.title }}</span>
+            <template v-if="isSorted(column)">
+              <v-icon :icon="getSortIcon(column)"></v-icon>
+            </template>
             <v-icon v-if="column.removable" icon="$close" @click="() => remove(column.key)"></v-icon>
           </td>
         </template>

packages/docs/src/examples/v-data-table/slot-item-key.vue

@@ -5,8 +5,8 @@
     class="elevation-1"
   >
     <template v-slot:item.calories="{ item }">
-      <v-chip :color="getColor(item.raw.calories)">
-        {{ item.raw.calories }}
+      <v-chip :color="getColor(item.columns.calories)">
+        {{ item.columns.calories }}
       </v-chip>
     </template>
   </v-data-table>

packages/docs/src/examples/v-data-table/slot-simple-checkbox.vue

@@ -6,7 +6,7 @@
   >
     <template v-slot:item.glutenfree="{ item }">
       <v-checkbox-btn
-        v-model="item.value.glutenfree"
+        v-model="item.columns.glutenfree"
         disabled
       ></v-checkbox-btn>
     </template>

packages/docs/src/pages/en/components/data-tables/grouping.md

@@ -15,10 +15,6 @@ Data table has basic support for grouping rows by a column value.
 
 <entry />
 
-<v-alert type="info">
-  v-data-table-server does not currently support grouping rows
-</v-alert>
-
 ## Examples
 
 ### Group by

packages/docs/src/pages/en/components/data-tables/headers.md

@@ -16,17 +16,26 @@ Headers are used to define the columns of the table.
 
 <entry />
 
-## TODO:
+## Headers and columns
 
-- Headers is the entire section above body (but below top), possibly multiple rows
-- Columns are addressable (has key) and show data and/or other rendered content. Is always a 1-dimensional array.
+In all of the data-table components, we differentiate between **headers** and **columns**. When you use a data-table component, you provide it with **headers**, which is either a 1- or 2-dimensional array of items describing one or more rows of headers in the table. The **columns** of a data-table component are a subset of the headers, but is always a 1-dimensional array, and consists of those items that are part of the last row.
+
+Here is a data-table that uses multiple rows of headers to make use of the colspan and rowspan features. The **Properties** cell is not part of the **columns** array, because it is not a part of the last row, while the **Dessert (100g serving)** cell is, because it used **rowspan** to span both rows.
+
+<example file="v-data-table/headers-multiple" />
 
 ## Examples
 
 ### Column slot
 
 You can use the dynamic slots `column.<key>` to customize only certain columns. `<key>` corresponds to the **key** property in the items found in the **headers** prop.
 
+<alert type="info">
+
+  There are two built-in slots for customizing both the select (`column.data-table-select`) and expand (`column.data-table-expand`) columns when using **show-select** and **show-expand** props respectively.
+
+</alert>
+
 <example file="v-data-table/slot-header" />
 
 ### Headers slot

packages/docs/src/pages/en/components/data-tables/virtual-tables.md

@@ -12,6 +12,10 @@ related:
 
 # Data table - Virtual tables
 
-Lorem ipsum etc etc
+The v-data-table-virtual component relies on all data being available locally. But unlike the standard data-table it uses virtualization to only render a small portion of the rows. This makes it well suited for displaying large data sets. It supports sorting and filtering, but not pagination.
 
 ## Examples
+
+### Basic example
+
+<example file="v-data-table/virtual" />