fix(VDataTable): apply fixed-header when sticky prop is set

fixes #20903
vuetifyjs · Jan 23, 2025 · 2795792 · 2795792
1 parent 6181018
commit 2795792
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 7 deletions.
diff --git a/packages/api-generator/src/locale/en/VDataTableHeaders.json b/packages/api-generator/src/locale/en/VDataTableHeaders.json
@@ -3,7 +3,8 @@
     "disableSort": "Toggles rendering of sort button.",
     "sortAscIcon": "Icon used for ascending sort button.",
     "sortDescIcon": "Icon used for descending sort button.",
-    "sticky": "Sticks the header to the top of the table."
+    "sticky": "Deprecated, use `fixed-header` instead.",
+    "fixedHeader": "Sticks the header to the top of the table."
   },
   "slots": {
     "[`column.${string}`]": "Slot for custom rendering of a column.",

diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.tsx b/packages/vuetify/src/components/VDataTable/VDataTable.tsx
@@ -238,6 +238,7 @@ export const VDataTable = genericComponent<new <T extends readonly any[], V>(
           ]}
           style={ props.style }
           { ...tableProps }
+          fixedHeader={ props.fixedHeader || props.sticky }
         >
           {{
             top: () => slots.top?.(slotProps.value),

diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx
@@ -59,8 +59,8 @@ export type VDataTableHeadersSlots = {
 
 export const makeVDataTableHeadersProps = propsFactory({
   color: String,
-  sticky: Boolean,
   disableSort: Boolean,
+  fixedHeader: Boolean,
   multiSort: Boolean,
   sortAscIcon: {
     type: IconValue,
@@ -74,6 +74,9 @@ export const makeVDataTableHeadersProps = propsFactory({
     type: Object as PropType<Record<string, any>>,
   },
 
+  /** @deprecated */
+  sticky: Boolean,
+
   ...makeDisplayProps(),
   ...makeLoaderProps(),
 }, 'VDataTableHeaders')
@@ -91,12 +94,12 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
     const { loaderClasses } = useLoader(props)
 
     function getFixedStyles (column: InternalDataTableHeader, y: number): CSSProperties | undefined {
-      if (!props.sticky && !column.fixed) return undefined
+      if (!(props.sticky || props.fixedHeader) && !column.fixed) return undefined
 
       return {
         position: 'sticky',
         left: column.fixed ? convertToUnit(column.fixedOffset) : undefined,
-        top: props.sticky ? `calc(var(--v-table-header-height) * ${y})` : undefined,
+        top: (props.sticky || props.fixedHeader) ? `calc(var(--v-table-header-height) * ${y})` : undefined,
       }
     }
 
@@ -127,7 +130,7 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
     const headerCellClasses = computed(() => ([
       'v-data-table__th',
       {
-        'v-data-table__th--sticky': props.sticky,
+        'v-data-table__th--sticky': (props.sticky || props.fixedHeader),
       },
       displayClasses.value,
       loaderClasses.value,

diff --git a/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx b/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx
@@ -160,6 +160,7 @@ export const VDataTableServer = genericComponent<new <T extends readonly any[],
           ]}
           style={ props.style }
           { ...tableProps }
+          fixedHeader={ props.fixedHeader || props.sticky }
         >
           {{
             top: () => slots.top?.(slotProps.value),
@@ -170,7 +171,6 @@ export const VDataTableServer = genericComponent<new <T extends readonly any[],
                   <thead key="thead" class="v-data-table__thead" role="rowgroup">
                     <VDataTableHeaders
                       { ...dataTableHeadersProps }
-                      sticky={ props.fixedHeader }
                       v-slots={ slots }
                     />
                   </thead>

diff --git a/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx b/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx
@@ -189,6 +189,7 @@ export const VDataTableVirtual = genericComponent<new <T extends readonly any[],
           ]}
           style={ props.style }
           { ...tableProps }
+          fixedHeader={ props.fixedHeader || props.sticky }
         >
           {{
             top: () => slots.top?.(slotProps.value),
@@ -208,7 +209,6 @@ export const VDataTableVirtual = genericComponent<new <T extends readonly any[],
                     <thead key="thead">
                       <VDataTableHeaders
                         { ...dataTableHeadersProps }
-                        sticky={ props.fixedHeader }
                         v-slots={ slots }
                       />
                     </thead>