Sorting in Angular Grid component

6 Sep 20221 minute to read

Customizing the Grid sorting icon

Use the below CSS to customize the Grid sorting icon which present in the Grid header. You can use the available Syncfusion icons based on your theme.

.e-grid .e-icon-ascending::before {
    content: '\e306';
}
.e-grid .e-icon-ascending::before {
    content: '\e304';
}

Customizing the Grid multi sorting icon

Use the below CSS to customize the Grid multi sorting icon which present in the Grid header. You can use the available Syncfusion icons based on your theme.

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