Hi,
I am using hierarchical grid and have a couple of numeric and a few string column in my object. When I am binding the numeric columns with data type as the number, it is also changing the alignment of the column header. I want the header as is and position of all the option like sort and filter icon should be consistent across the grid but just cell with numeric value get right align.
I tried ng-template and align the cell value but it's not working.
Can you please help here.
Thanks,Dev
I am unable to align the header and content of the grid using above answer. Could you please help me out. I want to align the header and content to left and filter icon to right as it is for datatype 'String'
i am unable to apply styles to header to right align as well content
Hello Mason,
The Columns Configuration section in my first response shows snippet for this as well, the ng-template looks very similar, but is decorated with an igxHeader directive instead. If you have already added this ‘.center-align’ class to your component CSS file, this is what the column declaration would look like:
<igx-column field="ProductID" header="Product ID" width="200px"> <ng-template igxHeader let-column> <div class="center-align" style="width: 100%;">{{ column.field }}</div> </ng-template> </igx-column>
Please note that if you want to style both the column cells and the headers, you would need to use the two snippets I have shown together, like this:
<igx-column field="ProductID" header="Product ID" width="200px"> <ng-template igxHeader let-column> <div class="center-align" style="width: 100%;">{{ column.field }}</div> </ng-template> <ng-template igxCell let-cell="cell"> <span class="igx-grid__td--number" style="width: 100%">{{ cell.value }}</span> </ng-template> </igx-column>
Feel free to contact me if you need any additional assistance.
I'm sorry, I meant to ask how you would apply a right-align to the headers without using the dataType property of the column?
If I were to apply a center-align rather than a right-align, I would use this class for the cellClasses input of the cell:
center-align { text-align: center; justify-content: center; }
But how would I achieve the center alignment for the header as well?
I also upvoted myself on accident since it's my first post here and was seeing what the buttons did
How would you apply the right-align to the headers as well?