Merge pull request #53 from Qvant-lab/qtable_multiline-header

[QTable] add minWidth prop for columns, add title overflow
altai-ui · Feb 3, 2021 · 3f864ab · 3f864ab
2 parents 76e4fe4 + 2d5fcfa
commit 3f864ab
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 23 deletions.
diff --git a/src/qComponents/QTable/__snapshots__/QTable.test.js.snap b/src/qComponents/QTable/__snapshots__/QTable.test.js.snap
@@ -49,15 +49,17 @@ exports[`QTable QTable should match snapshot 1`] = `
                   class="q-table__header-cell-wrapper"
                 >
                   <div
-                    class="q-table__header-cell-content"
+                    class="q-table__header-cell-content q-table__header-cell-content_original"
+                    title="Column 1"
                   >
                     
                         Column 1
-                       
-                    <!---->
+                      
                   </div>
                    
                   <!---->
+                   
+                  <!---->
                 </div>
               </th>
             </tr>

diff --git a/src/qComponents/QTable/src/QTable.vue b/src/qComponents/QTable/src/QTable.vue
@@ -84,12 +84,14 @@
                     v-for="(column, index) in group.columns"
                     :key="`group${groupIndex}${index}`"
                     :class="getCellClasses(column, group)"
-                    :style="getHeaderCellStyle(group)"
+                    :style="getHeaderCellStyle(group, column)"
                     class="q-table__header-cell"
                   >
                     <div class="q-table__header-cell-wrapper">
                       <div
                         class="q-table__header-cell-content"
+                        :class="getHeaderContentClass(column)"
+                        :title="getHeaderTitle(column)"
                         @click="handleHeaderClick(column)"
                       >
                         <slot
@@ -109,17 +111,17 @@
                         <template v-else>
                           {{ column.value }}
                         </template>
-
-                        <span
-                          v-if="column.sortable"
-                          class="q-table__sort-arrow"
-                          :class="{
-                            'q-icon-arrow-up': sort.direction !== 'descending',
-                            'q-icon-arrow-down': sort.direction === 'descending'
-                          }"
-                        />
                       </div>
 
+                      <span
+                        v-if="column.sortable"
+                        class="q-table__sort-arrow"
+                        :class="{
+                          'q-icon-arrow-up': sort.direction !== 'descending',
+                          'q-icon-arrow-down': sort.direction === 'descending'
+                        }"
+                      />
+
                       <template v-if="group.draggable">
                         <div
                           class="drop-handler dnd-before"
@@ -317,9 +319,9 @@ export default {
      *  `sortable`,
      *  `slots`,
      *  `width` (works with `fixedLayout: true`),
+     *  `minWidth` (works with `fixedLayout: false`),
      *  `customCellClass`,
-     *  `formatter` (fn),
-     *  `slots`
+     *  `formatter` (fn)
      */
     groupsOfColumns: {
       type: Array,
@@ -620,6 +622,16 @@ export default {
   },
 
   methods: {
+    getHeaderContentClass({ slots }) {
+      const hasSlot = Boolean(slots?.header || this.$scopedSlots.header);
+      return hasSlot ? null : 'q-table__header-cell-content_original';
+    },
+
+    getHeaderTitle({ value, slots }) {
+      const hasSlot = Boolean(slots?.header || this.$scopedSlots.header);
+      return hasSlot ? null : value;
+    },
+
     changeWrapperHeight() {
       if (this.isLoading || !this.isLoadingAnimationComplete) return;
 
@@ -813,10 +825,14 @@ export default {
       this.scrolled = target.scrollLeft;
     },
 
-    getHeaderCellStyle(group) {
-      if (!this.isSeparated || !group) return {};
+    getHeaderCellStyle(group, column) {
+      const style = {};
+
+      if (column?.minWidth) style.minWidth = column.minWidth;
+      if (!this.isSeparated || !group) return style;
 
       return {
+        ...style,
         borderColor: group.color ?? ''
       };
     },

diff --git a/src/qComponents/QTable/src/q-table.scss b/src/qComponents/QTable/src/q-table.scss
@@ -171,9 +171,8 @@
     overflow: hidden;
     font-weight: var(--font-weight-bold);
     line-height: var(--line-height-base);
-    vertical-align: top;
+    vertical-align: bottom;
     color: var(--color-primary-black);
-    white-space: nowrap;
 
     &:not(.q-table__header-cell__checkbox) [class*='q-icon'] {
       font-size: 24px;
@@ -192,7 +191,16 @@
 
     &-content {
       display: flex;
-      align-items: center;
+      white-space: nowrap;
+
+      &_original {
+        display: -webkit-box;
+        align-items: center;
+        overflow: hidden;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        white-space: initial;
+      }
     }
 
     .q-context-wrapper {

diff --git a/stories/components/QTable/QTable.stories.js b/stories/components/QTable/QTable.stories.js
@@ -57,8 +57,7 @@ export default {
           },
           {
             key: 'col3',
-            value: 'Column 3',
-            sortable: true
+            value: 'Column 3'
           },
           {
             key: 'col4',
@@ -71,7 +70,7 @@ export default {
           },
           {
             key: 'col5',
-            value: 'Column 5'
+            value: 'Column with very long title'
           },
           {
             key: 'col6',