Ngx-datatable: Custom Header Row

Created on 17 Oct 2018  路  3Comments  路  Source: swimlane/ngx-datatable

i am wondering how i can add custom row to header ?
i want put my filters inside the table header so i want in below the header labels

Most helpful comment

The above seems to be outdated.
Updated link for people interested: https://swimlane.github.io/ngx-datatable/#templateref

Example:
HTML

<ngx-datatable
    [rows]="rows"
    [columns]="columns"
    ...insert table stuff
  >
</ngx-datatable>
<ng-template #customId let-column="column">
  <strong>{{ column.name }}</strong>
</ng-template>

TS

@ViewChild("customId ", { static: true }) customHeader: TemplateRef<any>;
this.columns = [
      { headerTemplate: this.customHeader, name: "Column" }
]

All 3 comments

I would think you could use this and build a custom column header for each column

You have to add ng-template with ngx-datatable-header-template code block inside ngx-datatable-column

Here is example

<ngx-datatable-column> <!-- Column 1-->
      <ng-template let-column="column" **ngx-datatable-header-template**> 
        <div>header text or div or what ever you want include here</div>
      </ng-template>
</ngx-datatable-column> 
<ngx-datatable-column> <!-- Column 2-->
      <ng-template let-column="column" ngx-datatable-header-template> 
        <div>header text or div or what ever you want include here</div>
      </ng-template>
</ngx-datatable-column> 

The above seems to be outdated.
Updated link for people interested: https://swimlane.github.io/ngx-datatable/#templateref

Example:
HTML

<ngx-datatable
    [rows]="rows"
    [columns]="columns"
    ...insert table stuff
  >
</ngx-datatable>
<ng-template #customId let-column="column">
  <strong>{{ column.name }}</strong>
</ng-template>

TS

@ViewChild("customId ", { static: true }) customHeader: TemplateRef<any>;
this.columns = [
      { headerTemplate: this.customHeader, name: "Column" }
]
Was this page helpful?
0 / 5 - 0 ratings