Skip to content
Permalink
Browse files

feat(module:table): support nzVirtualForTrackBy

  • Loading branch information...
vthinkxie committed Jun 27, 2019
1 parent 79b02ca commit cb14096b202d8add6fcb0818f88de32e031f7129
@@ -3,6 +3,13 @@ import { NzTableComponent } from 'ng-zorro-antd';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

export interface VirtualDataInterface {
index: number;
name: string;
age: number;
address: string;
}

@Component({
selector: 'nz-demo-table-virtual',
template: `
@@ -14,6 +21,7 @@ import { takeUntil } from 'rxjs/operators';
nzVirtualScroll
[nzVirtualItemSize]="54"
[nzData]="listOfData"
[nzVirtualForTrackBy]="trackByIndex"
[nzFrontPagination]="false"
[nzShowPagination]="false"
[nzScroll]="{ x: '1300px', y: '240px' }"
@@ -60,27 +68,33 @@ import { takeUntil } from 'rxjs/operators';
export class NzDemoTableVirtualComponent implements OnInit, AfterViewInit, OnDestroy {
@ViewChild('virtualTable', { static: false }) nzTableComponent: NzTableComponent;
private destroy$ = new Subject();
listOfData: any[] = [];
listOfData: VirtualDataInterface[] = [];

scrollToIndex(index: number): void {
this.nzTableComponent.cdkVirtualScrollViewport.scrollToIndex(index);
}

trackByIndex(_: number, data: VirtualDataInterface): number {
return data.index;
}

ngOnInit(): void {
const data = [];
for (let i = 0; i < 20000; i++) {
this.listOfData.push({
data.push({
index: i,
name: `Edward King`,
age: 32,
address: `London`
});
}
this.listOfData = data;
}

ngAfterViewInit(): void {
this.nzTableComponent.cdkVirtualScrollViewport.scrolledIndexChange
.pipe(takeUntil(this.destroy$))
.subscribe(data => {
.subscribe((data: number) => {
console.log('scroll index to', data);
});
}
@@ -96,6 +96,7 @@ The data passed to `[nzData]` will be export with [Template Context](https://ang
| `[nzVirtualItemSize]` | The size of the items in the list, same as [cdk itemSize](https://material.angular.io/cdk/scrolling/api) | `number` | `0` |
| `[nzVirtualMaxBufferPx]` | The number of pixels worth of buffer to render for when rendering new items, same as [cdk maxBufferPx](https://material.angular.io/cdk/scrolling/api) | `number` | `200` |
| `[nzVirtualMinBufferPx]` | The minimum amount of buffer rendered beyond the viewport (in pixels),same as [cdk minBufferPx](https://material.angular.io/cdk/scrolling/api) | `number` | `100` |
| `[nzVirtualForTrackBy]` | The TrackByFunction to use for tracking changes. | `TrackByFunction<T>` | - |
| `(nzPageIndexChange)` | pageIndex change callback | `EventEmitter<number>` | - |
| `(nzPageSizeChange)` | pageSize change callback | `EventEmitter<number>` | - |
| `(nzCurrentPageDataChange)` | current pageData change callback | `EventEmitter<any[]>` | - |
@@ -96,6 +96,7 @@ Table 组件同时具备了易用性和高度可定制性
| `[nzVirtualItemSize]` | 虚拟滚动时每一列的高度,与 [cdk itemSize](https://material.angular.io/cdk/scrolling/api) 相同 | `number` | `0` |
| `[nzVirtualMaxBufferPx]` | 缓冲区最大像素高度,与 [cdk maxBufferPx](https://material.angular.io/cdk/scrolling/api) 相同 | `number` | `200` |
| `[nzVirtualMinBufferPx]` | 缓冲区最小像素高度,低于该值时将加载新结构,与 [cdk minBufferPx](https://material.angular.io/cdk/scrolling/api) 相同 | `number` | `100` |
| `[nzVirtualForTrackBy]` | 虚拟滚动数据 `TrackByFunction` 函数 | `TrackByFunction<T>` | - |
| `(nzPageIndexChange)` | 当前页码改变时的回调函数 | `EventEmitter<number>` | - |
| `(nzPageSizeChange)` | 页数改变时的回调函数 | `EventEmitter<number>` | - |
| `(nzCurrentPageDataChange)` | 当前页面展示数据改变的回调函数 | `EventEmitter<any[]>` | - |
@@ -48,7 +48,7 @@
<table [class.ant-table-fixed]="nzScroll.x" [style.width]="nzScroll.x">
<ng-template [ngIf]="nzVirtualScroll" [ngTemplateOutlet]="headerTemplate"></ng-template>
<tbody>
<ng-container *cdkVirtualFor="let item of data; let i = index">
<ng-container *cdkVirtualFor="let item of data; let i = index; trackBy:nzVirtualForTrackBy;">
<ng-template [ngTemplateOutlet]="nzVirtualScrollDirective?.templateRef" [ngTemplateOutletContext]="{$implicit:item, index:i}"></ng-template>
</ng-container>
</tbody>
@@ -28,6 +28,7 @@ import {
Renderer2,
SimpleChanges,
TemplateRef,
TrackByFunction,
ViewChild,
ViewEncapsulation
} from '@angular/core';
@@ -87,6 +88,7 @@ export class NzTableComponent<T = any> implements OnInit, AfterViewInit, OnDestr
@Input() @InputNumber() nzVirtualItemSize = 0;
@Input() @InputNumber() nzVirtualMaxBufferPx = 200;
@Input() @InputNumber() nzVirtualMinBufferPx = 100;
@Input() nzVirtualForTrackBy: TrackByFunction<T> | undefined;
@Input() nzLoadingDelay = 0;
@Input() nzLoadingIndicator: TemplateRef<void>;
@Input() nzTotal = 0;

0 comments on commit cb14096

Please sign in to comment.
You can’t perform that action at this time.