1.0.225

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.0.222",
+  "version": "1.0.225",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.0.222',
+  version: '1.0.225',
   description: 'website for lossless.com'
 }

ts_web/elements/dees-table.ts

@@ -263,6 +263,8 @@ export class DeesTable<T> extends DeesElement {
       th,
       td {
         position: relative;
+        vertical-align: top;
+
         padding: 0px;
         border-right: 1px dashed ${cssManager.bdTheme('#999', '#808080')};
       }
@@ -582,44 +584,55 @@ export class DeesTable<T> extends DeesElement {
     `;
   }
 
-  public async firstUpdated() {}
+  public async firstUpdated() {
+  }
 
   public async updated(changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
     super.updated(changedProperties);
-    this.freezeColumnWidths();
+    this.determineColumnWidths();
   }
 
-  freezeColumnWidths() {
+  public async determineColumnWidths() {
+    const domtools = await this.domtoolsPromise;
+    await domtools.convenience.smartdelay.delayFor(0);
     // Get the table element
     const table = this.shadowRoot.querySelector('table');
     if (!table) return;
 
-    // Create a colgroup if it doesn't exist
-    let colgroup = table.querySelector('colgroup');
-    if (!colgroup) {
-      colgroup = document.createElement('colgroup');
-      table.insertBefore(colgroup, table.firstChild);
-    }
-
     // Get the first row's cells to measure the widths
     const cells = table.rows[0].cells;
 
-    for (let i = 0; i < cells.length; i++) {
+    const handleColumnByIndex = async (i: number, waitForRenderArg: boolean = false) => {
+      const done = plugins.smartpromise.defer();
       const cell = cells[i];
 
       // Get computed width
       const width = window.getComputedStyle(cell).width;
-
-      // Check if there's already a <col> for this cell
-      let col = colgroup.children[i] as HTMLElement;
-      if (!col) {
-        col = document.createElement('col');
-        colgroup.appendChild(col);
+      if (cell.textContent.includes('Actions')) {
+        const neededWidth = this.dataActions.filter(actionArg => actionArg.type.includes('inRow')).length * 35;
+        cell.style.width = `${Math.max(neededWidth, 68)}px`;
+      } else {
+        cell.style.width = width;
+      }
+      if (waitForRenderArg) {
+        requestAnimationFrame(() => {
+          done.resolve();
+        });
+        await done.promise;
       }
-
-      // Set the width
-      col.style.width = width;
     }
+
+    if (cells[cells.length - 1].textContent.includes('Actions')) {
+      await handleColumnByIndex(cells.length - 1, true);
+    }
+
+    for (let i = 0; i < cells.length; i++) {
+      if (cells[i].textContent.includes('Actions')) {
+        continue;
+      }
+      await handleColumnByIndex(i);
+    }
+    table.style.tableLayout = 'fixed';
   }
 
   getActionsForType(typeArg: ITableAction['type'][0]) {
@@ -649,6 +662,7 @@ export class DeesTable<T> extends DeesElement {
       }
       if (saveArg) {
         itemArg[key] = input.value as any; // Convert string to T (you might need better type casting depending on your data structure)
+        this.changeSubject.next(this);
       }
       input.remove();
       target.style.color = originalColor;