It occurred to me that something very basic was missing from that previous post: the ability to sort the list of To-Do items by the columns in the display table. Given that Blazor is compiled to WebAssembly, and that I suck at Javascript, my go-to solutions like jQuery Datatables probably wouldn't work in a Blazor app (though to be fair, I haven't tried them).

So, why not do it myself, and learn a bit more about Blazor in the process? Come along with me as I take our sample Blazor project and refactor it to make the To-Do items table sortable.

The Sample Project

There's a sample project with the code in this post over on GitHub. Check it out!

You can also see it in the sample project on GitHub. (Please note that the sample project was coded against Preview 3 of .NET Core 3, and may not work with other previews. When Blazor goes full RTM, I will update the sample project to work against that version of .NET Core.)

From this baseline, we can start creating the HTML and C# that will allow us to sort this table.

Requirements

When we're done with this improvement, we want the following things:

The list of tasks is able to be sorted by Date and Description columns, in both ascending and descending order.

The first thing we need to do is make the Date and Description header text look like they are clickable, and the simplest way to do that is to make them look like links. Here's a CSS class which does just that:

Now, I know there is probably a better way to do this, but the fact is that I suck at CSS and this was the best I could come up with. If you've got a better way, let me know in the comments!

Now our issue is this: when the header sort links are clicked, what should happen? To solve that, we need a new method added to the @functions block:

@functions{
IList<ToDoItem> items = new List<ToDoItem>();
//We need a field to tell us which direction the table is currently sorted by
private bool IsSortedAscending;
//We also need a field to tell us which column the table is sorted by.
private string CurrentSortColumn;
...
private void SortTable(string columnName)
{
//Sorting against a column that is not currently sorted against.
if(columnName != CurrentSortColumn)
{
//We need to force order by ascending on the new column
//This line uses reflection and will probably perform inefficiently in a production environment.
items = items.OrderBy(x => x.GetType().GetProperty(columnName).GetValue(x, null)).ToList();
CurrentSortColumn = columnName;
IsSortedAscending = true;
}
else //Sorting against same column but in different direction
{
if(IsSortedAscending)
{
items = items.OrderByDescending(x => x.GetType().GetProperty(columnName).GetValue(x, null)).ToList();
}
else
{
items = items.OrderBy(x => x.GetType().GetProperty(columnName).GetValue(x, null)).ToList();
}
//Toggle this boolean
IsSortedAscending = !IsSortedAscending;
}
}
}

The method SortTable() should be run every time one of the header sort links is clicked. Therefore we need a delegate which runs that method, to which we must pass the name of the property we are sorting by (which is not necessarily the display name of the table column). That looks like this:

Except, which column is currently being sorted by? There's no obvious indicator of such a thing. Let's build one.

The Indicator

What I want now is a little arrow icon to be displayed next to the column header which the table is currently being sorted by. This example will use FontAwesome's icons for the arrows, so if your project doesn't already have FontAwesome you will need to include it.

The first issue we have is: which column needs the icon? We've already solved that by using a CurrentSortColumn property on our page. And because we have a IsSortedAscending boolean property, we know which direction the sort is currently going. All we need do now is combine those properties with some onclick delegates and a little CSS, which gets us this:

Drawbacks

At time of writing, Blazor does not support partial views. The moment it does, I will be able to make this solution much more friendly to maintain, but for now this will have to do (and it's pretty good for something that was experimental a few weeks ago).

Also, I will freely admit that I am a terrible front-end programmer and there's probably a much better way to do this with Blazor. That said, I fully believe solving little problems like this one is a FANTASTIC way to learn about a framework or system in a more comprehensive fashion. We can always come back later to make it better.

Summary

Our system is now able to sort the To-Do items by Date and Description. Each column can be sorted independently, and either in ascending or descending order. Finally, we have little arrow icons to indicate which direction the sorting is using.

The most important thing, though, is we got a little more experience using Blazor. I, for one, cannot friggin wait until Blazor is a full-fledged member of .NET Core. C# in the browser? Sign me up!