Ngx-datatable: Column display label different from column name

[mmrath]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here

Current behavior

No way to provide different column name and display label. Templates can work as a workaround but not convenient.

Expected behavior

We should be able to provide a display label different from column name. Because backed services send data which is closer to an identifier e.g. exchangeRate but in UI you would display it as 'Exchange Rate'.

Column name should be used to look up value for cell whereas displayLabel should be used for header.

Reproduction of the problem

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Table version: 0.7.x
  

• Angular version: 2.0.x
  

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[shattar]

Can't you use 'prop' to specify the property name. I think what you want is already supported.

[mmrath]

Yes I think it is already supported. Just that I was not aware of it.

[andrew-kuzovov]

And how to use that prop?
I'm really surprised there is no such property of ngx-datatable-column as "Label" or "Caption".
It's common scenario when you bind column to some object property and want to display other column title.

[DanielAlcaraz]

@andrew-kuzovov

You can define an array with N objects (1 x every row) and pass it to the columns. If you generate a custom datatable-column you can generate your column header with any value.

Object to columns property:

 gridColumns = [
        { id: "qa", label: "Codi", size: 1},
        { id: "rulename", label: "Nom Regla", size: 1 },
        { id: "path", label: "Camps on s'aplica", size: 2 },
        { id: "params", label: "Paràmetres de regla", size: 3 },
        { id: "criticality", label: "Criticitat", size: 1 }
   ];

In the [name] you pass the id and in the {{ col.label }} your custom and visible name for the column.
Component Template:

<ngx-datatable
        class="bootstrap"
        [rows]="rows"
        [columns]="columns"
        [columnMode]="'flex'"
        [sortType]="'single'"
        [footerHeight]="50"
        [rowHeight]="33"
        [sortType]="'single'"
        limit="10"
        (sort)="onSort($event)">
        <ngx-datatable-column *ngFor="let col of columns" [flexGrow]="col.size || 1" [name]="col.id" [sortable]="true" [canAutoResize]="true" [draggable]="true" [resizeable]="true">
            <ng-template ngx-datatable-header-template let-sort="sortFn">
                <span (click)="sort()">{{ col.label }}</span>
            </ng-template>
        </ngx-datatable-column>
</ngx-datatable>

The same with the sort() event for custom headers.

[FigueiredoStable]

@andrew-kuzovov i have a same problem, but it's simple to use a prop option...

JSON
dummyData = [
{data1: 'Name1', data2: 'LastName1'},
{data1: 'Name2', data2: 'LastName2'},
{data1: 'Name3', data2: 'LastName3'}
]

In ngx-datatable cols config:

cols = [
{prop: 'data1', name: 'First Name'},
{prop: 'data2', name: 'Last Name'}
];

This should works.

[hesptech]

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

[hesptech]

the above code is just to show how to use label/column-title and prop properly