feat(quasar): Add "wrap-cells" prop to QTable & QMarkupTable

Author: rstoenescu

docs/build/md-plugin-table.js

@@ -7,13 +7,16 @@ module.exports = function (md) {
     const token = tokens[idx]
 
     token.tag = 'q-markup-table'
+    token.attrSet(':wrap-cells', 'true')
+
     return self.renderToken(tokens, idx, options)
   }
 
   md.renderer.rules.table_close = (tokens, idx, options, env, self) => {
     const token = tokens[idx]
 
     token.tag = 'q-markup-table'
+
     return self.renderToken(tokens, idx, options)
   }
 

docs/src/layouts/Layout.vue

@@ -63,7 +63,7 @@ q-layout.doc-layout(view="hHh LpR lff", @scroll="onScroll")
         q-input.q-my-lg(v-model="search", filled, dense)
           q-icon(slot="append", name="search")
 
-      app-menu
+      app-menu.q-mb-lg
 
   q-drawer(
     v-if="hasDrawer"

quasar/dev/components/components/data-table-part1.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="q-layout-padding" style="max-width: 1400px;">
       <h4>QMarkupTable</h4>
-      <q-markup-table :separator="separator">
+      <q-markup-table :separator="separator" wrap-cells>
         <thead>
           <tr>
             <th class="text-left">Dessert (100g serving)</th>

quasar/src/components/table/QMarkupTable.js

@@ -12,7 +12,8 @@ export default Vue.extend({
       type: String,
       default: 'horizontal',
       validator: v => ['horizontal', 'vertical', 'cell', 'none'].includes(v)
-    }
+    },
+    wrapCells: Boolean
   },
 
   computed: {
@@ -22,7 +23,8 @@ export default Vue.extend({
         'q-table--dark': this.dark,
         'q-table--dense': this.dense,
         'q-table--flat': this.flat,
-        'q-table--bordered': this.bordered
+        'q-table--bordered': this.bordered,
+        'q-table--no-wrap': this.wrapCells === false
       }
     }
   },

quasar/src/components/table/QMarkupTable.json

@@ -22,6 +22,11 @@
       "default": "horizontal",
       "values": [ "horizontal", "vertical", "cell", "none" ],
       "examples": [ "cell" ]
+    },
+
+    "wrap-cells": {
+      "type": "Boolean",
+      "desc": "Wrap text within table cells"
     }
   },
 

quasar/src/components/table/QTable.js

@@ -60,6 +60,7 @@ export default Vue.extend({
       default: 'horizontal',
       validator: v => ['horizontal', 'vertical', 'cell', 'none'].includes(v)
     },
+    wrapCells: Boolean,
     binaryStateSort: Boolean,
     noDataLabel: String,
     noResultsLabel: String,
@@ -169,6 +170,7 @@ export default Vue.extend({
           'q-table--dense': this.computedDense,
           'q-table--flat': this.flat,
           'q-table--bordered': this.bordered,
+          'q-table--no-wrap': this.wrapCells === false,
           [`q-table--${this.separator}-separator`]: true,
           fullscreen: this.inFullscreen,
           scroll: this.inFullscreen

quasar/src/components/table/QTable.json

@@ -91,6 +91,11 @@
       "examples": [ "cell" ]
     },
 
+    "wrap-cells": {
+      "type": "Boolean",
+      "desc": "Wrap text within table cells"
+    },
+
     "binary-state-sort": {
       "type": "Boolean",
       "desc": "Skip the third state (unsorted) when user toggles column sort direction"

quasar/src/components/table/table.styl

@@ -8,8 +8,8 @@
   border-collapse collapse
   border-spacing 0
 
-  thead tr
-    height 56px
+  thead tr, tbody td
+    height 48px
 
   th
     font-weight 500
@@ -30,7 +30,6 @@
     will-change background
 
   th, td
-    white-space nowrap
     padding 7px 16px
     background-color inherit
 
@@ -39,7 +38,6 @@
     border-width 0
 
   tbody td
-    height 48px
     font-weight 400
     font-size 13px
 
@@ -137,6 +135,10 @@
   &--bordered
     border 1px solid $table-border-color
 
+.q-table--no-wrap
+  th, td
+    white-space nowrap
+
 /*
  * Separators
  */
@@ -188,9 +190,7 @@
   .q-table
     th, td
       padding 4px 8px
-    thead tr
-      height 40px
-    tbody td
+    thead tr, tbody tr, tbody td
       height 28px
     th:first-child, td:first-child
       padding-left 16px