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?
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.