fix(VDataTable): add missing hide-default-header/footer props (#19774)

vuetifyjs · May 9, 2024 · a6340ac · a6340ac
1 parent 85c41db
commit a6340ac
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 25 deletions.
diff --git a/packages/api-generator/src/locale/en/VDataTable.json b/packages/api-generator/src/locale/en/VDataTable.json
@@ -18,7 +18,8 @@
     "headers": "An array of objects that each describe a header column. See the example below for a definition of all properties.",
     "headersLength": "Can be used in combination with `hide-default-header` to specify the number of columns in the table to allow expansion rows and loading bar to function properly.",
     "height": "Set an explicit height of table.",
-    "hideDefaultHeader": "Hide the default headers.",
+    "hideDefaultHeader": "Hides the default header.",
+    "hideDefaultFooter": "Hides the default footer. This has no effect on `v-data-table-virtual`.",
     "hover": "Adds a hover effects to a table rows.",
     "itemClass": "Property on supplied `items` that contains item's row class or function that takes an item as an argument and returns the class of corresponding row.",
     "itemsPerPage": "Changes how many items per page should be visible. Can be used with `.sync` modifier. Setting this prop to `-1` will display all items on the page.",

diff --git a/packages/docs/src/pages/en/components/data-tables/basics.md b/packages/docs/src/pages/en/components/data-tables/basics.md
@@ -140,11 +140,11 @@ The `v-data-table` renders a default footer using the `v-data-footer` component.
 
 <ExamplesExample file="v-data-table/prop-footer-props" /> -->
 
-<!-- #### Hide default header and footer
+#### Hide default header and footer
 
 You can apply the **hide-default-header** and **hide-default-footer** props to remove the default header and footer respectively.
 
-<ExamplesExample file="v-data-table/prop-hide-header-footer" /> -->
+<ExamplesExample file="v-data-table/prop-hide-header-footer" />
 
 #### Selection
 

diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.tsx b/packages/vuetify/src/components/VDataTable/VDataTable.tsx
@@ -73,6 +73,8 @@ export type VDataTableSlots<T> = VDataTableRowsSlots<T> & VDataTableHeadersSlots
 export const makeDataTableProps = propsFactory({
   ...makeVDataTableRowsProps(),
 
+  hideDefaultFooter: Boolean,
+  hideDefaultHeader: Boolean,
   width: [String, Number],
   search: String,
 
@@ -240,12 +242,14 @@ export const VDataTable = genericComponent<new <T extends readonly any[], V>(
             default: () => slots.default ? slots.default(slotProps.value) : (
               <>
                 { slots.colgroup?.(slotProps.value) }
-                <thead>
-                  <VDataTableHeaders
-                    { ...dataTableHeadersProps }
-                    v-slots={ slots }
-                  />
-                </thead>
+                { !props.hideDefaultHeader && (
+                  <thead key="thead">
+                    <VDataTableHeaders
+                      { ...dataTableHeadersProps }
+                      v-slots={ slots }
+                    />
+                  </thead>
+                )}
                 { slots.thead?.(slotProps.value) }
                 <tbody>
                   { slots['body.prepend']?.(slotProps.value) }
@@ -263,7 +267,7 @@ export const VDataTable = genericComponent<new <T extends readonly any[], V>(
                 { slots.tfoot?.(slotProps.value) }
               </>
             ),
-            bottom: () => slots.bottom ? slots.bottom(slotProps.value) : (
+            bottom: () => slots.bottom ? slots.bottom(slotProps.value) : !props.hideDefaultFooter && (
               <>
                 <VDivider />
 

diff --git a/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx b/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx
@@ -165,13 +165,15 @@ export const VDataTableServer = genericComponent<new <T extends readonly any[],
             default: () => slots.default ? slots.default(slotProps.value) : (
               <>
                 { slots.colgroup?.(slotProps.value) }
-                <thead class="v-data-table__thead" role="rowgroup">
-                  <VDataTableHeaders
-                    { ...dataTableHeadersProps }
-                    sticky={ props.fixedHeader }
-                    v-slots={ slots }
-                  />
-                </thead>
+                { !props.hideDefaultHeader && (
+                  <thead key="thead" class="v-data-table__thead" role="rowgroup">
+                    <VDataTableHeaders
+                      { ...dataTableHeadersProps }
+                      sticky={ props.fixedHeader }
+                      v-slots={ slots }
+                    />
+                  </thead>
+                )}
                 { slots.thead?.(slotProps.value) }
                 <tbody class="v-data-table__tbody" role="rowgroup">
                   { slots['body.prepend']?.(slotProps.value) }
@@ -189,7 +191,7 @@ export const VDataTableServer = genericComponent<new <T extends readonly any[],
                 { slots.tfoot?.(slotProps.value) }
               </>
             ),
-            bottom: () => slots.bottom ? slots.bottom(slotProps.value) : (
+            bottom: () => slots.bottom ? slots.bottom(slotProps.value) : !props.hideDefaultFooter && (
               <>
                 <VDivider />
 

diff --git a/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx b/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx
@@ -203,13 +203,15 @@ export const VDataTableVirtual = genericComponent<new <T extends readonly any[],
               >
                 <table>
                   { slots.colgroup?.(slotProps.value) }
-                  <thead>
-                    <VDataTableHeaders
-                      { ...dataTableHeadersProps }
-                      sticky={ props.fixedHeader }
-                      v-slots={ slots }
-                    />
-                  </thead>
+                  { !props.hideDefaultHeader && (
+                    <thead key="thead">
+                      <VDataTableHeaders
+                        { ...dataTableHeadersProps }
+                        sticky={ props.fixedHeader }
+                        v-slots={ slots }
+                      />
+                    </thead>
+                  )}
                   <tbody>
                     <tr ref={ markerRef } style={{ height: convertToUnit(paddingTop.value), border: 0 }}>
                       <td colspan={ columns.value.length } style={{ height: 0, border: 0 }}></td>