hello:
User said: Some column has sorting items left side some has right side.
https://pt-br.infragistics.com/products/ignite-ui-angular/angular/components/grid/sorting
I noticed it's because it's on the left it's string column, while number columns are on the right.
User is asking:
1) please keep sorting right side of header for all columns
I do not find anything option in the sdk: https://pt-br.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/isortingexpression.html
2) Please try to find way if we can keep sorting and filter in once cell, if not possible.
Can both of these be done?
Hello,
After an investigation, I have determined that the columns with data type number are aligned to the end, and this is why the sorting indicator is on the left of the header text.
To move the sorting indicator to the right side, you can apply the following CSS, which adjusts the alignment using justify-content: flex-end and sets order: 1:
.scss file:
::ng-deep {
.igx-grid__td--number .igx-grid-th__icons, .igx-grid-th--number .igx-grid-th__icons {
justify-content: flex-end;
order: 1;
}
Regarding your second question, the IgxGrid does not currently support placing both the sort and filter icons in the same exact location within a header cell by default. However, when using Excel-style filtering, the filter icon is positioned next to the header text—side-by-side with the sorting indicator—providing a cleaner, more unified layout:
<igx-grid . . [sortingOptions]="sortingOptions" [allowFiltering]="true" filterMode="excelStyleFilter">
I have prepared a sample, demonstrating the described behavior. Please test it on your side and let me know if you need any further information regarding this matter.
Regards, Monika Kirkova, Infragistics
What if I would like to replace the "more_vert" icon with "filter_alt" (https://fonts.google.com/icons?selected=Material+Symbols+Outlined:filter_alt:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=filter&icon.size=24&icon.color=%231f1f1f) icon in <igx-icon/> ?
This does not work
::ng-deep { .igx-grid-th__icons .igx-excel-filter__icon .material-icons.igx-icon { content: "filter_alt"; } }