From dd8858b0134da01d3cff1e1b58b69e9d618800bb Mon Sep 17 00:00:00 2001 From: Chintan Kavathia Date: Tue, 12 Nov 2024 15:43:40 +0530 Subject: [PATCH] refactor: header component removed unnecessary transform calculations for scrolling header along with body scroll. --- .../lib/components/datatable.component.html | 1 - .../src/lib/components/datatable.component.ts | 10 ++- .../lib/components/header/header.component.ts | 86 ++++--------------- 3 files changed, 23 insertions(+), 74 deletions(-) diff --git a/projects/ngx-datatable/src/lib/components/datatable.component.html b/projects/ngx-datatable/src/lib/components/datatable.component.html index d51309697..ebdaaa0ef 100644 --- a/projects/ngx-datatable/src/lib/components/datatable.component.html +++ b/projects/ngx-datatable/src/lib/components/datatable.component.html @@ -7,7 +7,6 @@ [sortType]="sortType" [scrollbarH]="scrollbarH" [innerWidth]="_innerWidth" - [offsetX]="_offsetX | async" [dealsWithGroup]="groupedRows !== undefined" [columns]="_internalColumns" [headerHeight]="headerHeight" diff --git a/projects/ngx-datatable/src/lib/components/datatable.component.ts b/projects/ngx-datatable/src/lib/components/datatable.component.ts index 8b4097603..d6dd86801 100644 --- a/projects/ngx-datatable/src/lib/components/datatable.component.ts +++ b/projects/ngx-datatable/src/lib/components/datatable.component.ts @@ -671,6 +671,9 @@ export class DatatableComponent @ViewChild(DataTableHeaderComponent) headerComponent: DataTableHeaderComponent; + @ViewChild(DataTableHeaderComponent, { read: ElementRef }) + headerElement: ElementRef; + @ViewChild(DataTableBodyComponent, { read: ElementRef }) private bodyElement: ElementRef; @ContentChild(DatatableRowDefDirective, { @@ -947,7 +950,7 @@ export class DatatableComponent this.bodyComponent.cd.markForCheck(); } - if (this.headerComponent && this.headerComponent._columnGroupWidths.total !== width) { + if (this.headerComponent && this.headerComponent._columnGroupWidths().total !== width) { this.headerComponent.columns = [...this._internalColumns]; } @@ -1012,7 +1015,10 @@ export class DatatableComponent * The body triggered a scroll event. */ onBodyScroll(event: ScrollEvent): void { - this._offsetX.next(event.offsetX); + // if horizontal scroll is enabled we update the header scroll position + if (this.headerElement && this.scrollbarH && !isNaN(event.offsetX)) { + this.headerElement.nativeElement.scrollLeft = event.offsetX; + } this.scroll.emit(event); this.cd.detectChanges(); } diff --git a/projects/ngx-datatable/src/lib/components/header/header.component.ts b/projects/ngx-datatable/src/lib/components/header/header.component.ts index 4692544dc..1f102e23b 100644 --- a/projects/ngx-datatable/src/lib/components/header/header.component.ts +++ b/projects/ngx-datatable/src/lib/components/header/header.component.ts @@ -1,15 +1,12 @@ import { ChangeDetectionStrategy, - ChangeDetectorRef, Component, EventEmitter, HostBinding, inject, Input, - OnChanges, - OnDestroy, Output, - SimpleChanges, + signal, TemplateRef } from '@angular/core'; import { columnGroupWidths, columnsByPin, columnsByPinArr } from '../../utils/column'; @@ -23,10 +20,10 @@ import { SortPropDir, SortType } from '../../types/public.types'; -import { NgStyle } from '@angular/common'; import { ScrollbarHelper } from '../../services/scrollbar-helper.service'; import { TableColumn } from '../../types/table-column.type'; import { + ColumnGroupWidth, OrderableReorderEvent, PinnedColumns, TargetChangedEvent @@ -45,11 +42,14 @@ import { OrderableDirective } from '../../directives/orderable.directive'; orderable (reorder)="onColumnReordered($event)" (targetChanged)="onTargetChanged($event)" - [style.width.px]="_columnGroupWidths.total" + [style.width.px]="_columnGroupWidths().total" class="datatable-header-inner" > @for (colGroup of _columnsByPin; track colGroup.type) { -
+
@for (column of colGroup.columns; track column.$$id) { { if (this._columns) { const colByPin = columnsByPin(this._columns); - this._columnGroupWidths = columnGroupWidths(colByPin, this._columns); - this.setStylesByGroup(); + this._columnGroupWidths.set(columnGroupWidths(colByPin, this._columns)); } }); } @@ -160,8 +157,7 @@ export class DataTableHeaderComponent implements OnDestroy, OnChanges { const colsByPin = columnsByPin(val); this._columnsByPin = columnsByPinArr(val); setTimeout(() => { - this._columnGroupWidths = columnGroupWidths(colsByPin, val); - this.setStylesByGroup(); + this._columnGroupWidths.set(columnGroupWidths(colsByPin, val)); }); } @@ -169,15 +165,6 @@ export class DataTableHeaderComponent implements OnDestroy, OnChanges { return this._columns; } - @Input() - set offsetX(val: number) { - this._offsetX = val; - this.setStylesByGroup(); - } - get offsetX() { - return this._offsetX; - } - @Output() sort: EventEmitter = new EventEmitter(); @Output() reorder: EventEmitter = new EventEmitter(); @Output() resize: EventEmitter = new EventEmitter(); @@ -186,33 +173,15 @@ export class DataTableHeaderComponent implements OnDestroy, OnChanges { @Output() columnContextmenu = new EventEmitter<{ event: MouseEvent; column: TableColumn }>(false); _columnsByPin: PinnedColumns[]; - _columnGroupWidths: any = { + _columnGroupWidths = signal({ + left: 0, + center: 0, + right: 0, total: 100 - }; + }); _innerWidth: number; - _offsetX: number; _columns: TableColumn[]; _headerHeight: string; - _styleByGroup: { - left: NgStyle['ngStyle']; - center: NgStyle['ngStyle']; - right: NgStyle['ngStyle']; - } = { left: {}, center: {}, right: {} }; - - private destroyed = false; - - ngOnChanges(changes: SimpleChanges): void { - if (changes.verticalScrollVisible) { - this._styleByGroup.right = this.calcStylesByGroup('right'); - if (!this.destroyed) { - this.cd.detectChanges(); - } - } - } - - ngOnDestroy(): void { - this.destroyed = true; - } onLongPressStart({ event, model }: { event: MouseEvent; model: TableColumn }) { model.dragging = true; @@ -358,29 +327,4 @@ export class DataTableHeaderComponent implements OnDestroy, OnChanges { return sorts; } - - setStylesByGroup() { - this._styleByGroup.left = this.calcStylesByGroup('left'); - this._styleByGroup.center = this.calcStylesByGroup('center'); - this._styleByGroup.right = this.calcStylesByGroup('right'); - if (!this.destroyed) { - this.cd.detectChanges(); - } - } - - calcStylesByGroup(group: 'center' | 'right' | 'left'): NgStyle['ngStyle'] { - const widths = this._columnGroupWidths; - - if (group === 'center') { - return { - transform: `translateX(${this.offsetX * -1}px)`, - width: `${widths[group]}px`, - willChange: 'transform' - }; - } - - return { - width: `${widths[group]}px` - }; - } }