diff --git a/components/table/nz-table.component.html b/components/table/nz-table.component.html
index a8afdf57ad..c905966bea 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;
}
}