ngx Datatable update header dynamically

Question

I am using the component ngx-datatable in my angular app and I am trying to update the header texts dynamically. What I was trying was the following:

<ngx-datatable-column prop="day_1" name="{{day_1_header}}">

and updating the day_1_header property dynamically, but when I do so the change is never reflected. I have also tried adding a ViewChild and changing the name directly like so:

HTML:
<ngx-datatable-column #dataTable1 prop="day_1" name="{{day_1_header}}">
TS:
@ViewChild('dataTable1') dataTable1;
[..]
this.dataTable1.nativeElement.name = "test";

When I check the properties of my dataTable1 object the new name is set.

So can anyone tell me how to rerender/sync the datatable headers?

Thanks!

score 3 · Answer 1 · answered Jan 19 '18 at 10:55

3

Damn... Tried forever, asked the question and found a solution right away. It worked by adding an explicit header-template to the column like this:

<ngx-datatable-column>
      <ng-template let-column="column" ngx-datatable-header-template>
        {{day_1_header}}
      </ng-template>
</ngx-datatable-column>

Maybe it helps someone someday.

answered Jan 19 '18 at 10:55

Mike Äfer

467
1
8
15

yes indeed! Thank you for sharing this solution. This has saved me quite a bit time!. – Chuck Aug 09 '18 at 20:22

score 0 · Answer 2 · answered Dec 29 '22 at 15:27

I have no idea why the other answer (which seems pretty direct and logical) didn't work for me. Maybe breaking change in higher version.
This GitHub issue gives another perspective on how to achieve it. There's also this example in the source code that shows it.

Basically, you'll need the custom template for the column header

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

<!-- custom column header template -->
<ng-template #hdrTpl let-column="column"> <strong>Fancy</strong>: {{ column.name }} !! </ng-template>

Then access it in your component class with @ViewChild() decorated property.

export class TemplateRefTemplatesComponent {
  @ViewChild('hdrTpl', { static: true }) hdrTpl: TemplateRef<any>;

  rows = [];
  columns = [];

  ColumnMode = ColumnMode;

  constructor() {
  }

  ngOnInit() {
    // You'll need to map over all columns to use it in all
    this.columns = this.columns.map(columns => ({...columns, headerTemplate: this.hdrTpl});
  }
}

ngx Datatable update header dynamically

2 Answers2