diff --git a/components/table/nz-table.component.html b/components/table/nz-table.component.html index a8afdf57ad4..c905966beaf 100644 --- a/components/table/nz-table.component.html +++ b/components/table/nz-table.component.html @@ -11,7 +11,6 @@ #tableHeaderElement *ngIf="nzScroll.x || nzScroll.y" class="ant-table-header" - (scroll)="syncScrollTable($event)" [ngStyle]="headerBottomStyle"> @@ -62,10 +60,8 @@
; @Output() nzPageSizeChange: EventEmitter = new EventEmitter(); @@ -91,6 +92,7 @@ export class NzTableComponent implements OnInit, AfterViewInit, OnDestroy { get nzSimple(): boolean { return this._simple; } + @Input() set nzFrontPagination(value: boolean) { this._frontPagination = toBoolean(value); @@ -308,17 +310,28 @@ export class NzTableComponent implements OnInit, AfterViewInit, OnDestroy { setScrollPositionClassName(): void { if (this.tableBodyElement && this.nzScroll && this.nzScroll.x) { if ((this.tableBodyElement.nativeElement.scrollWidth === this.tableBodyElement.nativeElement.clientWidth) && (this.tableBodyElement.nativeElement.scrollWidth !== 0)) { - this.scrollPosition = 'default'; + this.setScrollName(); } else if (this.tableBodyElement.nativeElement.scrollLeft === 0) { - this.scrollPosition = 'left'; + this.setScrollName('left'); } else if (this.tableBodyElement.nativeElement.scrollWidth === (this.tableBodyElement.nativeElement.scrollLeft + this.tableBodyElement.nativeElement.clientWidth)) { - this.scrollPosition = 'right'; + this.setScrollName('right'); } else { - this.scrollPosition = 'middle'; + this.setScrollName('middle'); } } } + setScrollName(position?: string): void { + const prefix = 'ant-table-scroll-position'; + const classList = [ 'left', 'right', 'middle' ]; + classList.forEach(name => { + this.renderer.removeClass(this.tableMainElement.nativeElement, `${prefix}-${name}`); + }); + if (position) { + this.renderer.addClass(this.tableMainElement.nativeElement, `${prefix}-${position}`); + } + } + fitScrollBar(): void { const scrollbarWidth = this.nzMeasureScrollbarService.scrollBarWidth; if (scrollbarWidth) { @@ -338,15 +351,23 @@ export class NzTableComponent implements OnInit, AfterViewInit, OnDestroy { ngOnInit(): void { this.i18n.localeChange.pipe(takeUntil(this.unsubscribe$)).subscribe(() => this.locale = this.i18n.getLocaleData('Table')); this.fitScrollBar(); - if (this.nzScroll && this.nzScroll.x && this.nzScroll.y) { - /** magic code to sync scroll **/ - const overlay = this.overlay.create(); - overlay.dispose(); - } } ngAfterViewInit(): void { setTimeout(() => this.setScrollPositionClassName()); + this.ngZone.runOutsideAngular(() => { + if (this.tableHeaderElement + && this.tableHeaderElement.nativeElement + && this.tableBodyElement + && this.tableBodyElement.nativeElement) { + merge( + fromEvent(this.tableHeaderElement.nativeElement, 'scroll'), + fromEvent(this.tableBodyElement.nativeElement, 'scroll') + ).pipe(takeUntil(this.unsubscribe$)).subscribe((data: MouseEvent) => { + this.syncScrollTable(data); + }); + } + }); } ngOnDestroy(): void { @@ -354,7 +375,7 @@ export class NzTableComponent implements OnInit, AfterViewInit, OnDestroy { this.unsubscribe$.complete(); } - constructor(private elementRef: ElementRef, private cdr: ChangeDetectorRef, private overlay: Overlay, private nzMeasureScrollbarService: NzMeasureScrollbarService, private i18n: NzI18nService) { + constructor(private renderer: Renderer2, private ngZone: NgZone, private elementRef: ElementRef, private cdr: ChangeDetectorRef, private nzMeasureScrollbarService: NzMeasureScrollbarService, private i18n: NzI18nService) { this.el = this.elementRef.nativeElement; } }