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();

components/table/src/table/table-content.component.ts

@@ -22,6 +22,7 @@ import { NzTableContentComponent } from './table-content.component';
         [tableLayout]="tableLayout"
         [listOfColWidth]="listOfColWidth"
         [theadTemplate]="theadTemplate"
+        [tfootTemplate]="tfootTemplate"
       ></table>
     </div>
   `,
@@ -34,6 +35,5 @@ export class NzTableInnerDefaultComponent {
   @Input() listOfColWidth: ReadonlyArray<string | null> = [];
   @Input() theadTemplate: TemplateRef<NzSafeAny> | null = null;
   @Input() contentTemplate: TemplateRef<NzSafeAny> | null = null;
-
-  constructor() {}
+  @Input() tfootTemplate: TemplateRef<NzSafeAny> | null = null;
 }

components/table/src/table/table-fixed-row.component.ts

@@ -28,6 +28,7 @@ import { delay, filter, startWith, switchMap, takeUntil } from 'rxjs/operators';
 import { NzResizeService } from 'ng-zorro-antd/core/services';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
+import { NzTableSummaryFixedType } from '../table.types';
 import { NzTableContentComponent } from './table-content.component';
 import { NzTbodyComponent } from './tbody.component';
 
@@ -44,6 +45,7 @@ import { NzTbodyComponent } from './tbody.component';
           [scrollX]="scrollX"
           [listOfColWidth]="listOfColWidth"
           [theadTemplate]="theadTemplate"
+          [tfootTemplate]="tfootFixed === 'top' ? tfootTemplate : null"
         ></table>
       </div>
       @if (!virtualTemplate) {
@@ -76,6 +78,17 @@ import { NzTbodyComponent } from './tbody.component';
           </table>
         </cdk-virtual-scroll-viewport>
       }
+      @if (tfootFixed === 'bottom') {
+        <div #tableFootElement class="ant-table-summary" [ngStyle]="headerStyleMap">
+          <table
+            nz-table-content
+            tableLayout="fixed"
+            [scrollX]="scrollX"
+            [listOfColWidth]="listOfColWidth"
+            [tfootTemplate]="tfootTemplate"
+          ></table>
+        </div>
+      }
     } @else {
       <div class="ant-table-content" #tableBodyElement [ngStyle]="bodyStyleMap">
         <table
@@ -85,6 +98,7 @@ import { NzTbodyComponent } from './tbody.component';
           [listOfColWidth]="listOfColWidth"
           [theadTemplate]="theadTemplate"
           [contentTemplate]="contentTemplate"
+          [tfootTemplate]="tfootTemplate"
         ></table>
       </div>
     }
@@ -101,6 +115,8 @@ export class NzTableInnerScrollComponent<T> implements OnChanges, AfterViewInit,
   @Input() widthConfig: string[] = [];
   @Input() listOfColWidth: ReadonlyArray<string | null> = [];
   @Input() theadTemplate: TemplateRef<NzSafeAny> | null = null;
+  @Input() tfootTemplate: TemplateRef<NzSafeAny> | null = null;
+  @Input() tfootFixed: NzTableSummaryFixedType | null = null;
   @Input() virtualTemplate: TemplateRef<NzSafeAny> | null = null;
   @Input() virtualItemSize = 0;
   @Input() virtualMaxBufferPx = 200;
@@ -109,6 +125,7 @@ export class NzTableInnerScrollComponent<T> implements OnChanges, AfterViewInit,
   @Input() virtualForTrackBy: TrackByFunction<T> = index => index;
   @ViewChild('tableHeaderElement', { read: ElementRef }) tableHeaderElement!: ElementRef;
   @ViewChild('tableBodyElement', { read: ElementRef }) tableBodyElement!: ElementRef;
+  @ViewChild('tableFootElement', { read: ElementRef }) tableFootElement?: ElementRef;
   @ViewChild(CdkVirtualScrollViewport, { read: CdkVirtualScrollViewport })
   cdkVirtualScrollViewport?: CdkVirtualScrollViewport;
   headerStyleMap = {};
@@ -158,15 +175,16 @@ export class NzTableInnerScrollComponent<T> implements OnChanges, AfterViewInit,
         overflowX: this.scrollX ? 'auto' : null,
         maxHeight: this.scrollY
       };
-      // Caretaker note: we have to emit the value outside of the Angular zone, thus DOM timer (`delay(0)`) and `scroll`
-      // event listener will be also added outside of the Angular zone.
+      // Caretaker note: we have to emit the value outside the Angular zone, thus DOM timer (`delay(0)`) and `scroll`
+      // event listener will be also added outside the Angular zone.
       this.ngZone.runOutsideAngular(() => this.scroll$.next());
     }
     if (data) {
       // See the comment above.
       this.ngZone.runOutsideAngular(() => this.data$.next());
     }
   }
+
   ngAfterViewInit(): void {
     if (this.platform.isBrowser) {
       this.ngZone.runOutsideAngular(() => {
@@ -184,14 +202,16 @@ export class NzTableInnerScrollComponent<T> implements OnChanges, AfterViewInit,
           takeUntil(this.destroy$)
         );
         setClassName$.subscribe(() => this.setScrollPositionClassName());
-        scrollEvent$
-          .pipe(filter(() => !!this.scrollY))
-          .subscribe(
-            () => (this.tableHeaderElement.nativeElement.scrollLeft = this.tableBodyElement.nativeElement.scrollLeft)
-          );
+        scrollEvent$.pipe(filter(() => !!this.scrollY)).subscribe(() => {
+          this.tableHeaderElement.nativeElement.scrollLeft = this.tableBodyElement.nativeElement.scrollLeft;
+          if (this.tableFootElement) {
+            this.tableFootElement.nativeElement.scrollLeft = this.tableBodyElement.nativeElement.scrollLeft;
+          }
+        });
       });
     }
   }
+
   ngOnDestroy(): void {
     this.setScrollPositionClassName(true);
     this.destroy$.next();