feat: [REQUEST] Adjustable Column Widths for QTables quasarframework#2248

Author: rstoenescu

dev/components/components/data-table.vue

@@ -474,7 +474,7 @@ export default {
           sortable: true
         },
         { name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true },
-        { name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true },
+        { name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true, classes: 'bg-grey', style: 'width: 10px' },
         { name: 'carbs', label: 'Carbs (g)', field: 'carbs' },
         { name: 'protein', label: 'Protein (g)', field: 'protein' },
         { name: 'sodium', label: 'Sodium (mg)', field: 'sodium' },

src/components/table/table-body.js

@@ -37,7 +37,11 @@ export default {
                 const slot = this.$scopedSlots[`body-cell-${col.name}`]
                 return slot
                   ? slot(this.addBodyCellMetaData({ row, col: col }))
-                  : h('td', { staticClass: col.__tdClass }, this.getCellValue(col, row))
+                  : h('td', {
+                    staticClass: col.__tdClass,
+                    style: col.style,
+                    'class': col.classes
+                  }, this.getCellValue(col, row))
               })
 
           if (this.hasSelectionMode) {

src/components/table/table-header.js

@@ -47,7 +47,9 @@ export default {
               sort: this.sort,
               colsMap: this.computedColsMap
             }
-          }
+          },
+          style: col.style,
+          'class': col.classes
         }, col.label)
       }
       const child = this.computedCols.map(mapFn)