Sorting Customization in React Grid Component

18 Nov 20181 minute to read

The appearance of the sorting icons and multi sorting icons in the React Data Grid component can be customized using CSS. Available Syncfusion® icons can be used based on the active theme.

Customizing the grid sorting icon

The .e-icon-ascending::before and .e-icon-descending::before classes are used to style the sorting icons for ascending and descending order.

.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 */
}

Grid sorting icon

Customizing the grid multi sorting icon

The .e-sortnumber class is used to style the multi sorting icon.

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

Grid multi sorting icon