fix: column styles on chrome (#827)

carbon-design-system · Feb 12, 2020 · acae072 · acae072
1 parent 59bd310
commit acae072
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 12 deletions.
diff --git a/packages/core/src/components/cv-data-table/_cv-data-table-heading.vue b/packages/core/src/components/cv-data-table/_cv-data-table-heading.vue
@@ -1,11 +1,19 @@
 <template>
-  <th :aria-sort="sortOrder">
-    <button type="button" v-if="sortable" :class="['bx--table-sort', orderClass]" @click="onSortClick">
+  <th :aria-sort="sortOrder" :style="skeleton && headingStyle">
+    <button
+      type="button"
+      v-if="sortable"
+      :class="['bx--table-sort', orderClass]"
+      @click="onSortClick"
+      :style="headingStyle"
+    >
       <cv-wrapper :tag-type="headingLabelTag" class="bx--table-header-label">{{ heading }}</cv-wrapper>
       <ArrowDown16 class="bx--table-sort__icon" />
       <Arrows16 class="bx--table-sort__icon-unsorted" />
     </button>
-    <cv-wrapper v-else :tag-type="headingLabelTag" class="bx--table-header-label">{{ heading }}</cv-wrapper>
+    <cv-wrapper v-else :tag-type="headingLabelTag" class="bx--table-header-label" :style="headingStyle">{{
+      heading
+    }}</cv-wrapper>
   </th>
 </template>
 
@@ -28,6 +36,7 @@ export default {
     sortable: Boolean,
     order: { type: String, default: 'none' },
     skeleton: Boolean,
+    headingStyle: Object,
   },
   computed: {
     sortOrder() {

diff --git a/packages/core/src/components/cv-data-table/cv-data-table.vue b/packages/core/src/components/cv-data-table/cv-data-table.vue
@@ -114,11 +114,11 @@
             <cv-data-table-heading
               v-for="(column, index) in dataColumns"
               :key="`${index}:${column}`"
-              :heading="column.label ? column.label : column"
-              :sortable="isSortable(column)"
+              :heading="columnHeading(column)"
+              :sortable="isColSortable(column)"
               :order="column.order"
               @sort="val => onSort(index, val)"
-              :style="headingStyle(index)"
+              :heading-style="headingStyle(index)"
               :skeleton="skeleton"
             />
             <th v-if="hasOverflowMenu"></th>
@@ -275,17 +275,25 @@ export default {
     this.checkSlots();
   },
   computed: {
-    isSortable() {
+    columnHeading() {
       return col => {
-        if (col) {
-          // specific column or all sortable
-          return (col && col.sortable) || this.sortable;
+        if (typeof col === 'object') {
+          return col.label || '';
         } else {
-          // is any column sortable
-          return this.sortable || this.columns.some(column => column.sortable);
+          return col;
         }
       };
     },
+    isSortable() {
+      // is any column sortable
+      return this.sortable || this.columns.some(column => column.sortable);
+    },
+    isColSortable() {
+      return col => {
+        // is specific column or all sortable
+        return (col && col.sortable) || this.sortable;
+      };
+    },
     hasTableHeader() {
       return this.title || this.isHelper;
     },