Angular ant design ng-Zorro table col fixed issue

Question

Im using my Angular project for Ant design table (ng-zorro table), any one know how to fixed footer col section in the table,? like as following image

stack blitz here

code here

interface ProjectBooked {
  key: string;
  cName: string;
  cTitle: any;
  pLocation: string;
  conName: any;

  sortOrder?: NzTableSortOrder;
  sortFn?: NzTableSortFn;
  listOfFilter?: NzTableFilterList;
  filterFn?: NzTableFilterFn;
  filterMultiple?: boolean;
  sortDirections?: NzTableSortOrder[];
}

@Component({
  selector: 'nz-demo-table-multiple-sorter',
  template: `
    <nz-table
              #basicTable
              #sortTable
              [nzData]="listOfDisplayData"
              #borderedTable
              nzBordered
              #headerTable
              [nzLoading]="loading"
              [nzPageSize]="5" [nzScroll]="{ x: '1000px', y: '240px' }">
              <thead>
              <tr>
                <th nzCustomFilter nzColumnKey="cName" [nzSortFn]="sortFn"
                >
                  Company Name
                  <nz-filter-trigger [(nzVisible)]="visible" [nzActive]="searchValue.length > 0"
                                     [nzDropdownMenu]="menu">
                    <i nz-icon nzType="search"></i>
                  </nz-filter-trigger>
                </th>
                <th>Position Title</th>
                <th>Position Location</th>
                <th>Consultant Name</th>
                <th nzWidth="100px">Status</th>
              </tr>
              </thead>
              <tbody>
              <tr *ngFor="let data of basicTable.data">
                <td>{{ data.cName }}</td>
                <td>{{ data.cTitle }}</td>
                <td>{{ data.pLocation }}</td>
                <td>{{ data.conName }}</td>
                <td>
                  <a><nz-tag [nzColor]="'blue'">Booked</nz-tag></a>
                </td>
              </tr>
              </tbody>
            </nz-table>
            <nz-dropdown-menu #menu="nzDropdownMenu">
              <div class="ant-table-filter-dropdown">
                <div class="search-box">
                  <input type="text" nz-input placeholder="Search name" [(ngModel)]="searchValue" />
                  <button nz-button nzSize="small" nzType="primary" (click)="search()" class="search-button">
                    Search
                  </button>
                  <button nz-button nzSize="small" (click)="reset()">Reset</button>
                </div>
              </div>
            </nz-dropdown-menu>
  `
})
export class NzDemoTableMultipleSorterComponent {
   constructor(private i18n: NzI18nService) {}



  loading = false;
  searchValue = '';
  visible = false;
  // Project Booked




  listOfData: ProjectBooked[] = [
    {
      key: '1',
      cName: 'OBUSIT ',
      cTitle: 'Chief Administrative Officer',
      pLocation: 'Washington, DC',
      conName: 'Admin',
  
},
    {
      key: '2',
      cName: 'OBUSIT TEST ',
      cTitle: 'Chief Administrative Officer',
      pLocation: 'Washington, DC',
           conName: 'Admin',
    },
    {
      key: '3',
      cName: 'OBUSIT University',
      cTitle: 'Chief Administrative Officer',
      pLocation: 'Washington, DC',
      conName: 'Admin',
    },
    {
      key: '4',
      cName: 'OBUSIT Howard University',
      cTitle: 'Chief Administrative Officer',
      pLocation: 'Washington, DC',
      conName: 'Admin',
      
    },

  ];
  listOfDisplayData = [...this.listOfData];








  // Month Picker
  date = null;
  dateRange = [];
  isEnglish = false;




  reset(): void {
    this.searchValue = '';
    this.search();
  }

  search(): void {
    this.visible = false;
    this.listOfDisplayData = this.listOfData.filter((item: ProjectBooked) => item.cName.indexOf(this.searchValue) !== -1);
  }





  onChange(result: Date): void {
    console.log('onChange: ', result);
  }

  getWeek(result: Date): void {
    console.log('week: ', getISOWeek(result));
  }

  changeLanguage(): void {
    this.i18n.setLocale(this.isEnglish ? zh_CN : en_US);
    this.isEnglish = !this.isEnglish;
  }


  ngOnInit(): void {


  }

  sortFn = (a: ProjectBooked, b: ProjectBooked) => a.cName.localeCompare(b.cName);

}

Answer 1

TL;DR -- no easy solution.

---

The 'last' row will not always be the last because you have pagination enabled. So if your intention is for the last row to act as some sort of summary, you'll need to extract it from the *ngFor loop and put it outside of the row scope. One way to do that is to take advantage of [nzFooter] but it expects a TemplateRef (or a string) so you'll need to create & fill a template with that particular row:

The problem with that is that the footer does not adhere to [nzScroll] which means the following:

So a bit of hacking around will be necessary.

---

Another, even option would be to

1. create another table without a header (or with a hidden header)
2. populate it with only the last row
3. place this table directly above the original header (with some space reserved for it, obviously)
4. delegate the operations from the main table to the newly created table so the sorting, filtering, etc works.