autoFillWidth prop

Author: Kenneth Cheng

README.md

@@ -116,6 +116,7 @@ In your template
 | sticky         | Optional  | Boolean           | Fixed column at left of the table, no response on horizontal scrolling |
 | invisible      | Optional  | Boolean           | Column visibility, default is false |
 | width          | Optional  | String            | Specified column width, default is '100px' |
+| autoFillWidth  | Optional  | Boolean           | Extend the width of this column to fill the editor width, default is false |
 | change         | Optional  | Function@         | The function to be triggered when the data of this column changed |
 | validate       | Optional  | Function          | The function to validate and return the error message |
 | key-field      | Optional  | Boolean           | Specified the key field which is included in keys parameter in @update event |

package-lock.json

@@ -2,7 +2,7 @@
   "name": "vue3-excel-editor",
   "email": "apple.6502@gmail.com",
   "description": "Vue3 plugin for displaying and editing the array-of-object in Excel style",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "main": "src/main.js",
   "dependencies": {
     "@vuepic/vue-datepicker": "^3.3.0",

package.json

@@ -20,6 +20,7 @@ export default {
     validate: {type: Function, default: null},
     change: {type: Function, default: null},
     link: {type: Function, default: null},
+    autoFillWidth: {type: Boolean, default: false},
 
     allowKeys: {type: [Array, Function], default () {return null}},
     mandatory: {type: String, default: ''},
@@ -210,6 +211,7 @@ export default {
         label: this.label === null ? this.field : this.label,
         type: this.type,
         width: this.width,
+        autoFillWidth: this.autoFillWidth,
 
         validate: validate,
         change: this.change,

src/VueExcelColumn.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="vue-excel-editor" :style="{display: 'inline-block', 'max-width': width}">
+  <div ref="editor" class="vue-excel-editor" :style="{display: 'inline-block', width}">
     <div class="component-content">
       <!-- No record -->
       <div v-if="localizedLabel.noRecordIndicator && pagingTable.length == 0" class="norecord" :style="{bottom: noFooter? '12px' : '37px'}">
@@ -23,7 +23,7 @@
               ondragover="event.preventDefault(); event.dataTransfer.dropEffect = 'none'">
           <colgroup>
             <col v-if="!noNumCol" style="width:40px">
-            <col v-for="(item, p) in fields" v-show="!item.invisible" :key="p" :style="{width: item.width}">
+            <col v-for="(item, p) in fields" v-show="!item.invisible" :key="p" :style="{width: item.width, 'min-width': item.minWidth || item.width}">
             <col v-if="vScroller.buttonHeight < vScroller.height" style="width:12px">
           </colgroup>
           <thead class="center-text">
@@ -569,6 +569,7 @@ export default {
     window.removeEventListener('wheel', this.mousewheel)
   },
   mounted () {
+    this.editor = this.$refs.editor
     this.tableContent = this.$refs.tableContent
     this.systable = this.$refs.systable
     this.colgroupTr = this.systable.children[0]
@@ -1034,6 +1035,20 @@ export default {
       // this.refresh()
     },
 
+    columnFillWidth () {
+      if (this.table.length === 0) return
+      if (!this.editor) return
+      const doFields = this.fields.filter(f => f.autoFillWidth)
+      const count = doFields.length
+      if (!count) return
+
+      const fullWidth = this.editor.getBoundingClientRect().width
+      const viewWidth = this.fields.filter(f => !f.invisible).reduce((c, f) => c - -f.width.replace(/px$/, ''), 0) + 40
+      const fillWidth = viewWidth - fullWidth + 2
+      if (fillWidth)
+        doFields.forEach(f => f.minWidth = (f.width.replace(/px$/, '') - fillWidth / count) + 'px')
+    },
+
     /* *** Date Picker *********************************************************************************
      */
     showDatePickerDiv () {
@@ -1251,7 +1266,7 @@ export default {
       return false
     },
     winResize () {
-      this.lazy(this.refreshPageSize, 200)
+      this.lazy(this.refreshPageSize, 500)
     },
     winPaste (e) {
       if (e.target.tagName !== 'TEXTAREA') return
@@ -1683,6 +1698,7 @@ export default {
         h = Math.min(24 * (this.table.length - this.pageTop) + offset, h)
         this.systable.parentNode.style.height = h + 'px'
       }
+      this.columnFillWidth()
       setTimeout(this.calVScroll)
     },
     firstPage (e) {