feat(module:table): support nzOuterBordered (#5795)

NG-ZORRO · Sep 16, 2020 · 471b0bf · 471b0bf
1 parent 71be33a
commit 471b0bf
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 0 deletions.
diff --git a/components/table/demo/bordered.ts b/components/table/demo/bordered.ts
@@ -19,6 +19,23 @@ import { Component } from '@angular/core';
         </tr>
       </tbody>
     </nz-table>
+
+    <nz-table #outBordered nzOuterBordered nzFooter="Footer" nzTitle="Header" [nzData]="dataSet">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Age</th>
+          <th>Address</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let data of outBordered.data">
+          <td>{{ data.name }}</td>
+          <td>{{ data.age }}</td>
+          <td>{{ data.address }}</td>
+        </tr>
+      </tbody>
+    </nz-table>
   `
 })
 export class NzDemoTableBorderedComponent {

diff --git a/components/table/doc/index.en-US.md b/components/table/doc/index.en-US.md
@@ -72,6 +72,7 @@ The data passed to `[nzData]` will be export with [Template Context](https://ang
 | `[nzShowPagination]` | Whether show pagination component in bottom of the table | `boolean` | `true` |
 | `[nzPaginationPosition]` | Specify the position of Pagination | `'top' \| 'bottom' \| 'both'` | `bottom` |
 | `[nzBordered]` | Whether to show all table borders | `boolean` | `false` | ✅ |
+| `[nzOutBordered]` | Whether to show table out borders | `boolean` | `false` | - |
 | `[nzWidthConfig]` | Set col width can not used with `[nzWidth]` of `th` | `string[]` | `[]` |
 | `[nzSize]` | Size of table | `'middle' \| 'small' \| 'default'` | `'default'` | ✅ |
 | `[nzLoading]` | Loading status of table | `boolean` | `false` |

diff --git a/components/table/doc/index.zh-CN.md b/components/table/doc/index.zh-CN.md
@@ -73,6 +73,7 @@ Table 组件同时具备了易用性和高度可定制性
 | `[nzShowPagination]` | 是否显示分页器 | `boolean` | `true` |
 | `[nzPaginationPosition]` | 指定分页显示的位置 | `'top' \| 'bottom' \| 'both'` | `bottom` |
 | `[nzBordered]` | 是否展示外边框和列边框 | `boolean` | `false` | ✅ |
+| `[nzOutBordered]` | 是否显示外边框 | `boolean` | `false` | - |
 | `[nzWidthConfig]` | 表头分组时指定每列宽度，与 `th` 的 `[nzWidth]` 不可混用 | `string[]` | `[]` |
 | `[nzSize]` | 正常或迷你类型 | `'middle' \| 'small' \| 'default'` | `'default'` | ✅ |
 | `[nzLoading]` | 页面是否加载中 | `boolean` | `false` |

diff --git a/components/table/src/table/table.component.ts b/components/table/src/table/table.component.ts
@@ -58,6 +58,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'table';
         [class.ant-table-has-fix-left]="hasFixLeft"
         [class.ant-table-has-fix-right]="hasFixRight"
         [class.ant-table-bordered]="nzBordered"
+        [class.nz-table-out-bordered]="nzOuterBordered && !nzBordered"
         [class.ant-table-middle]="nzSize === 'middle'"
         [class.ant-table-small]="nzSize === 'small'"
       >
@@ -127,6 +128,7 @@ export class NzTableComponent<T = NzSafeAny> implements OnInit, OnDestroy, OnCha
   static ngAcceptInputType_nzShowPagination: BooleanInput;
   static ngAcceptInputType_nzLoading: BooleanInput;
   static ngAcceptInputType_nzBordered: BooleanInput;
+  static ngAcceptInputType_nzOuterBordered: BooleanInput;
   static ngAcceptInputType_nzShowSizeChanger: BooleanInput;
   static ngAcceptInputType_nzHideOnSinglePage: BooleanInput;
   static ngAcceptInputType_nzShowQuickJumper: BooleanInput;
@@ -155,6 +157,7 @@ export class NzTableComponent<T = NzSafeAny> implements OnInit, OnDestroy, OnCha
   @Input() @InputBoolean() nzTemplateMode = false;
   @Input() @InputBoolean() nzShowPagination = true;
   @Input() @InputBoolean() nzLoading = false;
+  @Input() @InputBoolean() nzOuterBordered = false;
   @Input() @WithConfig() nzLoadingIndicator: TemplateRef<NzSafeAny> | null = null;
   @Input() @WithConfig() @InputBoolean() nzBordered: boolean = false;
   @Input() @WithConfig() nzSize: NzTableSize = 'default';

diff --git a/components/table/style/patch.less b/components/table/style/patch.less
@@ -6,6 +6,21 @@ nz-table-selection {
   display: block;
 }
 
+.nz-table-out-bordered {
+  > .@{table-prefix-cls}-title {
+    border: @table-border;
+    border-bottom: 0;
+  }
+  > .@{table-prefix-cls}-container {
+    border: @table-border;
+    border-bottom: 0;
+  }
+  > .@{table-prefix-cls}-footer {
+    border: @table-border;
+    border-top: 0;
+  }
+}
+
 cdk-virtual-scroll-viewport.ant-table-body {
   overflow-y: scroll;
 }