Is it possible to change the ngx-datatable-column name?
Documentation is very comprehensive for such matters.All samples and demo: http://swimlane.github.io/ngx-datatable/
You will see more types of option in this sample code.https://github.com/swimlane/ngx-datatable/blob/1883b3ac1284307bb3dafa4cb299aad6a90b3c10/demo/templates/template-dom.component.ts
What you are looking at is ngx-datatable-header-template
Option 1
<ngx-datatable-column name="Your Column Name"> <ng-template let-column="column" ngx-datatable-header-template> <span>{{column.name}}</span> </ng-template> <ng-template let-row="row" ngx-datatable-cell-template> {{row.DataField}} </ng-template></ngx-datatable-column>
Option 2
<ngx-datatable-column> <ng-template ngx-datatable-header-template> <span>Your Column Name</span> </ng-template> <ng-template let-row="row" ngx-datatable-cell-template> {{row.DataField}} </ng-template></ngx-datatable-column>
You can use the property name:
example:
columnsInput = [ { prop: 'Id' }, { prop: 'DeviceId', width: 280 },{ prop: 'LogTimeStamp', name: 'Log Time', width: 220 } ]
where columnInput
is the [columns] property in ngx-datatable
<ngx-datatable #table class='material' [columns]="columnInput" [rows]="rowInput" </ngx-datatable>
this will display something like:
header: [Id DeviceId Log Time]values: [1 111 12121]
Id/DeviceId/LogTimeStamp is actually the object you assign in the [rows]
, so for this example you row should be something like:
rowInput: { Id: 1, DeviceId: 111, LogTimeStamp: 12121 }
If you just want to see your own names for the column header in your view you can do it by setting both the properties called name and prop appropriately , see example below.
<ngx-datatable-column name="My Custom Column Header" prop="client"> <ng-template let-value="value" ngx-datatable-cell-template> <strong>{{ value.clientCode }} </strong> - {{ value.clientName }} </ng-template></ngx-datatable-column>
Please refer the Ngx datatable input documents for more details
Cheers !!