Is it possible to change the ngx-datatable-column name?

Question

I am building an angular2 web application and I have a ngx-datatable element. The columns (header) names are numbers.

Is there any way that I can edit those names in view?

After search I could not find a lot of information about ngx-datatable-column, and even the resources that was about ngx-datatable-column, didn't show the possibility of changing the column name even in code.

Solution 1

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>

Solution 2

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 }

Solution 3

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

Solution 4

• Assigning custom names to table
• changing createdOn columnName to Created Date

NOTE: prop(createdOn) sets in value

<ngx-datatable-column class="bootstrap" name="Created Date" prop="createdOn">                                               
    <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
         {{value}}
    </ng-template>
</ngx-datatable-column>

View more solutions

Comments

[Sunil Kumar]

so simple, yet took me hours to find the right answer.