diff --git a/packages/docs/src/examples/v-data-table/prop-fixed-footer.vue b/packages/docs/src/examples/v-data-table/prop-fixed-footer.vue new file mode 100644 index 00000000000..46947c8aa67 --- /dev/null +++ b/packages/docs/src/examples/v-data-table/prop-fixed-footer.vue @@ -0,0 +1,37 @@ + + + diff --git a/packages/docs/src/examples/v-data-table/prop-fixed-header.vue b/packages/docs/src/examples/v-data-table/prop-fixed-header.vue new file mode 100644 index 00000000000..bde90d7a552 --- /dev/null +++ b/packages/docs/src/examples/v-data-table/prop-fixed-header.vue @@ -0,0 +1,37 @@ + + + diff --git a/packages/docs/src/pages/en/components/data-tables/basics.md b/packages/docs/src/pages/en/components/data-tables/basics.md index e8acb0fa407..acac2750136 100644 --- a/packages/docs/src/pages/en/components/data-tables/basics.md +++ b/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. +::: + + + +#### 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. +::: + + + #### Density Using the **density** prop you are able to give your data tables an alternate style.