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

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.

5 thoughts on “Is it possible to change the ngx-datatable-column name?”

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

    Reply
  2. -> 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>
    
    Reply
  3. 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>
    
    Reply
  4. 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 }
    
    Reply

Leave a Comment