fix: horizontal scroll

horizontal scroll shouldn't appear on load if there is enough space available to render columns.
siemens · Oct 15, 2024 · 8a604f0 · 8a604f0
1 parent 5b3dd8f
commit 8a604f0
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 21 deletions.
diff --git a/projects/ngx-datatable/src/lib/components/datatable.component.ts b/projects/ngx-datatable/src/lib/components/datatable.component.ts
@@ -19,6 +19,7 @@ import {
   OnInit,
   Output,
   QueryList,
+  signal,
   TemplateRef,
   ViewChild,
   ViewEncapsulation
@@ -701,6 +702,11 @@ export class DatatableComponent<TRow = any>
   _subscriptions: Subscription[] = [];
   _ghostLoadingIndicator = false;
   protected verticalScrollVisible = false;
+  // In case horizontal scroll is enabled
+  // the column widths are initially calculated without vertical scroll offset
+  // this makes horizontal scroll to appear on load even if columns can fit in view
+  // this will be set to true once rows are available and rendered on UI
+  private _rowInitDone = signal(false);
 
   constructor() {
     // apply global settings from Module.forRoot
@@ -853,6 +859,7 @@ export class DatatableComponent<TRow = any>
       }
       if (rowDiffers) {
         queueMicrotask(() => {
+          this._rowInitDone.set(true);
           this.recalculate();
           this.cd.markForCheck();
         });
@@ -904,34 +911,25 @@ export class DatatableComponent<TRow = any>
     }
     const bodyElement = this.bodyElement?.nativeElement;
     this.verticalScrollVisible = bodyElement?.scrollHeight > bodyElement?.clientHeight;
-    if (this.scrollbarV && !this.scrollbarVDynamic) {
-      width = width - (this.verticalScrollVisible ? this.scrollbarHelper.width : 0);
-    } else if (this.scrollbarVDynamic) {
-      const scrollerHeight = this.bodyComponent?.scroller?.element.offsetHeight;
-      if (scrollerHeight && this.bodyHeight < scrollerHeight) {
-        width = width - (this.verticalScrollVisible ? this.scrollbarHelper.width : 0);
-      }
-
-      if (this.headerComponent && this.headerComponent.innerWidth !== width) {
-        this.headerComponent.innerWidth = width;
-      }
-      if (this.bodyComponent && this.bodyComponent.innerWidth !== width) {
-        this.bodyComponent.innerWidth = width;
-        this.bodyComponent.cd.markForCheck();
-      }
+    if (this.scrollbarV || this.scrollbarVDynamic) {
+      width = width - (this.verticalScrollVisible || !this._rowInitDone() ? this.scrollbarHelper.width : 0);
     }
 
     if (this.columnMode === ColumnMode.force) {
-      forceFillColumnWidths(columns, width, forceIdx, allowBleed);
+      forceFillColumnWidths(columns, width, forceIdx, allowBleed, 300, this.scrollbarHelper.width);
     } else if (this.columnMode === ColumnMode.flex) {
       adjustColumnWidths(columns, width);
     }
 
-    if (this.bodyComponent) {
-      this.bodyComponent.updateColumnGroupWidths();
+    if (this.bodyComponent && this.bodyComponent.columnGroupWidths.total !== width) {
+      this.bodyComponent.columns = [...this._internalColumns];
       this.bodyComponent.cd.markForCheck();
     }
 
+    if (this.headerComponent && this.headerComponent._columnGroupWidths.total !== width) {
+      this.headerComponent.columns = [...this._internalColumns];
+    }
+
     return columns;
   }
 

diff --git a/projects/ngx-datatable/src/lib/utils/math.ts b/projects/ngx-datatable/src/lib/utils/math.ts
@@ -126,7 +126,8 @@ export function forceFillColumnWidths(
   expectedWidth: number,
   startIdx: number,
   allowBleed: boolean,
-  defaultColWidth: number = 300
+  defaultColWidth: number = 300,
+  verticalScrollWidth = 0
 ) {
   const columnsToResize = allColumns
     .slice(startIdx + 1, allColumns.length)
@@ -142,6 +143,7 @@ export function forceFillColumnWidths(
   let exceedsWindow = false;
   let contentWidth = getContentWidth(allColumns, defaultColWidth);
   let remainingWidth = expectedWidth - contentWidth;
+  const initialRemainingWidth = remainingWidth;
   const columnsProcessed: any[] = [];
   const remainingWidthLimit = 1; // when to stop
 
@@ -151,7 +153,8 @@ export function forceFillColumnWidths(
     exceedsWindow = contentWidth >= expectedWidth;
 
     for (const column of columnsToResize) {
-      if (exceedsWindow && allowBleed) {
+      // don't bleed if the initialRemainingWidth is same as verticalScrollWidth
+      if (exceedsWindow && allowBleed && (initialRemainingWidth !== -1 * verticalScrollWidth)) {
         column.width = column.$$oldWidth || column.width || defaultColWidth;
       } else {
         const newSize = (column.width || defaultColWidth) + additionWidthPerColumn;
@@ -167,7 +170,7 @@ export function forceFillColumnWidths(
         }
       }
 
-      column.width = Math.max(0, column.width);
+      column.width = Math.max(0, column.width); 
     }
 
     contentWidth = getContentWidth(allColumns);