feat: Add resizing for QTable Columns: Issue #5115

ui/src/components/table/QTable.js

@@ -43,6 +43,11 @@ export default createComponent({
       type: [ String, Function ],
       default: 'id'
     },
+    resizableCols: {
+        type: Boolean,
+        default: false
+      },
+
 
     columns: Array,
     loading: Boolean,
@@ -116,6 +121,59 @@ export default createComponent({
     ...useTableSortProps
   },
 
+
+    data() {
+      return {
+        colWidths: {},
+        resizingCol: null,
+        startX: 0
+      }
+    },
+    mounted() {
+      // Initialize widths for each column
+      this.computedCols.forEach(col => {
+        this.$set(this.colWidths, col.name, 150)
+      })
+    },
+    methods: {
+      startResizing(colName, evt) {
+        this.resizingCol = colName
+        this.startX = evt.pageX
+        document.addEventListener('mousemove', this.handleResize)
+        document.addEventListener('mouseup', this.stopResizing)
+      },
+      handleResize(evt) {
+        if (!this.resizingCol) return
+        const diff = evt.pageX - this.startX
+        this.colWidths[this.resizingCol] += diff
+        this.startX = evt.pageX
+      },
+      stopResizing() {
+        document.removeEventListener('mousemove', this.handleResize)
+        document.removeEventListener('mouseup', this.stopResizing)
+        this.resizingCol = null
+      },
+      renderHeaderCell(h, col) {
+        const hasHandle = this.resizableCols
+        const handle = hasHandle
+          ? h('span', {
+              class: 'q-table__resize-handle',
+              onMousedown: evt => this.startResizing(col.name, evt)
+            })
+          : null
+
+        return h('th', {
+          style: { width: this.colWidths[col.name] + 'px' }
+        }, [
+          col.label,
+          handle
+        ])
+      }
+    },
+
+
+
+
   emits: [
     'request', 'virtualScroll',
     ...useFullscreenEmits,

ui/src/components/table/QTable.sass

@@ -291,3 +291,14 @@ body.desktop .q-table > tbody > tr:not(.q-tr--no-hover):hover > td:not(.q-td--no
   &.q-table--vertical-separator, &.q-table--cell-separator
     .q-table__top
       border-color: $table-dark-border-color
+
+
+
+.q-table th .q-table__resize-handle {
+  cursor: col-resize;
+  display: inline-block;
+  width: 6px;
+  height: 100%;
+  background-color: #ccc;
+  margin-left: 4px;
+}