@ascentgl/ads-ui 21.90.0 → 21.91.0

package/fesm2022/ascentgl-ads-ui.mjs

@@ -8605,8 +8605,16 @@ class AdsTableComponent {
     }
     /** @ignore */
     ngOnChanges(changes) {
-        if (changes['defaultViewMode'] && changes['defaultViewMode'].isFirstChange()) {
-            this.isListView.set(this.defaultViewMode === 'list');
+        if (changes['defaultViewMode']) {
+            const newViewMode = changes['defaultViewMode'].currentValue;
+            const isListMode = newViewMode === 'list';
+            if (this.isListView() !== isListMode) {
+                this.isListView.set(isListMode);
+                if (isListMode) {
+                    // Refresh list view when switching to list mode
+                    Promise.resolve().then(() => this.refreshListView());
+                }
+            }
         }
         // When rowData changes (e.g., async load), refresh the column definitions
         // so that filterOptions are recalculated from the new data
@@ -8641,8 +8649,8 @@ class AdsTableComponent {
         const tableElement = this.elementRef.nativeElement.querySelector('ag-grid-angular');
         if (tableElement) {
             this.resizeObserver = new ResizeObserver(() => {
-                // Skip resize handling when the grid is hidden (list view mode)
-                if (this.isListView()) {
+                // Skip resize handling when the grid is hidden (list view mode) or has zero width
+                if (this.isListView() || tableElement.clientWidth === 0) {
                     return;
                 }
                 this.updateColumnDefs(tableElement.clientWidth);
@@ -8944,8 +8952,13 @@ class AdsTableComponent {
         else {
             this.listSentinelObserver?.disconnect();
             this.listSentinelObserver = undefined;
-            // Re-fit columns after the grid becomes visible again
-            Promise.resolve().then(() => this.gridApi?.sizeColumnsToFit());
+            // Re-fit columns after the grid becomes visible again (use setTimeout to ensure the grid is rendered)
+            setTimeout(() => {
+                const tableEl = this.elementRef.nativeElement.querySelector('ag-grid-angular');
+                if (tableEl && tableEl.clientWidth > 0) {
+                    this.gridApi?.sizeColumnsToFit();
+                }
+            });
         }
         this.viewChanged.emit(this.isListView() ? 'list' : 'grid');
     }
@@ -9480,9 +9493,11 @@ class AdsTableComponent {
         // Update internal state tracking
         this.updateSortingState();
         this.updateFilteringState();
-        // Fit columns to grid width after visibility changes
+        // Fit columns to grid width after visibility changes (only when grid is visible)
         setTimeout(() => {
-            this.gridApi?.sizeColumnsToFit();
+            if (!this.isListView()) {
+                this.gridApi?.sizeColumnsToFit();
+            }
         }, 0);
     }
     /** @ignore */
@@ -9500,7 +9515,10 @@ class AdsTableComponent {
     }
     /** @ignore */
     onFirstDataRendered(params) {
-        params.api.sizeColumnsToFit();
+        // Only size columns if the grid is visible (not in list view)
+        if (!this.isListView()) {
+            params.api.sizeColumnsToFit();
+        }
         // Re-evaluate filtering state now that data is available
         // This ensures filter button shows correct state when filters were applied before data loaded
         this.updateFilteringState();