Show icon with column name in ngx-datatable

Question

I am using ngx-datatable in my Angular 6 project and I need to show an icon with column name as in below screenshot.(marked as x where I need to show the icon)

This is my current code for data-table.

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

in mypage.component.ts

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

How can I show an icon with column name?

score 6 · Accepted Answer · answered Sep 26 '18 at 06:59

You can use the ngx-datatable-column tag like so:

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

Show icon with column name in ngx-datatable

1 Answers1