docs(VDataTable): clarify that height is required with fixed-header

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

@@ -0,0 +1,37 @@
+<template>
+  <v-data-table
+    :headers="headers"
+    :items="desserts"
+    height="300"
+    items-per-page="20"
+    fixed-footer
+  ></v-data-table>
+</template>
+
+<script setup>
+  const headers = [
+    { title: 'Dessert (100g)', align: 'start', key: 'name' },
+    { title: 'Calories', align: 'end', key: 'calories' },
+    { title: 'Fat (g)', align: 'end', key: 'fat' },
+    { title: 'Carbs (g)', align: 'end', key: 'carbs' },
+    { title: 'Protein (g)', align: 'end', key: 'protein' },
+  ]
+
+  const desserts = [
+    { name: 'Frozen Yogurt', calories: 159, fat: 6, carbs: 24, protein: 4 },
+    { name: 'Ice cream sandwich', calories: 237, fat: 9, carbs: 37, protein: 4.3 },
+    { name: 'Eclair', calories: 262, fat: 16, carbs: 23, protein: 6 },
+    { name: 'Cupcake', calories: 305, fat: 3.7, carbs: 67, protein: 4.3 },
+    { name: 'Gingerbread', calories: 356, fat: 16, carbs: 49, protein: 3.9 },
+    { name: 'Jelly bean', calories: 375, fat: 0, carbs: 94, protein: 0 },
+    { name: 'Lollipop', calories: 392, fat: 0.2, carbs: 98, protein: 0 },
+    { name: 'Honeycomb', calories: 408, fat: 3.2, carbs: 87, protein: 6.5 },
+    { name: 'Donut', calories: 452, fat: 25, carbs: 51, protein: 4.9 },
+    { name: 'KitKat', calories: 518, fat: 26, carbs: 65, protein: 7 },
+    { name: 'Marshmallow', calories: 129, fat: 0, carbs: 33, protein: 0 },
+    { name: 'Brownie', calories: 480, fat: 24, carbs: 58, protein: 7 },
+    { name: 'Cheesecake', calories: 560, fat: 38, carbs: 41, protein: 9 },
+    { name: 'Waffle', calories: 410, fat: 20, carbs: 52, protein: 8 },
+    { name: 'Muffin', calories: 340, fat: 14, carbs: 45, protein: 6 },
+  ]
+</script>

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

@@ -0,0 +1,37 @@
+<template>
+  <v-data-table
+    :headers="headers"
+    :items="desserts"
+    height="300"
+    items-per-page="20"
+    fixed-header
+  ></v-data-table>
+</template>
+
+<script setup>
+  const headers = [
+    { title: 'Dessert (100g)', align: 'start', key: 'name' },
+    { title: 'Calories', align: 'end', key: 'calories' },
+    { title: 'Fat (g)', align: 'end', key: 'fat' },
+    { title: 'Carbs (g)', align: 'end', key: 'carbs' },
+    { title: 'Protein (g)', align: 'end', key: 'protein' },
+  ]
+
+  const desserts = [
+    { name: 'Frozen Yogurt', calories: 159, fat: 6, carbs: 24, protein: 4 },
+    { name: 'Ice cream sandwich', calories: 237, fat: 9, carbs: 37, protein: 4.3 },
+    { name: 'Eclair', calories: 262, fat: 16, carbs: 23, protein: 6 },
+    { name: 'Cupcake', calories: 305, fat: 3.7, carbs: 67, protein: 4.3 },
+    { name: 'Gingerbread', calories: 356, fat: 16, carbs: 49, protein: 3.9 },
+    { name: 'Jelly bean', calories: 375, fat: 0, carbs: 94, protein: 0 },
+    { name: 'Lollipop', calories: 392, fat: 0.2, carbs: 98, protein: 0 },
+    { name: 'Honeycomb', calories: 408, fat: 3.2, carbs: 87, protein: 6.5 },
+    { name: 'Donut', calories: 452, fat: 25, carbs: 51, protein: 4.9 },
+    { name: 'KitKat', calories: 518, fat: 26, carbs: 65, protein: 7 },
+    { name: 'Marshmallow', calories: 129, fat: 0, carbs: 33, protein: 0 },
+    { name: 'Brownie', calories: 480, fat: 24, carbs: 58, protein: 7 },
+    { name: 'Cheesecake', calories: 560, fat: 38, carbs: 41, protein: 9 },
+    { name: 'Waffle', calories: 410, fat: 20, carbs: 52, protein: 8 },
+    { name: 'Muffin', calories: 340, fat: 14, carbs: 45, protein: 6 },
+  ]
+</script>

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

@@ -141,6 +141,26 @@ Other options are available for setting **width**, **align**, **fixed**, or pass
 
 There is no shortage of properties available for customizing various aspects of the Data table components.
 
+#### Fixed header
+
+Use the **fixed-header** prop together with the **height** prop to keep the header visible while scrolling through tall tables. Without a **height** constraint the header will not be sticky because the table itself has no overflow to scroll.
+
+::: info
+The **height** prop is required for **fixed-header** to work. Without it, the table expands to show all rows and there is nothing to scroll.
+:::
+
+<ExamplesExample file="v-data-table/prop-fixed-header" />
+
+#### Fixed footer
+
+Use the **fixed-footer** prop together with the **height** prop to keep the pagination footer visible while scrolling through tall tables. Like **fixed-header**, the **height** prop is required for **fixed-footer** to work.
+
+::: info
+The **height** prop is required for **fixed-footer** to work. Without it, the table expands to show all rows and there is nothing to scroll.
+:::
+
+<ExamplesExample file="v-data-table/prop-fixed-footer" />
+
 #### Density
 
 Using the **density** prop you are able to give your data tables an alternate style.