Set title attribute when using ngx-datatable

Question

We would like to use the title attribute to add a tooltip. Currently the title popup when you hover over the header is the same as the header text.

I have found other examples of setting the title attribute on a table header that apply to earlier versions of Angular but would like to know how to do this using the ngx-datatable.

columns = [
  { prop: 'TIME_OF_CALL'      , name: "Time" },
  { prop: 'CALL_STATUS'       , name: "Call Status" },
  { prop: 'CG_PTY_NUM'        , name: "From" },
  { prop: 'ACTUAL_CD_PTY_NUM' , name: "To" },
  { prop: 'COMMON_CD_PTY_NUM' , name: "Common Number" }
];

<ngx-datatable
  class='material'
  [columns]="columns"
  [columnMode]="'force'"
  [headerHeight]="50"
  [footerHeight]="50"
  [rowHeight]="'auto'"
  [limit]="10"
  [rows]='rows'>
</ngx-datatable>

Monica L Monica L · Accepted Answer · 2018-01-19T17:05:47

For me something like this does work:

<ngx-datatable-column [flexGrow]="1" prop="TIME_OF_CALL">
                    <ng-template ngx-datatable-header-template let-column="column">
                        <span title="the tooltip">Time</span>
                    </ng-template>
</ngx-datatable-column>

Apparently ngx-datatable-column doesn't support the title attribute. Also, when you use ng-template there is no title so I had to add the span.

Set title attribute when using ngx-datatable

1 Answers