refactor: use css sticky instead of transform

Author: chintankavathia

projects/ngx-datatable/src/lib/components/body/body-row-wrapper.component.ts

@@ -32,9 +32,9 @@ import { DatatableRowDetailDirective } from '../row-detail/row-detail.directive'
   template: `
     @if (groupHeader?.template) {
       <div
-        [style.height.px]="groupHeaderRowHeight"
         class="datatable-group-header"
-        [ngStyle]="getGroupHeaderStyle()"
+        [style.height.px]="groupHeaderRowHeight"
+        [style.width.px]="innerWidth"
       >
         <div class="datatable-group-cell">
           @if (groupHeader.checkboxable) {
@@ -191,14 +191,6 @@ export class DataTableRowWrapperComponent<TRow = any> implements DoCheck, OnInit
     this.rowContextmenu.emit({ event: $event, row: this.row });
   }
 
-  getGroupHeaderStyle(): NgStyle['ngStyle'] {
-    return {
-      'transform': 'translate3d(' + this.offsetX + 'px, 0px, 0px)',
-      'backface-visibility': 'hidden',
-      'width': this.innerWidth + 'px'
-    };
-  }
-
   onCheckboxChange(groupSelected: boolean): void {
     // First remove all rows of this group from `selected`
     this.selected = [...this.selected.filter(row => !this.group.value.find(item => item === row))];

projects/ngx-datatable/src/lib/components/body/body-row.component.ts

@@ -33,7 +33,7 @@ import { ColumnGroupWidth, PinnedColumns } from '../../types/internal.types';
     @for (colGroup of _columnsByPin; track colGroup.type; let i = $index) {
       <div
         class="datatable-row-{{ colGroup.type }} datatable-row-group"
-        [ngStyle]="_groupStyles[colGroup.type]"
+        [style.width.px]="_columnGroupWidths[colGroup.type]"
         [class.row-disabled]="disable$ ? (disable$ | async) : false"
       >
         @for (column of colGroup.columns; track column.$$id; let ii = $index) {
@@ -67,7 +67,6 @@ export class DataTableBodyRowComponent<TRow = any> implements DoCheck, OnChanges
   @Input() set columns(val: TableColumn[]) {
     this._columns = val;
     this.recalculateColumns(val);
-    this.buildStylesByGroup();
   }
 
   get columns(): TableColumn[] {
@@ -82,7 +81,6 @@ export class DataTableBodyRowComponent<TRow = any> implements DoCheck, OnChanges
 
     this._innerWidth = val;
     this.recalculateColumns();
-    this.buildStylesByGroup();
   }
 
   get innerWidth(): number {
@@ -104,7 +102,6 @@ export class DataTableBodyRowComponent<TRow = any> implements DoCheck, OnChanges
   @Input()
   set offsetX(val: number) {
     this._offsetX = val;
-    this.buildStylesByGroup();
   }
   get offsetX() {
     return this._offsetX;
@@ -173,7 +170,7 @@ export class DataTableBodyRowComponent<TRow = any> implements DoCheck, OnChanges
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.verticalScrollVisible) {
-      this.buildStylesByGroup();
+      this.recalculateColumns();
     }
   }
 
@@ -183,39 +180,6 @@ export class DataTableBodyRowComponent<TRow = any> implements DoCheck, OnChanges
     }
   }
 
-  buildStylesByGroup() {
-    this._groupStyles.left = this.calcStylesByGroup('left');
-    this._groupStyles.center = this.calcStylesByGroup('center');
-    this._groupStyles.right = this.calcStylesByGroup('right');
-    this.cd.markForCheck();
-  }
-
-  calcStylesByGroup(group: 'left' | 'right' | 'center') {
-    const widths = this._columnGroupWidths;
-    const offsetX = this.offsetX;
-
-    if (group === 'left') {
-      return {
-        width: `${widths[group]}px`,
-        ...translateXY(offsetX, 0)
-      };
-    } else if (group === 'right') {
-      const bodyWidth = this.innerWidth;
-      const totalDiff = widths.total - bodyWidth;
-      const offsetDiff = totalDiff - offsetX;
-      const offset =
-        (offsetDiff + (this.verticalScrollVisible ? this.scrollbarHelper.width : 0)) * -1;
-      return {
-        width: `${widths[group]}px`,
-        ...translateXY(offset, 0)
-      };
-    }
-
-    return {
-      width: `${widths[group]}px`
-    };
-  }
-
   onActivate(event: ActivateEvent<TRow>, index: number): void {
     event.cellIndex = index;
     event.rowElement = this._element;

projects/ngx-datatable/src/lib/components/datatable.component.scss

@@ -117,14 +117,23 @@
   }
 
   .datatable-row-left,
-  .datatable-row-right {
+  .datatable-row-right,
+  .datatable-group-header {
     z-index: 9;
+    position: sticky !important;
   }
 
   .datatable-row-left,
-  .datatable-row-center,
-  .datatable-row-group,
+  .datatable-group-header {
+    left: 0;
+  }
+
   .datatable-row-right {
+    right: 0;
+  }
+
+  .datatable-row-center,
+  .datatable-row-group {
     position: relative;
   }
 

projects/ngx-datatable/src/lib/components/header/header.component.ts

@@ -23,7 +23,6 @@ import {
   SortPropDir,
   SortType
 } from '../../types/public.types';
-import { translateXY } from '../../utils/translate';
 import { NgStyle } from '@angular/common';
 import { ScrollbarHelper } from '../../services/scrollbar-helper.service';
 import { TableColumn } from '../../types/table-column.type';
@@ -32,6 +31,7 @@ import {
   PinnedColumns,
   TargetChangedEvent
 } from '../../types/internal.types';
+import { translateXY } from '../../utils/translate';
 
 @Component({
   selector: 'datatable-header',
@@ -357,20 +357,12 @@ export class DataTableHeaderComponent implements OnDestroy, OnChanges {
 
   calcStylesByGroup(group: 'center' | 'right' | 'left'): NgStyle['ngStyle'] {
     const widths = this._columnGroupWidths;
-    const offsetX = this.offsetX;
 
     if (group === 'center') {
       return {
-        ...translateXY(offsetX * -1, 0),
-        width: `${widths[group]}px`
-      };
-    } else if (group === 'right') {
-      const totalDiff = widths.total - this.innerWidth;
-      const offset =
-        (totalDiff + (this.verticalScrollVisible ? this.scrollbarHelper.width : 0)) * -1;
-      return {
-        ...translateXY(offset, 0),
-        width: `${widths[group]}px`
+        ...translateXY(this.offsetX * -1, 0),
+        width: `${widths[group]}px`,
+        willChange: 'transform'
       };
     }