Показать значок с именем столбца в ngx-datatable

Question

Я использую ngx-datatable в своем проекте Angular 6, и мне нужно показать значок с именем столбца, как на скриншоте ниже. (Отмечен как 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>