feat(module:table): support filter & fixed header add more table demo (…

…#210)

close #86 close #174 close #218

src/components/dropdown/nz-dropdown.component.ts

@@ -26,13 +26,13 @@ import { ConnectionPositionPair } from '../core/overlay';
 export type NzPlacement = 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'topLeft' | 'topCenter' | 'topRight';
 
 @Component({
-  selector     : 'nz-dropdown',
-  encapsulation: ViewEncapsulation.None,
-  animations   : [
+  selector       : 'nz-dropdown',
+  encapsulation  : ViewEncapsulation.None,
+  animations     : [
     DropDownAnimation
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template     : `
+  template       : `
     <div>
       <ng-content></ng-content>
     </div>
@@ -53,16 +53,21 @@ export type NzPlacement = 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'topLe
         (mouseleave)="_onMouseLeaveEvent($event)"
         [style.minWidth.px]="_triggerWidth"
         (click)="_clickDropDown($event)">
-        <ng-content select="[nz-menu]"></ng-content>
+        <div [class.ant-table-filter-dropdown]="hasFilterButton">
+          <ng-content select="[nz-menu]"></ng-content>
+          <ng-content select="[nz-table-filter]"></ng-content>
+        </div>
+        <ng-content select="[nz-dropdown-custom]"></ng-content>
       </div>
     </ng-template>`,
-  styleUrls    : [
+  styleUrls      : [
     './style/index.less',
     './style/patch.less'
   ]
 })
 
 export class NzDropDownComponent implements OnInit, OnDestroy, AfterViewInit {
+  hasFilterButton = false;
   _triggerWidth = 0;
   _placement: NzPlacement = 'bottomLeft';
   _dropDownPosition: 'top' | 'bottom' = 'bottom';
@@ -143,7 +148,9 @@ export class NzDropDownComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   ngOnInit() {
-    this._nzMenu.setDropDown(true);
+    if (this._nzMenu) {
+      this._nzMenu.setDropDown(true);
+    }
   }
 
   ngOnDestroy() {
@@ -180,7 +187,7 @@ export class NzDropDownComponent implements OnInit, OnDestroy, AfterViewInit {
         mouse$,
         this.nzVisibleChange.asObservable()
       )
-    , 300);
+      , 300);
     this._startSubscribe(observable$);
   }
 

src/components/dropdown/nz-dropdown.directive.ts

@@ -1,8 +1,10 @@
-import { Directive, ElementRef } from '@angular/core';
+import { Directive, ElementRef, HostBinding } from '@angular/core';
+
 @Directive({
   selector: '[nz-dropdown]',
 })
 export class NzDropDownDirective {
+  @HostBinding('class.ant-dropdown-trigger') _dropDownTrigger = true;
   constructor(public elementRef: ElementRef) {
   }
 }

src/components/menu/nz-menu-item.component.ts

@@ -31,9 +31,9 @@ export class NzMenuItemComponent implements AfterViewInit {
   set nzSelected(value: boolean) {
     this.selected = value;
     if (value) {
-      this._renderer.addClass(this.hostElement.nativeElement, 'ant-menu-item-selected')
+      this._renderer.addClass(this.hostElement.nativeElement, this.isInDropDown ? 'ant-dropdown-menu-item-selected' : 'ant-menu-item-selected')
     } else {
-      this._renderer.removeClass(this.hostElement.nativeElement, 'ant-menu-item-selected')
+      this._renderer.removeClass(this.hostElement.nativeElement, this.isInDropDown ? 'ant-dropdown-menu-item-selected' : 'ant-menu-item-selected')
     }
   }
 

src/components/table/nz-table-filter.component.ts

@@ -0,0 +1,33 @@
+import {
+  Component,
+  HostBinding, OnInit
+} from '@angular/core';
+import { NzDropDownComponent } from '../dropdown/nz-dropdown.component';
+
+@Component({
+  selector: '[nz-table-filter]',
+  template: `
+    <a class="ant-table-filter-dropdown-link confirm" (click)="hideDropDown()">
+      <ng-content select="[nz-table-filter-confirm]"></ng-content>
+    </a>
+    <a class="ant-table-filter-dropdown-link clear" (click)="hideDropDown()">
+      <ng-content select="[nz-table-filter-clear]"></ng-content>
+    </a>
+  `
+})
+export class NzTableFilterComponent implements OnInit {
+  @HostBinding('class.ant-table-filter-dropdown-btns') _dropDownButton = true;
+
+  hideDropDown() {
+    this.nzDropDownComponent.nzVisible = false;
+    this.nzDropDownComponent._hide();
+  }
+
+  constructor(private nzDropDownComponent: NzDropDownComponent) {
+  }
+
+  ngOnInit() {
+    this.nzDropDownComponent.hasFilterButton = true;
+    this.nzDropDownComponent.nzClickHide = false;
+  }
+}

src/components/table/nz-table.component.ts

@@ -5,8 +5,12 @@ import {
   ElementRef,
   AfterViewInit,
   EventEmitter,
-  Output
+  Output,
+  ContentChild,
+  ChangeDetectorRef,
+  TemplateRef, OnInit
 } from '@angular/core';
+import { measureScrollbar } from '../util/mesureScrollBar';
 
 @Component({
   selector     : 'nz-table',
@@ -19,6 +23,8 @@ import {
         <div>
           <div
             class="ant-table"
+            [class.ant-table-fixed-header]="nzScroll"
+            [class.ant-table-scroll-position-left]="nzScroll"
             [class.ant-table-bordered]="nzBordered"
             [class.ant-table-large]="(nzSize!=='middle')&&(nzSize!=='small')"
             [class.ant-table-middle]="nzSize=='middle'"
@@ -27,53 +33,69 @@ import {
               <ng-content select="[nz-table-title]"></ng-content>
             </div>
             <div class="ant-table-content">
-              <div class="ant-table-body">
-                <table>
-                  <ng-content></ng-content>
-                </table>
-              </div>
-              <div class="ant-table-placeholder" *ngIf="data.length==0 && !nzCustomNoResult">
-                <span>没有数据</span>
-              </div>
-              <div class="ant-table-placeholder" *ngIf="data.length==0 && nzCustomNoResult">
-                <ng-content select="[noResult]"></ng-content>
-              </div>
-              <div class="ant-table-footer" *ngIf="nzShowFooter">
-                <ng-content select="[nz-table-footer]"></ng-content>
+              <div [class.ant-table-scroll]="nzScroll">
+                <div class="ant-table-header" [ngStyle]="_headerBottomStyle" *ngIf="nzScroll">
+                  <table>
+                    <colgroup>
+                      <col *ngFor="let th of ths" [style.width]="th.nzWidth" [style.minWidth]="th.nzWidth">
+                    </colgroup>
+                    <ng-template [ngTemplateOutlet]="fixedHeader"></ng-template>
+                  </table>
+                </div>
+                <div class="ant-table-body" [style.maxHeight.px]="nzScroll?.y" [style.overflowY]="nzScroll?.y?'scroll':''">
+                  <table>
+                    <colgroup>
+                      <col [style.width]="th.nzWidth" [style.minWidth]="th.nzWidth" *ngFor="let th of ths">
+                    </colgroup>
+                    <ng-content></ng-content>
+                  </table>
+                </div>
+                <div class="ant-table-placeholder" *ngIf="data.length==0 && !nzCustomNoResult">
+                  <span>没有数据</span>
+                </div>
+                <div class="ant-table-placeholder" *ngIf="data.length==0 && nzCustomNoResult">
+                  <ng-content select="[noResult]"></ng-content>
+                </div>
+                <div class="ant-table-footer" *ngIf="nzShowFooter">
+                  <ng-content select="[nz-table-footer]"></ng-content>
+                </div>
               </div>
             </div>
           </div>
         </div>
+        <nz-pagination
+          *ngIf="nzIsPagination&&data.length"
+          class="ant-table-pagination"
+          [nzShowSizeChanger]="nzShowSizeChanger"
+          [nzShowQuickJumper]="nzShowQuickJumper"
+          [nzShowTotal]="nzShowTotal"
+          [nzSize]="(nzSize=='middle'||nzSize=='small')?'small':''"
+          [(nzPageSize)]="nzPageSize"
+          [nzTotal]="nzTotal"
+          [(nzPageIndex)]="nzPageIndex"
+          (nzPageIndexClickChange)="pageChangeClick($event)">
+        </nz-pagination>
       </nz-spin>
-      <nz-pagination
-        *ngIf="nzIsPagination&&data.length"
-        class="ant-table-pagination"
-        [nzShowSizeChanger]="nzShowSizeChanger"
-        [nzShowQuickJumper]="nzShowQuickJumper"
-        [nzShowTotal]="nzShowTotal"
-        [nzSize]="(nzSize=='middle'||nzSize=='small')?'small':''"
-        [(nzPageSize)]="nzPageSize"
-        [nzTotal]="nzTotal"
-        [(nzPageIndex)]="nzPageIndex"
-        (nzPageIndexClickChange)="pageChangeClick($event)">
-      </nz-pagination>
     </div>
   `,
   styleUrls    : [
     './style/index.less',
     './style/patch.less'
   ]
 })
-export class NzTableComponent implements AfterViewInit {
+export class NzTableComponent implements AfterViewInit, OnInit {
   /** public data for ngFor tr */
   data = [];
+  _scroll;
   _el: HTMLElement;
+  _headerBottomStyle;
   _current = 1;
   _total: number;
   _pageSize = 10;
   _dataSet = [];
   _isInit = false;
   _isAjax = false;
+  ths = [];
   @Output() nzPageSizeChange: EventEmitter<any> = new EventEmitter();
   @Output() nzPageIndexChange: EventEmitter<any> = new EventEmitter();
   @Output() nzDataChange: EventEmitter<any> = new EventEmitter();
@@ -88,6 +110,17 @@ export class NzTableComponent implements AfterViewInit {
   @Input() nzShowTotal = false;
   @Input() nzShowFooter = false;
   @Input() nzShowTitle = false;
+  @ContentChild('nzFixedHeader') fixedHeader: TemplateRef<any>;
+
+  @Input()
+  set nzScroll(value) {
+    this._scroll = value;
+    this._cd.detectChanges();
+  }
+
+  get nzScroll() {
+    return this._scroll;
+  }
 
   /** async data */
   @Input()
@@ -172,7 +205,15 @@ export class NzTableComponent implements AfterViewInit {
     }
   }
 
-  constructor(private _elementRef: ElementRef) {
+  ngOnInit() {
+    const scrollbarWidth = measureScrollbar();
+    this._headerBottomStyle = {
+      marginBottom : `-${scrollbarWidth}px`,
+      paddingBottom: `0px`
+    }
+  }
+
+  constructor(private _elementRef: ElementRef, private _cd: ChangeDetectorRef) {
     this._el = this._elementRef.nativeElement;
   }
 

src/components/table/nz-table.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { NzTableComponent } from './nz-table.component';
 import { NzThDirective } from './nz-th.directive';
 import { NzTdDirective } from './nz-td.directive';
+import { NzTableFilterComponent } from './nz-table-filter.component';
 import { NzTheadDirective } from './nz-thead.directive';
 import { NzTbodyDirective } from './nz-tbody.directive';
 import { NzTbodyTrDirective } from './nz-tbody-tr.directive';
@@ -13,8 +14,8 @@ import { NzPaginationModule } from '../pagination/nz-pagination.module';
 import { CommonModule } from '@angular/common';
 
 @NgModule({
-  declarations: [ NzTableComponent, NzThDirective, NzTdDirective, NzTheadDirective, NzTbodyDirective, NzTbodyTrDirective, NzTableDividerDirective, NzTableSortComponent ],
-  exports     : [ NzTableComponent, NzThDirective, NzTdDirective, NzTheadDirective, NzTbodyDirective, NzTbodyTrDirective, NzTableDividerDirective, NzTableSortComponent ],
+  declarations: [ NzTableFilterComponent, NzTableComponent, NzThDirective, NzTdDirective, NzTheadDirective, NzTbodyDirective, NzTbodyTrDirective, NzTableDividerDirective, NzTableSortComponent ],
+  exports     : [ NzTableFilterComponent, NzTableComponent, NzThDirective, NzTdDirective, NzTheadDirective, NzTbodyDirective, NzTbodyTrDirective, NzTableDividerDirective, NzTableSortComponent ],
   imports     : [ CommonModule, NzPaginationModule, NzSpinModule ]
 })
 

src/components/table/nz-th.directive.ts

@@ -2,17 +2,30 @@ import {
   Directive,
   Input,
   HostBinding,
-  ElementRef
+  ElementRef, OnInit, OnDestroy
 } from '@angular/core';
+import { NzTableComponent } from './nz-table.component';
 
 @Directive({
   selector: '[nz-th]'
 })
-export class NzThDirective {
+export class NzThDirective implements OnInit, OnDestroy {
   _el: HTMLElement;
+  @Input() nzWidth;
   @Input() @HostBinding(`class.ant-table-selection-column`) nzCheckbox;
 
-  constructor(private _elementRef: ElementRef) {
+  constructor(private _elementRef: ElementRef, private nzTableComponent: NzTableComponent) {
     this._el = this._elementRef.nativeElement;
   }
+
+  ngOnInit() {
+    this.nzTableComponent.ths.push(this);
+  }
+
+  ngOnDestroy() {
+    const index = this.nzTableComponent.ths.indexOf(this);
+    if (index > -1) {
+      this.nzTableComponent.ths.splice(index, 1);
+    }
+  }
 }

src/components/util/mesureScrollBar.ts

@@ -0,0 +1,30 @@
+let scrollbarWidth;
+
+// Measure scrollbar width for padding body during modal show/hide
+const scrollbarMeasure = {
+  position: 'absolute',
+  top: '-9999px',
+  width: '50px',
+  height: '50px',
+  overflow: 'scroll',
+};
+
+export function measureScrollbar() {
+  if (typeof document === 'undefined' || typeof window === 'undefined') {
+    return 0;
+  }
+  if (scrollbarWidth) {
+    return scrollbarWidth;
+  }
+  const scrollDiv = document.createElement('div');
+  for (const scrollProp in scrollbarMeasure) {
+    if (scrollbarMeasure.hasOwnProperty(scrollProp)) {
+      scrollDiv.style[scrollProp] = scrollbarMeasure[scrollProp];
+    }
+  }
+  document.body.appendChild(scrollDiv);
+  const width = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+  document.body.removeChild(scrollDiv);
+  scrollbarWidth = width;
+  return scrollbarWidth;
+}

src/showcase/app.module.ts

@@ -2,7 +2,7 @@ import { BrowserModule, Title } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
+import { HttpClientModule } from '@angular/common/http';
 import { RouterModule, PreloadAllModules } from '@angular/router';
 import { routes } from './app.routing.module';
 import { AppComponent } from './app.component';
@@ -18,7 +18,7 @@ import { NzHighlightModule } from './share/nz-highlight/nz-highlight.module';
     BrowserModule,
     BrowserAnimationsModule,
     FormsModule,
-    HttpModule,
+    HttpClientModule,
     NgZorroAntdModule.forRoot({ extraFontName: 'anticon', extraFontUrl: './assets/fonts/iconfont' }),
     NzCodeBoxModule,
     NzHighlightModule,

src/showcase/nz-demo-dropdown/nz-demo-dropdown.html

@@ -2,7 +2,6 @@
   <section class="markdown"><h1>Dropdown 下拉菜单</h1>
     <section class="markdown"><p>向下弹出的列表。</p>
       <h2 id="何时使用"><span>何时使用</span>
-        <!-- <a class="anchor">#</a> -->
       </h2>
       <p>当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。</p>
     </section>
@@ -90,6 +89,12 @@ <h3 id="nz-dropdown"><span>nz-dropdown</span>
           <td>Directive</td>
           <td>-</td>
         </tr>
+        <tr>
+          <td>[nz-dropdown-custom]</td>
+          <td>自定义下拉菜单内容，不可与menu混用</td>
+          <td>ng-content</td>
+          <td>-</td>
+        </tr>
         <tr>
           <td>nzTrigger</td>
           <td>触发下拉的行为</td>