Blazor DataGrid Example - Custom Sorting Logic
This example shows how to use the DataGrid custom sorting feature. In this section, the SortComparer property of columns is defined in DataGrid to implement custom sorting logic for Priority and Status columns.
Title Press Enter to sort | Priority Press Enter to sort | Status Press Enter to sort | Description Press Enter to sort |
|---|
| Harder to work during power-saving mode | 
High | In Progress | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Application crash on clicking save button |
High | In Progress | Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. |
| Transaction details are lost |
High | Completed | Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. |
| Working speed differs with different networks | 
Low | By Design | Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. |
| Does not handle Interrupts Properly | 
Critical | Completed | Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. |
| Takes more than 30 seconds to start |
High | In Progress | Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. |
| No progress indicator |
Critical | Completed | Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. |
| Words break when changing screen resolution | 
Normal | In Progress | Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. |
| Download files to a private data directory |
Critical | In Progress | Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. |
| Asking permission to access gallery |
Low | By Design | Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. |
The Blazor DataGrid Sorting feature allows to arrange the data in a specific order. Set the AllowSorting property to true to enable it. Simply click the column header to sort a DataGrid column.
Simply click the Priority or Status column in this demo, and the corresponding comparer function will be called; in the SortComparer function, we implement custom sorting logic.
More information on the Custom sorting feature can be found in this documentation section.