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"; } }
The excel style filtering icon could be changed by using the setIconRef method of the IgxIconService. This could be achieved as follows:
constructor(private iconService: IgxIconService) {
iconService.setIconRef('more_vert', 'default', {
name: 'filter_alt',
family: 'material',
});
More information could be found in the following topic of our documentation. Please test it on your side and let me know if you need any further information regarding this matter.
hi:
Thanks. it works on v19 or above only
Any idea, how to make it work in v17?
Starting with version 18.1.0 of Ignite UI for Angular,
Another way to re-template the Excel style filtering icon in the column header is by using the igxExcelStyleHeaderIcon directive:
<igx-grid ...>
<ng-template igxExcelStyleHeaderIcon>
<igx-icon>filter_alt</igx-icon>
</ng-template>
</igx-grid>
Please test it on your side and let me know if you need any further information regarding this matter.