在ngx-datatable中显示带有列名的图标

时间:2018-09-26 06:39:13

标签: angular angular6 ngx-datatable

我在Angular 6项目中使用ngx-datatable,并且需要显示带有列名的图标,如下面的屏幕截图所示。(标记为 x ,我需要在其中显示图标)

enter image description here

这是我当前的数据表代码。

<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' }
];

如何显示带有列名的图标?

1 个答案:

答案 0 :(得分: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>