fix: CDataTable: fix header styles:

woothu · woothu · commit 603af02123e9 · 2020-04-07T15:53:54.000+02:00
- vertically align text
- prevent icon from overflow
diff --git a/src/components/table/CDataTable.vue b/src/components/table/CDataTable.vue
@@ -57,7 +57,7 @@
                 :key="index"
               >
                 <slot :name="`${rawColumnNames[index]}-header`">
-                  <div class="d-inline">{{name}}</div>
+                  <div>{{name}}</div>
                 </slot>
                 <slot
                   v-if="isSortable(index)"
@@ -169,7 +169,7 @@
                 :key="index"
               >
                 <slot :name="`${rawColumnNames[index]}-header`">
-                  <div class="d-inline">{{name}}</div>
+                  <div>{{name}}</div>
                 </slot>
                 <slot
                   v-if="isSortable(index)"
@@ -507,7 +507,7 @@ export default {
       return fields && fields[index]._classes ? fields[index]._classes : ''
     },
     headerStyles (index) {
-      let style = ''
+      let style = 'vertical-align:middle;overflow:hidden;'
       if (this.isSortable(index)) {
         style += `cursor:pointer;`
       }
diff --git a/src/components/table/tests/__snapshots__/CDataTable.spec.js.snap b/src/components/table/tests/__snapshots__/CDataTable.spec.js.snap
@@ -151,11 +151,9 @@ exports[`CDataTable renders correctly 2`] = `
         <tr>
           <th
             class="user-custom-class position-relative pr-4"
-            style="cursor: pointer; width: 40%;"
+            style="vertical-align: middle; overflow: hidden; cursor: pointer; width: 40%;"
           >
-            <div
-              class="d-inline"
-            >
+            <div>
               Username
             </div>
              
@@ -173,11 +171,9 @@ exports[`CDataTable renders correctly 2`] = `
           </th>
           <th
             class="position-relative pr-4"
-            style="cursor: pointer;"
+            style="vertical-align: middle; overflow: hidden; cursor: pointer;"
           >
-            <div
-              class="d-inline"
-            >
+            <div>
               Registered
             </div>
              
@@ -195,11 +191,9 @@ exports[`CDataTable renders correctly 2`] = `
           </th>
           <th
             class="position-relative pr-4"
-            style="cursor: pointer; width: 20%;"
+            style="vertical-align: middle; overflow: hidden; cursor: pointer; width: 20%;"
           >
-            <div
-              class="d-inline"
-            >
+            <div>
               Role
             </div>
              
@@ -217,11 +211,9 @@ exports[`CDataTable renders correctly 2`] = `
           </th>
           <th
             class="position-relative pr-4"
-            style="cursor: pointer; width: 20%;"
+            style="vertical-align: middle; overflow: hidden; cursor: pointer; width: 20%;"
           >
-            <div
-              class="d-inline"
-            >
+            <div>
               Status
             </div>
              
@@ -239,11 +231,9 @@ exports[`CDataTable renders correctly 2`] = `
           </th>
           <th
             class="position-relative pr-4"
-            style="width: 1%;"
+            style="vertical-align: middle; overflow: hidden; width: 1%;"
           >
-            <div
-              class="d-inline"
-            >
+            <div>
               
             </div>
              
@@ -509,11 +499,9 @@ exports[`CDataTable renders correctly 2`] = `
         <tr>
           <th
             class="user-custom-class position-relative pr-4"
-            style="cursor: pointer; width: 40%;"
+            style="vertical-align: middle; overflow: hidden; cursor: pointer; width: 40%;"
           >
-            <div
-              class="d-inline"
-            >
+            <div>
               Username
             </div>
              
@@ -531,11 +519,9 @@ exports[`CDataTable renders correctly 2`] = `
           </th>
           <th
             class="position-relative pr-4"
-            style="cursor: pointer;"
+            style="vertical-align: middle; overflow: hidden; cursor: pointer;"
           >
-            <div
-              class="d-inline"
-            >
+            <div>
               Registered
             </div>
              
@@ -553,11 +539,9 @@ exports[`CDataTable renders correctly 2`] = `
           </th>
           <th
             class="position-relative pr-4"
-            style="cursor: pointer; width: 20%;"
+            style="vertical-align: middle; overflow: hidden; cursor: pointer; width: 20%;"
           >
-            <div
-              class="d-inline"
-            >
+            <div>
               Role
             </div>
              
@@ -575,11 +559,9 @@ exports[`CDataTable renders correctly 2`] = `
           </th>
           <th
             class="position-relative pr-4"
-            style="cursor: pointer; width: 20%;"
+            style="vertical-align: middle; overflow: hidden; cursor: pointer; width: 20%;"
           >
-            <div
-              class="d-inline"
-            >
+            <div>
               Status
             </div>
              
@@ -597,11 +579,9 @@ exports[`CDataTable renders correctly 2`] = `
           </th>
           <th
             class="position-relative pr-4"
-            style="width: 1%;"
+            style="vertical-align: middle; overflow: hidden; width: 1%;"
           >
-            <div
-              class="d-inline"
-            >
+            <div>
               
             </div>
              
