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

Amit Haim picture Amit Haim · Oct 10, 2017 · Viewed 19.7k times · Source

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.

Answer

Randi Ratnayake picture Randi Ratnayake · Oct 11, 2017

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>