feat(module:table): support nzSummary (#8639)

* feat(module: table): add summary

* Update tr.directive.ts

* tfoot-summary.directive.ts support standalone

* feat(module: table): add tests for nzSummary

* chore: fix build error

---------

Co-authored-by: ElderJames <shunjiey@hotmail.com>

Author: Laffery

components/table/demo/module

@@ -11,6 +11,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
 import { NzModalModule } from 'ng-zorro-antd/modal';
 import { NzGridModule } from 'ng-zorro-antd/grid';
 import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
+import { NzTypographyModule } from 'ng-zorro-antd/typography';
 
 export const moduleList = [
   NzTableModule,
@@ -25,5 +26,6 @@ export const moduleList = [
   NzButtonModule,
   NzInputModule,
   NzIconModule,
-  NzPopconfirmModule
+  NzPopconfirmModule,
+  NzTypographyModule
 ];

components/table/demo/summary.md

@@ -0,0 +1,14 @@
+---
+order: 29
+title:
+  en-US: Summary
+  zh-CN: 总结栏
+---
+
+## zh-CN
+
+通过 `nzSummary` 设置总结栏。
+
+## en-US
+
+Set summary content by `nzSummary` prop. 

components/table/demo/summary.ts

@@ -0,0 +1,83 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-table-summary',
+  template: `
+    <nz-table #middleTable nzBordered [nzData]="data" [nzShowPagination]="false">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Borrow</th>
+          <th>Repayment</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let data of middleTable.data">
+          <td>{{ data.name }}</td>
+          <td>{{ data.borrow }}</td>
+          <td>{{ data.repayment }}</td>
+        </tr>
+        <tr></tr>
+      </tbody>
+      <tfoot nzSummary>
+        <tr>
+          <td>Total</td>
+          <td>
+            <span nz-typography nzType="danger">{{ totalBorrow }}</span>
+          </td>
+          <td>
+            <span nz-typography>{{ totalRepayment }}</span>
+          </td>
+        </tr>
+        <tr>
+          <td>Balance</td>
+          <td colspan="2">
+            <span nz-typography>{{ totalBorrow - totalRepayment }}</span>
+          </td>
+        </tr>
+      </tfoot>
+    </nz-table>
+  `,
+  styles: [
+    `
+      tfoot th,
+      tfoot td {
+        background: #fafafa;
+      }
+    `
+  ]
+})
+export class NzDemoTableSummaryComponent implements OnInit {
+  data = [
+    {
+      name: 'John Brown',
+      borrow: 10,
+      repayment: 33
+    },
+    {
+      name: 'Jim Green',
+      borrow: 100,
+      repayment: 0
+    },
+    {
+      name: 'Joe Black',
+      borrow: 10,
+      repayment: 10
+    },
+    {
+      name: 'Jim Red',
+      borrow: 75,
+      repayment: 45
+    }
+  ];
+
+  fixedData: Array<{ name: string; description: string }> = [];
+  totalBorrow = 0;
+  totalRepayment = 0;
+  ngOnInit(): void {
+    this.data.forEach(({ borrow, repayment }) => {
+      this.totalBorrow += borrow;
+      this.totalRepayment += repayment;
+    });
+  }
+}

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

@@ -216,6 +216,12 @@ Other property
 | ------------ | -------------------------------------------------------- | --------- | ------- |
 | `[nzExpand]` | Whether expand current row，used with `nzExpand` of `td` | `boolean` | -       |
 
+### tfoot
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| `[nzSummary]` | Summary content  | `boolean` | - |
+
 ### nz-filter-trigger:standalone
 
 Customized filter panel

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

@@ -217,6 +217,12 @@ Table 组件同时具备了易用性和高度可定制性
 | ------------ | ---------------------------------------------------- | --------- | ------ |
 | `[nzExpand]` | 当前列是否展开，与 `td` 上的 `nzExpand` 属性配合使用 | `boolean` | -      |
 
+### tfoot
+
+| 参数         | 说明                                                 | 类型      | 默认值 |
+| ------------ | ---------------------------------------------------- | --------- | ------ |
+| `[nzSummary]` | 总结栏                                              | `boolean` | -      |
+
 ### nz-filter-trigger:standalone
 
 用于自定义筛选功能

components/table/public-api.ts

@@ -16,6 +16,7 @@ export * from './src/table/table-virtual-scroll.directive';
 export * from './src/table/table-fixed-row.component';
 export * from './src/table/tbody.component';
 export * from './src/table/thead.component';
+export * from './src/table/tfoot-summary.directive';
 export * from './src/table/tr.directive';
 export * from './src/table/tr-expand.directive';
 export * from './src/table/title-footer.component';

components/table/src/table.module.ts

@@ -28,6 +28,7 @@ import { NzTableInnerScrollComponent } from './table/table-inner-scroll.componen
 import { NzTableVirtualScrollDirective } from './table/table-virtual-scroll.directive';
 import { NzTableComponent } from './table/table.component';
 import { NzTbodyComponent } from './table/tbody.component';
+import { NzTfootSummaryDirective } from './table/tfoot-summary.directive';
 import { NzTheadComponent } from './table/thead.component';
 import { NzTableTitleFooterComponent } from './table/title-footer.component';
 import { NzTrExpandDirective } from './table/tr-expand.directive';
@@ -45,6 +46,7 @@ import { NzTrDirective } from './table/tr.directive';
     NzTbodyComponent,
     NzTrDirective,
     NzTrExpandDirective,
+    NzTfootSummaryDirective,
     NzTableVirtualScrollDirective,
     NzCellFixedDirective,
     NzCustomColumnDirective,
@@ -79,6 +81,7 @@ import { NzTrDirective } from './table/tr.directive';
     NzCustomColumnDirective,
     NzFilterTriggerComponent,
     NzTrExpandDirective,
+    NzTfootSummaryDirective,
     NzCellBreakWordDirective,
     NzCellAlignDirective,
     NzCellEllipsisDirective,

components/table/src/table/tfoot-summary.directive.ts

@@ -0,0 +1,15 @@
+/**
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: 'tfoot[nzSummary]',
+  host: {
+    class: 'ant-table-summary'
+  },
+  standalone: true
+})
+export class NzTfootSummaryDirective {}

components/table/src/table/tr.directive.ts

@@ -10,12 +10,13 @@ import { map, mergeMap, startWith, switchMap, takeUntil } from 'rxjs/operators';
 import { NzCellFixedDirective } from '../cell/cell-fixed.directive';
 import { NzThMeasureDirective } from '../cell/th-measure.directive';
 import { NzTableStyleService } from '../table-style.service';
+import { NzTfootSummaryDirective } from './tfoot-summary.directive';
 
 @Directive({
   selector:
     'tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])',
   host: {
-    '[class.ant-table-row]': 'isInsideTable'
+    '[class.ant-table-row]': 'isInsideTable && !isInsideSummaryTfoot'
   },
   standalone: true
 })
@@ -49,7 +50,9 @@ export class NzTrDirective implements AfterContentInit, OnDestroy {
   );
 
   private nzTableStyleService = inject(NzTableStyleService, { optional: true });
+  private nzTfootSummaryDirective = inject(NzTfootSummaryDirective, { optional: true });
   isInsideTable = !!this.nzTableStyleService;
+  isInsideSummaryTfoot = !!this.nzTfootSummaryDirective;
 
   ngAfterContentInit(): void {
     if (this.nzTableStyleService) {

components/table/src/testing/tfoot.spec.ts

@@ -0,0 +1,53 @@
+import { Component, DebugElement } from '@angular/core';
+import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { NzTableModule } from '../table.module';
+import { NzTfootSummaryDirective } from '../table/tfoot-summary.directive';
+
+describe('nz-foot', () => {
+  beforeEach(fakeAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [NzTableModule],
+      declarations: [TestComponent]
+    });
+    TestBed.compileComponents();
+  }));
+
+  describe('nz-foot in nz-table', () => {
+    let fixture: ComponentFixture<TestComponent>;
+    let tfoot: DebugElement;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(TestComponent);
+      fixture.detectChanges();
+      tfoot = fixture.debugElement.query(By.directive(NzTfootSummaryDirective));
+    });
+
+    it('should nzSummary work ', () => {
+      fixture.detectChanges();
+      expect(tfoot.nativeElement.classList).toContain('ant-table-summary');
+    });
+  });
+});
+
+@Component({
+  template: `
+    <nz-table>
+      <thead>
+        <th></th>
+        <th></th>
+      </thead>
+      <tbody>
+        <tr>
+          <td>1</td>
+          <td>2</td>
+        </tr>
+      </tbody>
+      <tfoot nzSummary>
+        <td colspan="2">summary</td>
+        <tfoot> </tfoot></tfoot
+    ></nz-table>
+  `
+})
+export class TestComponent {}