feat(module:table): expose CdkVirtualScrollViewport (NG-ZORRO#3297)

close NG-ZORRO#3144 close NG-ZORRO#3073 close NG-ZORRO#2886
andrew-yangy · Jun 20, 2019 · b6cf628 · b6cf628
1 parent ca7c0f0
commit b6cf628
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 6 deletions.
diff --git a/components/table/demo/virtual.md b/components/table/demo/virtual.md
@@ -7,8 +7,8 @@ title:
 
 ## zh-CN
 
-虚拟滚动，结合 [cdk scrolling](https://material.angular.io/cdk/scrolling/overview) 的虚拟滚动，用于巨量数据加载。
+虚拟滚动，结合 [cdk scrolling](https://material.angular.io/cdk/scrolling/overview) 的虚拟滚动，用于巨量数据加载。可以通过获得 `cdkVirtualScrollViewport` 进行进一步操作，见本示例及 [API](https://material.angular.io/cdk/scrolling/api#CdkVirtualScrollViewport)。
 
 ## en-US
 
-Virtual scrolling combine with [cdk scrolling](https://material.angular.io/cdk/scrolling/overview) used to display large data.
+Virtual scrolling combine with [cdk scrolling](https://material.angular.io/cdk/scrolling/overview) used to display large data, you can get `cdkVirtualScrollViewport` in `NzTableComponent` and find more API [here](https://material.angular.io/cdk/scrolling/api#CdkVirtualScrollViewport).
diff --git a/components/table/demo/virtual.ts b/components/table/demo/virtual.ts
@@ -1,20 +1,27 @@
-import { Component, OnInit } from '@angular/core';
+import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { NzTableComponent } from 'ng-zorro-antd';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'nz-demo-table-virtual',
   template: `
+    <button nz-button (click)="scrollToIndex(200)">Scroll To Index 200</button>
+    <br />
+    <br />
     <nz-table
       nzVirtualScroll
       [nzVirtualItemSize]="54"
       [nzData]="listOfData"
       [nzFrontPagination]="false"
       [nzShowPagination]="false"
-      [nzScroll]="{ x: '1200px', y: '240px' }"
+      [nzScroll]="{ x: '1300px', y: '240px' }"
     >
       <thead>
         <tr>
           <th nzWidth="200px" nzLeft="0px">Full Name</th>
           <th nzWidth="100px" nzLeft="200px">Age</th>
+          <th nzWidth="100px">Index</th>
           <th nzWidth="100px">Column 1</th>
           <th nzWidth="100px">Column 2</th>
           <th nzWidth="100px">Column 3</th>
@@ -31,6 +38,7 @@ import { Component, OnInit } from '@angular/core';
           <tr>
             <td nzLeft="0px">{{ data.name }} {{ index }}</td>
             <td nzLeft="200px">{{ data.age }}</td>
+            <td>{{ data.index }}</td>
             <td>{{ data.address }}</td>
             <td>{{ data.address }}</td>
             <td>{{ data.address }}</td>
@@ -48,16 +56,36 @@ import { Component, OnInit } from '@angular/core';
     </nz-table>
   `
 })
-export class NzDemoTableVirtualComponent implements OnInit {
+export class NzDemoTableVirtualComponent implements OnInit, AfterViewInit, OnDestroy {
+  @ViewChild(NzTableComponent) nzTableComponent: NzTableComponent;
+  private destroy$ = new Subject();
   listOfData: any[] = [];
 
+  scrollToIndex(index: number): void {
+    this.nzTableComponent.cdkVirtualScrollViewport.scrollToIndex(index);
+  }
+
   ngOnInit(): void {
     for (let i = 0; i < 20000; i++) {
       this.listOfData.push({
+        index: i,
         name: `Edward King`,
         age: 32,
         address: `London`
       });
     }
   }
+
+  ngAfterViewInit(): void {
+    this.nzTableComponent.cdkVirtualScrollViewport.scrolledIndexChange
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(data => {
+        console.log('scroll index to', data);
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
 }
diff --git a/components/table/nz-table.component.ts b/components/table/nz-table.component.ts
@@ -63,6 +63,8 @@ export class NzTableComponent<T = any> implements OnInit, AfterViewInit, OnDestr
   @ViewChild('tableBodyElement', { read: ElementRef }) tableBodyElement: ElementRef;
   @ViewChild('tableMainElement', { read: ElementRef }) tableMainElement: ElementRef;
   @ViewChild(CdkVirtualScrollViewport, { read: ElementRef }) cdkVirtualScrollElement: ElementRef;
+  @ViewChild(CdkVirtualScrollViewport, { read: CdkVirtualScrollViewport })
+  cdkVirtualScrollViewport: CdkVirtualScrollViewport;
   @ContentChild(NzVirtualScrollDirective) nzVirtualScrollDirective: NzVirtualScrollDirective;
   @Input() nzSize: NzSizeMDSType = 'default';
   @Input() nzShowTotal: TemplateRef<{ $implicit: number; range: [number, number] }>;

diff --git a/scripts/site/_site/doc/app/share/nz-codebox/stack-blitz.ts b/scripts/site/_site/doc/app/share/nz-codebox/stack-blitz.ts
@@ -80,6 +80,8 @@ import 'zone.js/dist/zone'; // Included with Angular CLI.
   const appModuleCode = `
   import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { ScrollingModule } from '@angular/cdk/scrolling';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpClientJsonpModule, HttpClientModule } from '@angular/common/http';
@@ -100,7 +102,7 @@ const antDesignIcons = AllIcons as {
 const icons: IconDefinition[] = Object.keys(antDesignIcons).map(key => antDesignIcons[key])
 
 @NgModule({
-  imports:      [ BrowserModule, FormsModule, HttpClientModule, HttpClientJsonpModule, ReactiveFormsModule, NgZorroAntdModule, BrowserAnimationsModule ],
+  imports:      [ BrowserModule, FormsModule, HttpClientModule, HttpClientJsonpModule, ReactiveFormsModule, NgZorroAntdModule, BrowserAnimationsModule, ScrollingModule, DragDropModule ],
   declarations: [ ${componentName} ],
   bootstrap:    [ ${componentName} ],
   providers   : [ { provide: NZ_I18N, useValue: en_US }, { provide: NZ_ICONS, useValue: icons } ]