在 ngx-datatable 中顯示帶有列名的圖標

Question

我在我的 Angular 6 項目中使用了ngx-datatable ，我需要顯示一個帶有列名的圖標，如下面的屏幕截圖所示。（在我需要顯示圖標的地方標記為x ）

這是我當前的數據表代碼。

<ngx-datatable
   *ngIf="!isDataLoading"
   class="data-table"
   [scrollbarH]="true"
   [rows]="rowsData"
   [columnMode]="'force'"
   [columns]="columnsData"
   [headerHeight]="50"
   [footerHeight]="50"
   [rowHeight]="'auto'"
   [limit]="10"
   [selected]="selected"
   [selectionType]="'single'"
   (select)='onSelect($event)'>
</ngx-datatable>

在 mypage.component.ts

columnsData = [
   { prop: 'dataName', name: 'Name' },
   { prop: 'dataGender', name: 'Gender' },
   { prop: 'dataCompany', name: 'Company' }
];

如何顯示帶有列名的圖標？

Answer 1

你可以像這樣使用 ngx-datatable-column 標簽：

<ngx-datatable-column prop="dataName">
  <ng-template
    let-column="column"
    ngx-datatable-header-template>

    // Your Icon Tag Here
    <img src="assets/icons/your_icon.png" alt="Icon" />
    <span>
      dataName Header Text
    </span>

  </ng-template>
</ngx-datatable-column>