CODEWITHSUNDEEP
angularng-zorro-antd
Santhosh
Santhosh

Reputation: 1079

How to implement sorter and filter in NG-ZORRO (Ant design) table

I am using ng-zorro-antd table in my application. I am unable to implement filter and sorter as table columns and the table data is dynamic.

Please see my current code below:

<nz-table
  #rowSelectionTable
  [nzData]="data"
  [nzPageSize]="20"
  (nzCurrentPageDataChange)="currentPageDataChange($event)"
  (nzPageIndexChange)="refreshStatus($event)"
  (nzPageSizeChange)="refreshStatus($event)"
>
  <thead>
    <tr>
      <th
        nzShowSort
        nzShowFilter
        [nzFilters]="tradeCodeList"
        (nzFilterChange)="search($event,searchAddressList)"
        *ngFor="let col of transDataCols; let i = index"
      >
        {{col}}
      </th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of rowSelectionTable.data">
      <td *ngFor="let item of transDataCols">{{data[item]}}</td>
    </tr>
  </tbody>
</nz-table>

What should I do to allow sorting/filtering for all the columns?

Upvotes: 0

Views: 5065

Answers (1)

xingkong
xingkong

Reputation: 109

You can do it by setting the following properties on the th element:

<th
  nzShowSort
  nzSortKey="{{col}}"
  nzShowFilter
>
</th>

Upvotes: 1

Related Questions