Hello,
I am faced with a requirement to align the content of a specific cell and its corresponding header to the right side of the igx-grid.
Like this:
After going through the documentation and exploring various options within the igx-grid configuration, I haven't been able to identify a direct method to achieve this specific alignment requirement. I understand that the igx-grid offers a lot of customization options, but I'm uncertain if aligning individual cells and headers to the right side is directly supported out-of-the-box.
If this functionality is not currently supported, I would like to request it as a potential feature enhancement for a future release. Aligning content and headers to the right side can greatly improve the visual and functional aspects of certain data presentations.
If there are any workarounds, CSS techniques, or code snippets that could assist me in achieving this alignment, I would greatly appreciate your assistance in providing that information.
Thank you very much for your time and attention to this matter. I look forward to your response.
I have been looking into your question and what I could say is that by design the string columns are aligned to the left and the number columns to the right similar to the Excel behavior.
However, the alignment could be changed on application level by defining a header template in order to apply a proper CSS class and setting the required column cellClasses property to the same class as follows:
<igx-column field="ProductName" header="Product Name" [dataType]="'string'" [cellClasses]="rightAlignment" > <ng-template igxHeader let-column> <div class="rightAlign"> {{ column.header ? column.header : column.field }} </div> </ng-template> </igx-column>
.rightAlign{ text-align: end; justify-content: end; }
A small sample where the first column alignment is changed could be found here. Please test it on your side and let me know if I may be of any further assistance.
Sincerely,Teodosia HristodorovaSoftware Developer
Thank you! Im going to try this as soon as possible.
Please take your time and let me know if I may be of any further assistance.
Regards,Teodosia HristodorovaSoftware Developer