@acorex/components 21.0.0-next.29 → 21.0.0-next.30

package/fesm2022/acorex-components-data-table.mjs

@@ -138,6 +138,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
 
 class AXDataTableColumnComponent {
     constructor() {
+        /**
+         * Width of the column.
+         * - string: e.g., '180px', '20%'
+         * - number: e.g., 180 (treated as pixels)
+         * - 'auto': automatically fits to content after data load
+         *
+         * @defaultValue 'auto'
+         */
         this.width = 'auto';
         this.allowSorting = false;
         this.allowResizing = false;
@@ -1430,14 +1438,6 @@ class AXDataTableComponent extends AXBaseDataTable {
          * @defaultValue `true`
          */
         this.alternative = true;
-        /**
-         * Auto-fits all columns width on initial data load.
-         * Only applies to columns with allowResizing=true.
-         * Fixed columns are skipped by default.
-         *
-         * @defaultValue `false`
-         */
-        this.autoFitColumnsOnLoad = false;
         /**
          * Indicates if the table header should be displayed.
          *
@@ -1650,22 +1650,15 @@ class AXDataTableComponent extends AXBaseDataTable {
         this.columns.changes.pipe(this._unsubscriber.takeUntilDestroy).subscribe((cols) => {
             this.columnsList.set(cols.toArray());
         });
-        // Auto-fit columns on init if requested
-        if (this.autoFitColumnsOnLoad) {
-            // Wait for first data load with a flag to ensure it only runs once
-            this.dataSource.onChanged.pipe(this._unsubscriber.takeUntilDestroy).subscribe((data) => {
-                if (data.items.length > 0) {
-                    // Delay to ensure DOM is ready
-                    setTimeout(() => {
-                        this.autoFitAllColumns({
-                            skipFixed: false,
-                            skipLoading: false,
-                            maxWidth: 500,
-                        });
-                    }, 100);
-                }
-            });
-        }
+        // Auto-fit columns with width='auto' after data load
+        this.dataSource.onChanged.pipe(this._unsubscriber.takeUntilDestroy).subscribe((data) => {
+            if (data.items.length > 0) {
+                // Delay to ensure DOM is ready
+                setTimeout(() => {
+                    this.autoFitColumnsWithAutoWidth();
+                }, 100);
+            }
+        });
     }
     /**
      *  @ignore
@@ -1920,6 +1913,30 @@ class AXDataTableComponent extends AXBaseDataTable {
         if (firstEndColumn)
             firstEndColumn['isFirstFixedColumn'] = true;
     }
+    /**
+     * Auto-fits columns that have width='auto'.
+     * Called automatically after data load.
+     *
+     * @ignore
+     */
+    autoFitColumnsWithAutoWidth() {
+        const autoWidthColumns = [];
+        this.columns.forEach((column, index) => {
+            // Only auto-fit if width is explicitly set to 'auto'
+            if (column.width === 'auto') {
+                autoWidthColumns.push(index);
+                try {
+                    this.autoFitColumn(index, { maxWidth: 500 });
+                }
+                catch (error) {
+                    console.error(`Failed to auto-fit column ${index}:`, error);
+                }
+            }
+        });
+        if (autoWidthColumns.length > 0) {
+            console.log(`Auto-fitted ${autoWidthColumns.length} column(s) with width='auto': indices ${autoWidthColumns.join(', ')}`);
+        }
+    }
     /**
      * Auto-fits all columns width based on their content.
      *
@@ -2087,7 +2104,7 @@ class AXDataTableComponent extends AXBaseDataTable {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: AXDataTableComponent, isStandalone: true, selector: "ax-data-table", inputs: { dataSource: "dataSource", selectedRows: "selectedRows", parentField: "parentField", rowTemplate: "rowTemplate", emptyTemplate: "emptyTemplate", noDataTemplate: "noDataTemplate", alternative: "alternative", autoFitColumnsOnLoad: "autoFitColumnsOnLoad", showHeader: "showHeader", fixedHeader: "fixedHeader", showFooter: "showFooter", fixedFooter: "fixedFooter", itemHeight: "itemHeight", allowReordering: "allowReordering", paging: "paging", fetchDataMode: "fetchDataMode", loading: "loading", focusedRow: "focusedRow" }, outputs: { selectedRowsChange: "selectedRowsChange", focusedRowChange: "focusedRowChange", onRowClick: "onRowClick", onRowDbClick: "onRowDbClick", onColumnsOrderChanged: "onColumnsOrderChanged", onColumnSizeChanged: "onColumnSizeChanged", onPageChanged: "onPageChanged" }, host: { attributes: { "ngSkipHydration": "true" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: AXDataTableComponent, isStandalone: true, selector: "ax-data-table", inputs: { dataSource: "dataSource", selectedRows: "selectedRows", parentField: "parentField", rowTemplate: "rowTemplate", emptyTemplate: "emptyTemplate", noDataTemplate: "noDataTemplate", alternative: "alternative", showHeader: "showHeader", fixedHeader: "fixedHeader", showFooter: "showFooter", fixedFooter: "fixedFooter", itemHeight: "itemHeight", allowReordering: "allowReordering", paging: "paging", fetchDataMode: "fetchDataMode", loading: "loading", focusedRow: "focusedRow" }, outputs: { selectedRowsChange: "selectedRowsChange", focusedRowChange: "focusedRowChange", onRowClick: "onRowClick", onRowDbClick: "onRowDbClick", onColumnsOrderChanged: "onColumnsOrderChanged", onColumnSizeChanged: "onColumnSizeChanged", onPageChanged: "onPageChanged" }, host: { attributes: { "ngSkipHydration": "true" } }, providers: [
             { provide: AXBaseDataTable, useExisting: AXDataTableComponent },
             AXUnsubscriber,
             { provide: AXComponent, useExisting: AXDataTableComponent },
@@ -2135,8 +2152,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 type: Input
             }], alternative: [{
                 type: Input
-            }], autoFitColumnsOnLoad: [{
-                type: Input
             }], showHeader: [{
                 type: Input
             }], fixedHeader: [{