ng-environment-setup/templates/components/table/table.component.html

ng environment setup

<!-- ng-zorro-antd version 9.0.0 -->
<nz-table
  class="page-table"
  #nzTable
  [nzData]="tableData.data || []"
  [nzFrontPagination]="tableData.frontPagination || true"
  [nzTotal]="tableData.total"
  [(nzPageIndex)]="tableData.pageIndex"
  [(nzPageSize)]="tableData.pageSize"
  [nzShowPagination]="tableData.showPagination || true"
  [nzPaginationPosition]="tableData.paginationPosition || 'bottom'"
  [nzBordered]="tableData.bordered || false"
  [nzWidthConfig]="tableData.widthConfig || []"
  [nzSize]="tableData.size || 'default'"
  [nzLoading]="tableData.loading || false"
  [nzLoadingIndicator]="tableData.loadingIndicator"
  [nzLoadingDelay]="tableData.loadingDelay || 0"
  [nzScroll]="tableData.scroll"
  [nzTitle]="tableData.title"
  [nzFooter]="tableData.footer"
  [nzNoResult]="tableData.noResult"
  [nzPageSizeOptions]="tableData.pageSizeOptions || [ 10, 20, 30, 40, 50 ]"
  [nzShowQuickJumper]="tableData.showQuickJumper || false"
  [nzShowSizeChanger]="tableData.showSizeChanger || false"
  [nzShowTotal]="tableData.showTotal || total"
  [nzItemRender]="tableData.itemRender"
  [nzHideOnSinglePage]="tableData.hideOnSinglePage || false"
  [nzSimple]="tableData.simple"
  [nzVirtualItemSize]="tableData.virtualItemSize || 0"
  [nzVirtualMaxBufferPx]="tableData.virtualMaxBufferPx || 200"
  [nzVirtualMinBufferPx]="tableData.virtualMinBufferPx || 100"
  [nzVirtualForTrackBy]="tableData.virtualForTrackBy"
  (nzPageIndexChange)="indexChange($event)"
  (nzPageSizeChange)="sizeChange($event)"
  (nzCurrentPageDataChange)="dataChange($event)"
  (nzQueryParams)="params($event)">
  <ng-template #total>
    <span class="color-999 mg-r8">共{{tableData.data.length}}条</span>
  </ng-template>
  <thead>
    <tr *ngFor="let columns of tableColumns">
      <ng-container *ngFor="let c of columns">
        <th
        *ngIf="c.thShowCheckbox"
        [nzShowCheckbox]="c.check ? !!(tableData.data.length) : c.thShowCheckbox"
        [nzDisabled]="c.thDisabled"
        [nzIndeterminate]="c.check ? checkData.hasChecked : c.thIndeterminate"
        [(nzChecked)]="c.check ? checkData.allChecked : c.thChecked"
        (nzCheckedChange)="c.check ? checkAll($event) : c.thCheckedChange($event)"
        [nzShowRowSelection]="c.check ? !!(tableData.data.length) : c.showRowSelection"
        [nzSelections]="c.check ? checkData.selection : c.selections"
        [nzWidth]="c.width"
        [nzLeft]="c.left || false"
        [nzRight]="c.right || false"
        [nzAlign]="c.align"
        [nzBreakWord]="c.breakWord || false"
        [nzEllipsis]="c.ellipsis || false"
        [ngClass]="[c.thClass || '']"
        [attr.colspan]="c.colspan"
        [attr.rowspan]="c.rowspan">
          <ng-container *ngTemplateOutlet="c.thTemplate ? customTpl : thTpl; context: { $implicit: c, type: 'th' }"></ng-container>
          <ng-template #thTpl>
            <span [innerHtml]="c.thRender ? sanitize.bypassSecurityTrustHtml(c.thRender(c)) : c.label"></span>
          </ng-template> 
        </th>
        <th
        *ngIf="!c.showCheckbox"
        [nzShowSort]="c.showSort"
        [nzSortFn]="c.sortFn"
        [nzSortDirections]="c.sortDirections || ['ascend', 'descend', null]"
        [(nzSortOrder)]="c.sortOrder"
        (nzSortOrderChange)="c.sortOrderChange($event)"
        [nzShowFilter]="c.showFilter"
        [nzFilterFn]="c.filterFn"
        [nzFilters]="c.filters"
        [nzFilterMultiple]="c.filterMultiple || true"
        (nzFilterChange)="c.filterChange($event)"
        [nzWidth]="c.width"
        [nzLeft]="c.left || false"
        [nzRight]="c.right || false"
        [nzAlign]="c.align"
        [nzBreakWord]="c.breakWord || false"
        [nzEllipsis]="c.ellipsis || false"
        [nzColumnKey]="c.columnKey"
        [ngClass]="[c.thClass || '']"
        [attr.colspan]="c.colspan"
        [attr.rowspan]="c.rowspan">
          <ng-container *ngTemplateOutlet="c.thTemplate ? customTpl : thTpl; context: { $implicit: c, type: 'th' }"></ng-container>
          <ng-template #thTpl>
            <span [innerHtml]="c.thRender ? sanitize.bypassSecurityTrustHtml(c.thRender(c)) : c.label"></span>
          </ng-template> 
        </th>
      </ng-container>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let item of tableData.data">
      <tr
      [class.active]="tableData.active === item.id"
      (click)="changeActive(item.id)">
        <td
        *ngFor="let c of realColumns"
        [nzShowCheckbox]="c.check || c.showCheckbox"
        [nzDisabled]="c.disabled"
        [nzIndeterminate]="c.indeterminate"
        [(nzChecked)]="c.check ? checkData.ids[item.id] : c.checked"
        (nzCheckedChange)="c.check ? refreshStatus() : c.checkedChange($event)"
        [nzShowExpand]="c.showExpand"
        [(nzExpand)]="c.expand"
        (nzExpandChange)="c.expandChange($event)"
        [nzLeft]="c.left || false"
        [nzRight]="c.right || false"
        [nzAlign]="c.align"
        [nzBreakWord]="c.breakWord || false"
        [nzEllipsis]="c.ellipsis || false"
        [nzIndentSize]="c.indentSize"
        [ngClass]="[c.class || '']">
          <ng-container *ngTemplateOutlet="c.template ? customTpl : tdTpl; context: { $implicit: item, column: c, type: 'td' }"></ng-container>
          <ng-template #tdTpl>
            <span [innerHtml]="c.render ? sanitize.bypassSecurityTrustHtml(c.render(item)) : item[c.value]"></span>
          </ng-template> 
        </td>
      </tr>
      <tr [nzExpand]="item.expand || item.nzExpand">
        <ng-container *ngTemplateOutlet="item.expandTemplate ? customTpl : expandTpl; context: { $implicit: item, type: 'expand' }"></ng-container>
        <ng-template #expandTpl>
          <span [innerHtml]="item.expandRender ? sanitize.bypassSecurityTrustHtml(item.expandRender(item)) : item.expandText"></span>
        </ng-template> 
      </tr>
    </ng-container>
  </tbody>
</nz-table>