feat(module:table): support table expand feature (#259)

close #185

src/components/table/nz-row-expand-icon.component.ts

@@ -0,0 +1,40 @@
+import {
+  Component,
+  Input,
+  Output,
+  HostListener,
+  HostBinding,
+  EventEmitter,
+} from '@angular/core';
+
+@Component({
+  selector: 'nz-row-expand-icon',
+  template: ``
+})
+export class NzRowExpandIconComponent {
+  @Input() nzExpand = false;
+  @Input() @HostBinding('class.ant-table-row-spaced') nzShowExpand = false;
+  @Output() nzExpandChange = new EventEmitter();
+
+  @HostBinding(`class.ant-table-row-expanded`)
+  get expanded() {
+    return this.nzExpand && !this.nzShowExpand;
+  }
+
+  @HostBinding(`class.ant-table-row-collapsed`)
+  get collapsed() {
+    return !this.nzExpand && !this.nzShowExpand;
+  }
+
+  @HostBinding(`class.ant-table-row-expand-icon`) _expandIcon = true;
+
+
+  @HostListener('click')
+  onClick() {
+    this.nzExpand = !this.nzExpand;
+    this.nzExpandChange.emit(this.nzExpand);
+  }
+
+  constructor() {
+  }
+}

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

@@ -0,0 +1,23 @@
+import {
+  Component,
+  Input,
+  HostBinding,
+} from '@angular/core';
+
+@Component({
+  selector: 'nz-row-indent',
+  template: ``
+})
+export class NzRowIndentComponent {
+  @Input() nzIndentSize;
+
+  @HostBinding(`style.paddingLeft.px`)
+  get paddingLeft() {
+    return this.nzIndentSize * 20;
+  }
+
+  @HostBinding(`class.ant-table-row-indent`) _rowIndent = true;
+
+  constructor() {
+  }
+}

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

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

src/components/table/nz-tbody-tr.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, HostBinding } from '@angular/core';
+import { Directive, HostBinding, Input } from '@angular/core';
 
 @Directive({
   selector: '[nz-tbody-tr]'

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

@@ -10,8 +10,8 @@ import {
 })
 export class NzTdDirective {
   _el: HTMLElement;
-  @Input()
-  @HostBinding(`class.ant-table-selection-column`) nzCheckbox;
+  @Input() @HostBinding(`class.ant-table-selection-column`) nzCheckbox;
+  @Input() @HostBinding(`class.ant-table-row-expand-icon-cell`) nzExpand;
 
   constructor(private _elementRef: ElementRef) {
     this._el = this._elementRef.nativeElement;

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

@@ -13,6 +13,7 @@ export class NzThDirective implements OnInit, OnDestroy {
   _el: HTMLElement;
   @Input() nzWidth;
   @Input() @HostBinding(`class.ant-table-selection-column`) nzCheckbox;
+  @Input() @HostBinding(`class.ant-table-expand-icon-th`) nzExpand;
 
   constructor(private _elementRef: ElementRef, private nzTableComponent: NzTableComponent) {
     this._el = this._elementRef.nativeElement;

src/showcase/nz-demo-table/nz-demo-table-ajax.component.ts

@@ -1,5 +1,29 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+
+@Injectable()
+export class RandomUserService {
+  randomUserUrl = 'https://api.randomuser.me/';
+
+  getUsers(pageIndex = 1, pageSize = 10, sortField, sortOrder, genders) {
+    let params = new HttpParams()
+      .append('page', `${pageIndex}`)
+      .append('results', `${pageSize}`)
+      .append('sortField', sortField)
+      .append('sortOrder', sortOrder);
+    genders.forEach(gender => {
+      params = params.append('gender', gender);
+    });
+    return this.http.get(`${this.randomUserUrl}`, {
+      params: params
+    })
+  }
+
+  constructor(private http: HttpClient) {
+  }
+}
+
 import { Component, OnInit } from '@angular/core';
-import { RandomUserService } from './randomUser.service';
 
 @Component({
   selector : 'nz-demo-table-ajax',
@@ -96,4 +120,3 @@ export class NzDemoTableAjaxComponent implements OnInit {
     this.refreshData();
   }
 }
-

src/showcase/nz-demo-table/nz-demo-table-expand-tree.component.ts

@@ -0,0 +1,135 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-table-expand-tree',
+  template: `
+    <nz-table #nzTable [nzDataSource]="data" [nzPageSize]="10">
+      <thead nz-thead>
+        <tr>
+          <th nz-th [nzWidth]="'40%'"><span>Name</span></th>
+          <th nz-th [nzWidth]="'30%'"><span>Age</span></th>
+          <th nz-th><span>Address</span></th>
+        </tr>
+      </thead>
+      <tbody nz-tbody>
+        <ng-template ngFor let-data [ngForOf]="nzTable.data">
+          <ng-template ngFor let-item [ngForOf]="expandDataCache[data.key]">
+            <tr nz-tbody-tr *ngIf="(item.parent&&item.parent.expand)||!(item.parent)">
+              <td nz-td>
+                <nz-row-indent [nzIndentSize]="item.level"></nz-row-indent>
+                <nz-row-expand-icon [(nzExpand)]="item.expand" (nzExpandChange)="collapse(expandDataCache[data.key],item,$event)" [nzShowExpand]="!item.children"></nz-row-expand-icon>
+                {{item.name}}
+              </td>
+              <td nz-td>{{item.age}}</td>
+              <td nz-td>{{item.address}}</td>
+            </tr>
+          </ng-template>
+        </ng-template>
+      </tbody>
+    </nz-table>`,
+  styles  : []
+})
+export class NzDemoTableExpandTreeComponent implements OnInit {
+  data = [
+    {
+      key     : 1,
+      name    : 'John Brown sr.',
+      age     : 60,
+      address : 'New York No. 1 Lake Park',
+      children: [ {
+        key    : 11,
+        name   : 'John Brown',
+        age    : 42,
+        address: 'New York No. 2 Lake Park',
+      }, {
+        key     : 12,
+        name    : 'John Brown jr.',
+        age     : 30,
+        address : 'New York No. 3 Lake Park',
+        children: [ {
+          key    : 121,
+          name   : 'Jimmy Brown',
+          age    : 16,
+          address: 'New York No. 3 Lake Park',
+        } ],
+      }, {
+        key     : 13,
+        name    : 'Jim Green sr.',
+        age     : 72,
+        address : 'London No. 1 Lake Park',
+        children: [ {
+          key     : 131,
+          name    : 'Jim Green',
+          age     : 42,
+          address : 'London No. 2 Lake Park',
+          children: [ {
+            key    : 1311,
+            name   : 'Jim Green jr.',
+            age    : 25,
+            address: 'London No. 3 Lake Park',
+          }, {
+            key    : 1312,
+            name   : 'Jimmy Green sr.',
+            age    : 18,
+            address: 'London No. 4 Lake Park',
+          } ],
+        } ],
+      } ],
+    },
+    {
+      key    : 2,
+      name   : 'Joe Black',
+      age    : 32,
+      address: 'Sidney No. 1 Lake Park',
+    }
+  ];
+  expandDataCache = {};
+
+  collapse(array, data, $event) {
+    if ($event === false) {
+      if (data.children) {
+        data.children.forEach(d => {
+          const target = array.find(a => a.key === d.key);
+          target.expand = false;
+          this.collapse(array, target, false);
+        });
+      } else {
+        return;
+      }
+    }
+  }
+
+  convertTreeToList(root) {
+    const stack = [], array = [], hashMap = {};
+    stack.push({ ...root, level: 0, expand: false });
+
+    while (stack.length !== 0) {
+      const node = stack.pop();
+      this.visitNode(node, hashMap, array);
+      if (node.children) {
+        for (let i = node.children.length - 1; i >= 0; i--) {
+          stack.push({ ...node.children[ i ], level: node.level + 1, expand: false, parent: node });
+        }
+      }
+    }
+
+    return array;
+  }
+
+  visitNode(node, hashMap, array) {
+    if (!hashMap[ node.key ]) {
+      hashMap[ node.key ] = true;
+      array.push(node);
+    }
+  }
+
+  constructor() {
+  }
+
+  ngOnInit() {
+    this.data.forEach(item => {
+      this.expandDataCache[ item.key ] = this.convertTreeToList(item);
+    });
+  }
+}
+

src/showcase/nz-demo-table/nz-demo-table-expand.component.ts

@@ -0,0 +1,73 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-table-expand',
+  template: `
+    <nz-table #nzTable [nzDataSource]="data" [nzPageSize]="10">
+      <thead nz-thead>
+        <tr>
+          <th nz-th [nzExpand]="true"></th>
+          <th nz-th><span>Name</span></th>
+          <th nz-th><span>Age</span></th>
+          <th nz-th><span>Address</span></th>
+          <th nz-th><span>Action</span></th>
+        </tr>
+      </thead>
+      <tbody nz-tbody>
+        <ng-template ngFor let-data [ngForOf]="nzTable.data">
+          <tr nz-tbody-tr>
+            <td nz-td [nzExpand]="true">
+              <nz-row-expand-icon [(nzExpand)]="data.expand"></nz-row-expand-icon>
+            </td>
+            <td nz-td>{{data.name}}</td>
+            <td nz-td>{{data.age}}</td>
+            <td nz-td>{{data.address}}</td>
+            <td nz-td>
+            <span>
+              <a href="#">Delete</a>
+            </span>
+            </td>
+          </tr>
+          <tr nz-tbody-tr *ngIf="data.expand">
+            <td nz-td></td>
+            <td nz-td colspan="4">
+              {{data.description}}
+            </td>
+          </tr>
+        </ng-template>
+      </tbody>
+    </nz-table>`,
+  styles  : []
+})
+export class NzDemoTableExpandComponent implements OnInit {
+  data = [
+    {
+      name       : 'John Brown',
+      age        : 32,
+      expand     : false,
+      address    : 'New York No. 1 Lake Park',
+      description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.'
+    },
+    {
+      name       : 'Jim Green',
+      age        : 42,
+      expand     : false,
+      address    : 'London No. 1 Lake Park',
+      description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+    },
+    {
+      name       : 'Joe Black',
+      age        : 32,
+      expand     : false,
+      address    : 'Sidney No. 1 Lake Park',
+      description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.'
+    },
+  ];
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+}
+

src/showcase/nz-demo-table/nz-demo-table.component.ts

@@ -10,6 +10,8 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 })
 export class NzDemoTableComponent implements OnInit {
   NzDemoTableBasicCode = require('!!raw-loader!./nz-demo-table-basic.component');
+  NzDemoTableExpandCode = require('!!raw-loader!./nz-demo-table-expand.component');
+  NzDemoTableExpandTreeCode = require('!!raw-loader!./nz-demo-table-expand-tree.component');
   NzDemoTableEditCode = require('!!raw-loader!./nz-demo-table-edit.component');
   NzDemoTableFixedHeaderCode = require('!!raw-loader!./nz-demo-table-fixed-header.component');
   NzDemoTableColspanRowspanCode = require('!!raw-loader!./nz-demo-table-colspan-rowspan.component');