feat(module:table): nzExpand supports custom icon (#7886)

Author: OriginRing

components/table/demo/colspan-rowspan.md

@@ -1,5 +1,5 @@
 ---
-order: 14
+order: 15
 title:
   en-US: colSpan and rowSpan
   zh-CN: 表格行/列合并

components/table/demo/expand-icon.md

@@ -0,0 +1,16 @@
+---
+order: 14
+title:
+  en-US: Customize the expansion icon
+  zh-CN: 自定义展开 icon
+---
+
+## zh-CN
+
+当使用 `nzExpand` 属性时，添加 `nzExpandIcon` 自定义展开图标。
+
+## en-US
+
+When using the `nzExpand` prop, add the `nzExpandIcon` custom expand icon.
+
+

components/table/demo/expand-icon.ts

@@ -0,0 +1,82 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-table-expand-icon',
+  template: `
+    <nz-table #nzTable [nzData]="listOfData" nzTableLayout="fixed">
+      <thead>
+        <tr>
+          <th nzWidth="60px"></th>
+          <th>Name</th>
+          <th>Age</th>
+          <th>Address</th>
+        </tr>
+      </thead>
+      <tbody>
+        <ng-container *ngFor="let data of nzTable.data">
+          <tr>
+            <td [nzExpand]="expandSet.has(data.id)" [nzExpandIcon]="expandIcon"></td>
+            <td>{{ data.name }}</td>
+            <td>{{ data.age }}</td>
+            <td>{{ data.address }}</td>
+          </tr>
+          <tr [nzExpand]="expandSet.has(data.id)">
+            <span>{{ data.description }}</span>
+          </tr>
+          <ng-template #expandIcon>
+            <span
+              nz-icon
+              *ngIf="!expandSet.has(data.id)"
+              nzType="plus-circle"
+              nzTheme="outline"
+              (click)="onExpandChange(data.id, true)"
+            ></span>
+            <span
+              nz-icon
+              *ngIf="expandSet.has(data.id)"
+              nzType="minus-circle"
+              nzTheme="outline"
+              (click)="onExpandChange(data.id, false)"
+            ></span>
+          </ng-template>
+        </ng-container>
+      </tbody>
+    </nz-table>
+  `
+})
+export class NzDemoTableExpandIconComponent {
+  expandSet = new Set<number>();
+  onExpandChange(id: number, checked: boolean): void {
+    if (checked) {
+      this.expandSet.add(id);
+    } else {
+      this.expandSet.delete(id);
+    }
+  }
+  listOfData = [
+    {
+      id: 1,
+      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.'
+    },
+    {
+      id: 2,
+      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.'
+    },
+    {
+      id: 3,
+      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.'
+    }
+  ];
+}

components/table/doc/index.en-US.md

@@ -184,6 +184,7 @@ Expand property
 | -------- | ----------- | ---- | ------- |
 | `[nzShowExpand]` | Whether show expand icon | `boolean` | - |
 | `[nzExpand]` | Current expand status, double binding | `boolean` | - |
+| `[nzExpandIcon]` | Custom expand icon | `TemplateRef<void>` | - |
 | `(nzExpandChange)` | Expand status change callback | `EventEmitter<boolean>` | - |
 
 Style property

components/table/doc/index.zh-CN.md

@@ -184,6 +184,7 @@ Table 组件同时具备了易用性和高度可定制性
 | --- | --- | --- | --- |
 | `[nzShowExpand]` | 是否显示展开按钮 | `boolean` | - |
 | `[nzExpand]` | 当前展开按钮状态，可双向绑定 | `boolean` | - |
+| `[nzExpandIcon]` | 自定义展开图标 | `TemplateRef<void>` | - |
 | `(nzExpandChange)` | 当前展开按钮状态改变回调函数 | `EventEmitter<boolean>` | - |
 
 样式属性

components/table/src/cell/td-addon.component.ts

@@ -14,6 +14,7 @@ import {
   Output,
   SimpleChange,
   SimpleChanges,
+  TemplateRef,
   ViewEncapsulation
 } from '@angular/core';
 
@@ -29,12 +30,17 @@ import { InputBoolean } from 'ng-zorro-antd/core/util';
   template: `
     <ng-container *ngIf="nzShowExpand || nzIndentSize > 0">
       <nz-row-indent [indentSize]="nzIndentSize"></nz-row-indent>
-      <button
-        nz-row-expand-button
-        [expand]="nzExpand"
-        (expandChange)="onExpandChange($event)"
-        [spaceMode]="!nzShowExpand"
-      ></button>
+      <ng-template #rowExpand>
+        <button
+          nz-row-expand-button
+          [expand]="nzExpand"
+          (expandChange)="onExpandChange($event)"
+          [spaceMode]="!nzShowExpand"
+        ></button>
+      </ng-template>
+      <ng-container *ngIf="nzExpandIcon; else rowExpand">
+        <ng-template [ngTemplateOutlet]="nzExpandIcon"></ng-template>
+      </ng-container>
     </ng-container>
     <label
       nz-checkbox
@@ -63,6 +69,7 @@ export class NzTdAddOnComponent implements OnChanges {
   @Input() @InputBoolean() nzShowExpand = false;
   @Input() @InputBoolean() nzShowCheckbox = false;
   @Input() @InputBoolean() nzExpand = false;
+  @Input() nzExpandIcon: TemplateRef<void> | null = null;
   @Output() readonly nzCheckedChange = new EventEmitter<boolean>();
   @Output() readonly nzExpandChange = new EventEmitter<boolean>();
   private isNzShowExpandChanged = false;