i am using ngx-datatable in my angular project. Columns are -> "Estimated Production Rate", "Wk1Rate", "WK2Rate", "WK3Rate".
I applied Wrapping for text using css so that to accommodate text - "Estimated Production Rate" within the header cell. Thus, Estimated Production Rate is displayed in 3 lines, whereas other column names are displayed in single line. headerheight is 'auto', text-align for the header cells are "center"
Problem - The texts - "Wk1Rate", "WK2Rate", "WK3Rate" - not vertically aligned within the header cell. these texts show at the top as shown in the image:
How can make these column to align vertically middle.? i tried vertical-align:middle, but not working. Please help.
html code for ngx-datatable:
<ngx-datatable class="material" [rows]="MyRows" [headerHeight]="'auto'" [footerHeight]="40"
[rowHeight]="37" [limit]="10">
<ngx-datatable-column name="Est Production Rate" [sortable]="false"
[width]="85">
<ng-template ngx-datatable-cell-template let-value="value">
{{value}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Wk1Rate" [width]="80">
<ng-template ngx-datatable-cell-template let-value="value">
{{value}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Wk2Rate" [width]="80">
<ng-template ngx-datatable-cell-template let-value="value">
{{value}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Wk3Rate" [width]="80">
<ng-template ngx-datatable-cell-template let-value="value">
{{value}}
</ng-template>
</ngx-datatable-column>
</ngx-datatable>