Adding Sort Functionality to React Table

I recently created a React app that made it convenient to search for and catalog board games. For each of the collection pages, owned games and wishlist, there is a static table that displays a list of games. In order to improve the ability to find games, I wanted to add sorting functionality to the tables so the user can more easily find a desired game.

Here is the JSX that renders the basic table:

Since each table row is rendered by mapping through the local state of the component, all I need to do is modify the state and React will notice the change and re-render the table rows to match the new state order.

This is what the state in my component looks like:

Since I used Redux to manage my global state, I am pulling the games initially from that and setting sorted to initialize as false. The next thing I need to do is create the function that actually does the heavy lifting of sorting the games.

An important thing to consider is that the Javascript .sort() function is destructive, meaning that it will overwrite the initial array that it is sorting. With that in mind, I need to persist the unsorted array for when I want to revert the table back to the unsorted state. I do this by creating a new constant const unsorted = […this.props.userGames].

Next, I need to tackle the ordering and disordering. For sorting, I am using the Javascript .sort() function, which acts on an array to compare the items and return the reordered array. This reordered array is then used to set the new local state. For the disordered array, I simply need to set the state to the unsorted constant we assigned earlier.

This is the finished function (in this case, I am sorting by the game rank):

Finally, I need to create a button that I can use to invoke my new sorting function:

And that should do it! Here is the button in action:

I hope this helps anyone trying to do something similar.