feat(module:table): support nzFixed for nzSummary (#8642)

* feat(module:table): support `nzFixed` for `nzSummary`

* feat(module:table): support `nzFixed` for `nzSummary`

Author: Laffery

components/table/demo/summary.md

@@ -7,8 +7,8 @@ title:
 
 ## zh-CN
 
-通过 `nzSummary` 设置总结栏。
+通过 `nzSummary` 设置总结栏。可以通过配置 `nzFixed` 属性使其固定。
 
 ## en-US
 
-Set summary content by `nzSummary` prop. 
+Set summary content by `nzSummary` prop. You can fixed it by set `nzFixed` prop.

components/table/demo/summary.ts

@@ -12,12 +12,13 @@ import { Component, OnInit } from '@angular/core';
         </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>
+        @for (data of middleTable.data; track $index) {
+          <tr>
+            <td>{{ data.name }}</td>
+            <td>{{ data.borrow }}</td>
+            <td>{{ data.repayment }}</td>
+          </tr>
+        }
       </tbody>
       <tfoot nzSummary>
         <tr>
@@ -37,12 +38,42 @@ import { Component, OnInit } from '@angular/core';
         </tr>
       </tfoot>
     </nz-table>
+
+    <br />
+
+    <nz-table
+      #fixedTable
+      nzBordered
+      [nzData]="fixedData"
+      [nzShowPagination]="false"
+      [nzScroll]="{ x: '1280px', y: '500px' }"
+    >
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        @for (data of fixedTable.data; track data.key) {
+          <tr>
+            <td>{{ data.name }}</td>
+            <td>{{ data.description }}</td>
+          </tr>
+        }
+      </tbody>
+      <tfoot nzSummary nzFixed>
+        <tr>
+          <td>Summary</td>
+          <td>This is a summary content</td>
+        </tr>
+      </tfoot>
+    </nz-table>
   `,
   styles: [
     `
-      tfoot th,
-      tfoot td {
-        background: #fafafa;
+      :host ::ng-deep tfoot.ant-table-summary {
+        background-color: #fafafa !important;
       }
     `
   ]
@@ -71,13 +102,22 @@ export class NzDemoTableSummaryComponent implements OnInit {
     }
   ];
 
-  fixedData: Array<{ name: string; description: string }> = [];
+  fixedData: Array<{ key: number; name: string; description: string }> = [];
   totalBorrow = 0;
   totalRepayment = 0;
+
   ngOnInit(): void {
     this.data.forEach(({ borrow, repayment }) => {
       this.totalBorrow += borrow;
       this.totalRepayment += repayment;
     });
+
+    for (let i = 0; i < 20; i += 1) {
+      this.fixedData.push({
+        key: i,
+        name: ['Light', 'Bamboo', 'Little'][i % 3],
+        description: 'Everything that has a beginning, has an end.'
+      });
+    }
   }
 }

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

@@ -16,7 +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/tfoot-summary.component';
 export * from './src/table/tr.directive';
 export * from './src/table/tr-expand.directive';
 export * from './src/table/title-footer.component';

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

@@ -10,10 +10,13 @@ import { map } from 'rxjs/operators';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
 import { NzThMeasureDirective } from './cell/th-measure.directive';
+import { NzTableSummaryFixedType } from './table.types';
 
 @Injectable()
 export class NzTableStyleService {
   theadTemplate$ = new ReplaySubject<TemplateRef<NzSafeAny>>(1);
+  tfootTemplate$ = new ReplaySubject<TemplateRef<NzSafeAny>>(1);
+  tfootFixed$ = new ReplaySubject<NzTableSummaryFixedType | null>(1);
   hasFixLeft$ = new ReplaySubject<boolean>(1);
   hasFixRight$ = new ReplaySubject<boolean>(1);
   hostWidth$ = new ReplaySubject<number>(1);
@@ -54,6 +57,14 @@ export class NzTableStyleService {
     this.theadTemplate$.next(template);
   }
 
+  setTfootTemplate(template: TemplateRef<NzSafeAny>): void {
+    this.tfootTemplate$.next(template);
+  }
+
+  setTfootFixed(fixed: NzTableSummaryFixedType | null): void {
+    this.tfootFixed$.next(fixed);
+  }
+
   setHasFixLeft(hasFixLeft: boolean): void {
     this.hasFixLeft$.next(hasFixLeft);
   }
@@ -106,6 +117,4 @@ export class NzTableStyleService {
     }
     this.enableAutoMeasure$.next(enableAutoMeasure);
   }
-
-  constructor() {}
 }

components/table/public-api.ts

@@ -28,7 +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 { NzTfootSummaryComponent } from './table/tfoot-summary.component';
 import { NzTheadComponent } from './table/thead.component';
 import { NzTableTitleFooterComponent } from './table/title-footer.component';
 import { NzTrExpandDirective } from './table/tr-expand.directive';
@@ -46,7 +46,7 @@ import { NzTrDirective } from './table/tr.directive';
     NzTbodyComponent,
     NzTrDirective,
     NzTrExpandDirective,
-    NzTfootSummaryDirective,
+    NzTfootSummaryComponent,
     NzTableVirtualScrollDirective,
     NzCellFixedDirective,
     NzCustomColumnDirective,
@@ -81,7 +81,7 @@ import { NzTrDirective } from './table/tr.directive';
     NzCustomColumnDirective,
     NzFilterTriggerComponent,
     NzTrExpandDirective,
-    NzTfootSummaryDirective,
+    NzTfootSummaryComponent,
     NzCellBreakWordDirective,
     NzCellAlignDirective,
     NzCellEllipsisDirective,

components/table/src/table-style.service.ts

@@ -28,3 +28,5 @@ export interface NzCustomColumn {
   width: number;
   fixWidth?: boolean;
 }
+
+export type NzTableSummaryFixedType = 'top' | 'bottom';

components/table/src/table.module.ts

@@ -25,6 +25,11 @@ import { NzTableLayout } from '../table.types';
     }
     <ng-template [ngTemplateOutlet]="contentTemplate"></ng-template>
     <ng-content></ng-content>
+    @if (tfootTemplate) {
+      <tfoot class="ant-table-summary">
+        <ng-template [ngTemplateOutlet]="tfootTemplate"></ng-template>
+      </tfoot>
+    }
   `,
   host: {
     '[style.table-layout]': 'tableLayout',
@@ -39,6 +44,7 @@ export class NzTableContentComponent {
   @Input() tableLayout: NzTableLayout = 'auto';
   @Input() theadTemplate: TemplateRef<NzSafeAny> | null = null;
   @Input() contentTemplate: TemplateRef<NzSafeAny> | null = null;
+  @Input() tfootTemplate: TemplateRef<NzSafeAny> | null = null;
   @Input() listOfColWidth: ReadonlyArray<string | null> = [];
   @Input() scrollX: string | null = null;
 }

components/table/src/table.types.ts

@@ -50,22 +50,26 @@ export class NzTableFixedRowComponent implements OnInit, OnDestroy, AfterViewIni
   hostWidth$ = new BehaviorSubject<number | null>(null);
   enableAutoMeasure$ = new BehaviorSubject<boolean>(false);
   private destroy$ = new Subject<boolean>();
+
   constructor(
     private nzTableStyleService: NzTableStyleService,
     private renderer: Renderer2
   ) {}
+
   ngOnInit(): void {
     if (this.nzTableStyleService) {
       const { enableAutoMeasure$, hostWidth$ } = this.nzTableStyleService;
       enableAutoMeasure$.pipe(takeUntil(this.destroy$)).subscribe(this.enableAutoMeasure$);
       hostWidth$.pipe(takeUntil(this.destroy$)).subscribe(this.hostWidth$);
     }
   }
+
   ngAfterViewInit(): void {
     this.nzTableStyleService.columnCount$.pipe(takeUntil(this.destroy$)).subscribe(count => {
       this.renderer.setAttribute(this.tdElement.nativeElement, 'colspan', `${count}`);
     });
   }
+
   ngOnDestroy(): void {
     this.destroy$.next(true);
     this.destroy$.complete();