Utilizing ngx-datatable in my Angular project and the columns are named "Estimated Production Rate", "Wk1Rate", "WK2Rate", and "WK3Rate".
To accommodate the text "Estimated Production Rate" within the header cell, I have applied wrapping using CSS. This results in displaying Estimated Production Rate in 3 lines while other column names remain a single line. The header height is set to 'auto' and the text-align for the header cells is centered.
The issue arises with the texts "Wk1Rate", "WK2Rate", and "WK3Rate" which are not vertically aligned within the header cell as depicted in the provided image: https://i.sstatic.net/LBhm0.png
I have attempted to align these columns vertically middle by using vertical-align:middle but it did not work. Any suggestions on how to achieve this alignment would be greatly appreciated.
Here is the HTML code snippet showcasing 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>
For further demonstration and live editing, you can visit the stackblitz here: stackblitz