fix(VDataTable): use convertToUnit in table header width styles (#8592)

fixes #8591
vuetifyjs · Aug 22, 2019 · 4a52142 · 4a52142
1 parent f74b70a
commit 4a52142
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaderDesktop.ts b/packages/vuetify/src/components/VDataTable/VDataTableHeaderDesktop.ts
@@ -2,7 +2,7 @@
 import { VNode } from 'vue'
 import mixins from '../../util/mixins'
 import header, { TableHeader } from './mixins/header'
-import { wrapInArray } from '../../util/helpers'
+import { wrapInArray, convertToUnit } from '../../util/helpers'
 
 export default mixins(header).extend({
   name: 'v-data-table-header-desktop',
@@ -27,8 +27,8 @@ export default mixins(header).extend({
       }
 
       const styles = {
-        width: header.width,
-        minWidth: header.width,
+        width: convertToUnit(header.width),
+        minWidth: convertToUnit(header.width),
       }
 
       const classes = [

diff --git a/packages/vuetify/src/components/VDataTable/__tests__/VDataTableHeader.spec.ts b/packages/vuetify/src/components/VDataTable/__tests__/VDataTableHeader.spec.ts
@@ -17,8 +17,8 @@ const testHeaders = [
     sortable: false,
     value: 'name',
   },
-  { text: 'Calories', value: 'calories' },
-  { text: 'Fat (g)', value: 'fat' },
+  { text: 'Calories', width: 50, value: 'calories' },
+  { text: 'Fat (g)', width: '50em', value: 'fat' },
   { text: 'Carbs (g)', value: 'carbs' },
   { text: 'Protein (g)', value: 'protein' },
   { text: 'Iron (%)', value: 'iron' },

diff --git a/...s/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTableHeader.spec.ts.snap b/...s/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTableHeader.spec.ts.snap
@@ -18,6 +18,7 @@ exports[`VDataTableHeader.ts desktop should render 1`] = `
         aria-label="Calories: Not sorted. Activate to sort ascending."
         aria-sort="none"
         class="text-start sortable"
+        style="width: 50px; min-width: 50px;"
     >
       <span>
         Calories
@@ -34,6 +35,7 @@ exports[`VDataTableHeader.ts desktop should render 1`] = `
         aria-label="Fat (g): Not sorted. Activate to sort ascending."
         aria-sort="none"
         class="text-start sortable"
+        style="width: 50em; min-width: 50em;"
     >
       <span>
         Fat (g)
@@ -115,6 +117,7 @@ exports[`VDataTableHeader.ts desktop should work with multiSort 1`] = `
         aria-label="Calories: Not sorted. Activate to sort ascending."
         aria-sort="none"
         class="text-start sortable"
+        style="width: 50px; min-width: 50px;"
     >
       <span>
         Calories
@@ -131,6 +134,7 @@ exports[`VDataTableHeader.ts desktop should work with multiSort 1`] = `
         aria-label="Fat (g): Not sorted. Activate to sort ascending."
         aria-sort="none"
         class="text-start sortable"
+        style="width: 50em; min-width: 50em;"
     >
       <span>
         Fat (g)
@@ -218,6 +222,7 @@ exports[`VDataTableHeader.ts desktop should work with showGroupBy 1`] = `
         aria-label="Calories: Not sorted. Activate to sort ascending."
         aria-sort="none"
         class="text-start sortable"
+        style="width: 50px; min-width: 50px;"
     >
       <span>
         Calories
@@ -237,6 +242,7 @@ exports[`VDataTableHeader.ts desktop should work with showGroupBy 1`] = `
         aria-label="Fat (g): Not sorted. Activate to sort ascending."
         aria-sort="none"
         class="text-start sortable"
+        style="width: 50em; min-width: 50em;"
     >
       <span>
         Fat (g)
@@ -330,6 +336,7 @@ exports[`VDataTableHeader.ts desktop should work with sortBy correctly 1`] = `
         aria-label="Calories: Not sorted. Activate to sort ascending."
         aria-sort="none"
         class="text-start sortable"
+        style="width: 50px; min-width: 50px;"
     >
       <span>
         Calories
@@ -346,6 +353,7 @@ exports[`VDataTableHeader.ts desktop should work with sortBy correctly 1`] = `
         aria-label="Fat (g): Not sorted. Activate to sort ascending."
         aria-sort="none"
         class="text-start sortable"
+        style="width: 50em; min-width: 50em;"
     >
       <span>
         Fat (g)
@@ -427,6 +435,7 @@ exports[`VDataTableHeader.ts desktop should work with sortDesc correctly 1`] = `
         aria-label="Calories: Not sorted. Activate to sort ascending."
         aria-sort="none"
         class="text-start sortable"
+        style="width: 50px; min-width: 50px;"
     >
       <span>
         Calories
@@ -443,6 +452,7 @@ exports[`VDataTableHeader.ts desktop should work with sortDesc correctly 1`] = `
         aria-label="Fat (g): Not sorted. Activate to sort ascending."
         aria-sort="none"
         class="text-start sortable"
+        style="width: 50em; min-width: 50em;"
     >
       <span>
         Fat (g)