I am using Data grid and have a combination of numeric and 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 i.e. Header text on left and filter icon (Excel filter) on right side as it is aligned when we used data type as String. Need CSS
Hello Shobhana SuaraThank you for posting in our forum.
You can apply style to header row using "headerClasses".https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#headerclasses
<igx-grid #grid1 [data]="data" width="700px" height="300px" displayDensity="compact"> <igx-column field="Id" header="ID"></igx-column> <igx-column field="Name" header="Product Name" headerClasses="name-column-header"></igx-column> <igx-column field="Price" header="Price"></igx-column> <igx-column field="RegisteredDate" header="Registered Date"> <ng-template igxCell let-val> {{val | date:'yyyy/MM/dd'}} </ng-template> </igx-column> <igx-column field="IsActive" header="Is Active"></igx-column> </igx-grid>
::ng-deep { .name-column-header .igx-grid__th-title { color: red; text-decoration: underline; } }
Here is a sample application which uses the above codes.7888.igx-grid-column-styling.zip
Can u please reply.. it urgent.
Thanks your reply. I will answer you in more detail so please give me a time.
If you could send me your code, it will be more quickly.
Sincerely
Hello Motoki,
Pls find the sample project: https://stackblitz.com/edit/datagrid-alignment-issue-depknj
i want BeatsperMinute column to be aligned same as Name column (datatype String). Consistency in alignment for the whole grid.
Its a need of hour.. kindly provide resolution ASAP.
Thanks
Hello Shobhana Suara,Thanks for giving me the sample URL then I understood.
I added a "headerClasses" to target igx-column and some styles.
https://stackblitz.com/edit/datagrid-alignment-issue-bepjny
You can implement it using below.
::ng-deep { .reverseRow { flex-direction: row-reverse; .igx-grid__th-icons { flex-direction: row-reverse; } } }
please let me know if the problem persists. Thanks
Thank you Motoki for your help :) Could you let me know how can i left align the content of BeatsperMinute.
Also how can i left align header text for BeatsperMinute column. Let me know.
Sure, You can add "text-align" style like this.
::ng-deep { .reverseRow { flex-direction: row-reverse; text-align: left; .igx-grid__th-icons { flex-direction: row-reverse; } } }
If you want to change align to body cell, you can use "cellClasses".
https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#cellclasses
I fixed our sample, please check it out.
stackblitz.com/.../datagrid-alignment-issue-bepjny
Thank you so much Motoki... Appreciate your help. I wish all this can be included in document with examples so that we can use it as a guide