fix(VDataTable): add new headerProps prop (#19025)

fixes #18993 Co-authored-by: John Leider <[email protected]>
vuetifyjs · Jan 17, 2024 · d121f54 · d121f54
1 parent 0dca210
commit d121f54
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.sass b/packages/vuetify/src/components/VDataTable/VDataTable.sass
@@ -60,7 +60,8 @@
                 .v-data-table-header__sort-icon
                   opacity: 0.5
 
-.v-data-table-column--fixed, .v-data-table__th--sticky
+.v-data-table-column--fixed,
+.v-data-table__th--sticky
   background: $table-background
   position: sticky !important
   left: 0

diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx
@@ -12,11 +12,11 @@ import { IconValue } from '@/composables/icons'
 import { LoaderSlot, makeLoaderProps, useLoader } from '@/composables/loader'
 
 // Utilities
-import { computed } from 'vue'
+import { computed, mergeProps } from 'vue'
 import { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
-import type { CSSProperties, UnwrapRef } from 'vue'
+import type { CSSProperties, PropType, UnwrapRef } from 'vue'
 import type { provideSelection } from './composables/select'
 import type { provideSort } from './composables/sort'
 import type { InternalDataTableHeader } from './types'
@@ -64,6 +64,9 @@ export const makeVDataTableHeadersProps = propsFactory({
     type: IconValue,
     default: '$sortDesc',
   },
+  headerProps: {
+    type: Object as PropType<Record<string, any>>,
+  },
 
   ...makeLoaderProps(),
 }, 'VDataTableHeaders')
@@ -113,6 +116,7 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
 
     const VDataTableHeaderCell = ({ column, x, y }: { column: InternalDataTableHeader, x: number, y: number }) => {
       const noPadding = column.key === 'data-table-select' || column.key === 'data-table-expand'
+      const headerProps = mergeProps(props.headerProps ?? {}, column.headerProps ?? {})
 
       return (
         <VDataTableColumn
@@ -139,7 +143,7 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
           fixed={ column.fixed }
           lastFixed={ column.lastFixed }
           noPadding={ noPadding }
-          { ...column.headerProps }
+          { ...headerProps }
         >
           {{
             default: () => {