Sync min-width changes

Author: bendera

dev/vscode-table/shift-table-columns.html

@@ -46,19 +46,19 @@ <h1>Basic example</h1>
         >
           <vscode-table-header slot="header">
             <vscode-table-header-cell min-width="30"
-              >id</vscode-table-header-cell
+              >Id</vscode-table-header-cell
             >
             <vscode-table-header-cell min-width="70"
-              >firstname</vscode-table-header-cell
+              >First name</vscode-table-header-cell
             >
             <vscode-table-header-cell min-width="70"
-              >lastname</vscode-table-header-cell
+              >Last name</vscode-table-header-cell
             >
             <vscode-table-header-cell min-width="70"
-              >email</vscode-table-header-cell
+              >Email</vscode-table-header-cell
             >
             <vscode-table-header-cell min-width="70"
-              >company</vscode-table-header-cell
+              >Company</vscode-table-header-cell
             >
           </vscode-table-header>
           <vscode-table-body slot="body">

src/vscode-table-header-cell/vscode-table-header-cell.ts

@@ -36,6 +36,7 @@ export class VscodeTableHeaderCell extends VscElement {
       this.dispatchEvent(
         new CustomEvent('vsc-table-change-min-column-width', {
           detail: {columnIndex: this.index, propertyValue: this.minWidth},
+          bubbles: true,
         }) as VscTableChangeMinColumnWidthEvent
       );
     }
@@ -54,4 +55,8 @@ declare global {
   interface HTMLElementTagNameMap {
     'vscode-table-header-cell': VscodeTableHeaderCell;
   }
+
+  interface GlobalEventHandlersEventMap {
+    'vsc-table-change-min-column-width': VscTableChangeMinColumnWidthEvent;
+  }
 }

src/vscode-table/vscode-table.ts

@@ -22,6 +22,7 @@ import {
 } from '../includes/sizes.js';
 import styles from './vscode-table.styles.js';
 import {ColumnResizeController} from './ColumnResizeController.js';
+import {VscTableChangeMinColumnWidthEvent} from '../vscode-table-header-cell/vscode-table-header-cell.js';
 
 /**
  * @tag vscode-table
@@ -191,6 +192,15 @@ export class VscodeTable extends VscElement {
 
   private _columnResizeController = new ColumnResizeController(this);
 
+  constructor() {
+    super();
+
+    this.addEventListener(
+      'vsc-table-change-min-column-width',
+      this._handleMinColumnWidthChange
+    );
+  }
+
   override connectedCallback(): void {
     super.connectedCallback();
 
@@ -618,6 +628,17 @@ export class VscodeTable extends VscElement {
     this._stopDrag(event);
   };
 
+  private _handleMinColumnWidthChange = (
+    event: VscTableChangeMinColumnWidthEvent
+  ) => {
+    const {columnIndex, propertyValue} = event.detail;
+    const value = parseSizeAttributeToPercent(propertyValue, this._componentW);
+
+    if (value) {
+      this._columnResizeController.setColumnMinWidthAt(columnIndex, value);
+    }
+  };
+
   override render(): TemplateResult {
     const splitterPositions = this._columnResizeController.splitterPositions;