Sorting in Angular Grid component

17 Sep 20251 minute to read

Customize the appearance of sorting and multi-sorting icons in the Syncfusion Angular Grid component using CSS. Theme-based Syncfusion icons can be used as needed.

Customize the Grid Sorting Icon

Modify the sorting icon displayed in the Grid header by applying this CSS:

.e-grid .e-icon-ascending::before {
    content: '\e7a3'; /* Icon code for ascending order */
}
.e-grid .e-icon-descending::before {
    content: '\e7b6'; /* Icon code for descending order */
}

Here, .e-icon-ascending::before sets the icon for ascending order, and .e-icon-descending::before specifies the icon for descending order. Icon codes may vary by theme; refer to Syncfusion icon documentation for details.

Customize the Grid Multi Sorting Icon

Change the appearance of the multi sorting icon shown in grid headers when multiple columns are sorted:

.e-grid .e-sortnumber {
    background-color: #deecf9;
    font-family: cursive;
}

The .e-sortnumber class sets the background color and font for the multi sorting icon, enabling you to customize its appearance.