fix(VDataTable): fix header column widths not being respected (#8296)

setting both width and min-width as styles on header row was the only way I could get a consistent result closes #5072 closes #7623
vuetifyjs · Aug 12, 2019 · a18cc68 · a18cc68
1 parent 56c7e65
commit a18cc68
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 15 deletions.
diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.ts b/packages/vuetify/src/components/VDataTable/VDataTable.ts
@@ -197,9 +197,6 @@ export default VDataIterator.extend({
           class: {
             divider: header.divider,
           },
-          style: {
-            width: header.width,
-          },
         })
       }))
     },

diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaderDesktop.ts b/packages/vuetify/src/components/VDataTable/VDataTableHeaderDesktop.ts
@@ -24,7 +24,11 @@ export default mixins(header).extend({
         scope: 'col',
         'aria-label': header.text || '',
         'aria-sort': 'none',
+      }
+
+      const styles = {
         width: header.width,
+        minWidth: header.width,
       }
 
       const classes = [
@@ -77,6 +81,7 @@ export default mixins(header).extend({
       return this.$createElement('th', {
         attrs,
         class: classes,
+        style: styles,
         on: listeners,
       }, children)
     },

diff --git a/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap b/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap
@@ -2706,9 +2706,7 @@ exports[`VDataTable.ts should render with showExpand 1`] = `
   <div class="v-data-table__wrapper">
     <table>
       <colgroup>
-        <col class
-             style="width: 1px;"
-        >
+        <col class>
         <col class>
         <col class>
         <col class>
@@ -2722,8 +2720,8 @@ exports[`VDataTable.ts should render with showExpand 1`] = `
               scope="col"
               aria-label
               aria-sort="none"
-              width="1px"
               class="text-start"
+              style="width: 1px; min-width: 1px;"
           >
             <span>
             </span>
@@ -3043,9 +3041,7 @@ exports[`VDataTable.ts should render with showExpand 2`] = `
   <div class="v-data-table__wrapper">
     <table>
       <colgroup>
-        <col class
-             style="width: 1px;"
-        >
+        <col class>
         <col class>
         <col class>
         <col class>
@@ -3059,8 +3055,8 @@ exports[`VDataTable.ts should render with showExpand 2`] = `
               scope="col"
               aria-label
               aria-sort="none"
-              width="1px"
               class="text-start"
+              style="width: 1px; min-width: 1px;"
           >
             <span>
             </span>
@@ -3380,9 +3376,7 @@ exports[`VDataTable.ts should render with showSelect 1`] = `
   <div class="v-data-table__wrapper">
     <table>
       <colgroup>
-        <col class
-             style="width: 1px;"
-        >
+        <col class>
         <col class>
         <col class>
         <col class>
@@ -3396,8 +3390,8 @@ exports[`VDataTable.ts should render with showSelect 1`] = `
               scope="col"
               aria-label
               aria-sort="none"
-              width="1px"
               class="text-start"
+              style="width: 1px; min-width: 1px;"
           >
             <div class="v-data-table__checkbox v-simple-checkbox">
               <div class="v-input--selection-controls__ripple">