在 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>