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
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" }
]
Most helpful comment
The above seems to be outdated.
Updated link for people interested: https://swimlane.github.io/ngx-datatable/#templateref
Example:
HTML
TS