3.4 Sorting the Table

In this lesson, let's add the ability to sort the table by clicking on a column. Now, I'm inside the HarEntryTable.jsx, and to start off what I'll do is create a function called renderHeader, which will render the column header for the table. Here, I'll create a custom column header, and also handle the click on the column. I'll also put a icon on the column itself which will indicate the direction of the sort. If you click the column repeatedly it'll cycle through the different sort directions which is ascending, descending, and then resetting the sort itself. The sort direction icon will be handled by the sort class. Let's put a placeholder for now, and we'll look at this a little later. Now the click handler for this column is handled by the columnClicked function. Now in sort of handling the sort right inside the handler, I'll instead fire a callback and let my parent component which is HarViewer know that a particular column was clicked for sort. The way to communicate back with the HarViewer would be through the callback function which I'll make a property of the har entry table. I'll call this callback as onColumnSort. I'll also pass in the direction of the sort so that the parent component can do the right thing. For now I'll leave the direction as ascending. So, to make this a valid property of the HarEntryTable we'll add it to the default props. The results are good practice to set the data types for the properties we have on the component. This allows the React to do a type check anytime we set the values of these properties. So here in this case the entry is an array and the on column sort is a function. These data types are actually defined on React itself, so let's get it from there. So, all of this first time to basically create a custom render for the header, and now that we have it, let's set it on the column with the HeaderRenderer property. Align to the other columns, as well. So with that, let's see how our columns look. Let's pick a Har file, and there you have it. Columns with custom headers, and also with the sort directions for each of the columns. I'm gonna add a minor cosmetic change over here, so that when you move your mouse on the header it will change to a pointer. So for that, let's make a Sass file and then for the .sortable class, I'm gonna add the cursor as pointer. And let's also add the sass file as a dependency of the HarEntryTable. And with that change we should have a pointer when you move your mouse on the column. So at this point we are finding the callback from the HarEntryTable, but the HarViewer still needs to handle it, so let's go ahead and fix that. Let's attach our callback function which will be to the onColumnSort property, and let's just call it _onColumnSort. Now our handler itself is gonna be pretty straightforward. This takes in the column on which the sort happened and also the direction of the sort. And all you are going to do over here is simply set the state on the HarViewer. When you set the state it internally calls the render function and that's where it will actually do the sort. So here, let's just set the state. Now we're introducing two new straight properties over here, so let's make sure we add it to the initial state. So that will be the sortKey and the sortDirection. And as I mentioned earlier, the sorting itself will be handled inside the render function, which in this case is the renderViewer. Instead of doing the sort right inside over here, I'll create a separate function and pass it the current entries, the sortKey, and the sortDirection. And let's do all of the sort over there. Let's call this function sortEntriesByKey. So, this function takes in our sortKey, the direction, and also the entries, and sorts based on the given column. The only thing special over here is that the sortKey that it is parsed in is the key of the column and the property on which we actually need to sort is buried a little deeper inside the row object. So, I'll create a separate keyMap for that and look up the value accordingly. To do the actual sort I'm gonna rely on _sortby function and postive callback which will be used to look up the value from the keyMap. This will be our getValue function, which we'll simply use to sortKey and look up the corresponding value from the entry object. By default, _sortByFunction always sorts in the ascending order. To do it in the descending order, we'll simply reverse the array and then return the sorted entries. So that takes care of sorting the entries. Now in the rendered viewer we're going to sort the entries and then give it back to the HarEntryTable, as you can see over here. Now back in the HarEntryTable I'm going to make some cosmetic changes to the header. This will be the sort icon and we'll change that based on the sort direction. So here I'm simply making changes to the sortClass based on the sortDirection. So this will take care of showing the proper icon as you click on the column and change the sort direction. The one thing missing over here is the actual tracking of the sort direction for each column. So let's do that by creating a state property. I'm going to call it sortDirection, and then track the directions independently for each column. Now when I click on a column we'll be cycling through different sort orders. We'll start out with a natural order. And when you click on the column again, it'll switch to the ascending order, then to the descending, and then going back to natural order. So you can see the cycling being done in the following statements here. Now for this table we're gonna allow sort only on one column at a time. So we'll reset the sorts on all the columns, and then on the column on which you clicked, we'll set the sortDirection based on the currently selected order. And also let's fix the typo with our cycling order code over here. It needs to be else if instead of a plain if. So, with all these changes let's go back and visit our browser to see if things are still in shape. Let's select the Har, and as we click on the column you can see the sorting happening by that column. And also, as you click repeatedly, we'll cycle through the various sort orders. That takes care of sorting for the HarEntryTable. And the way we have done it is by filing a callback from the column handler which then files into the HarViewer, which actually does the sorting and then research the entry on the HarEntryTable. Now, you'll see that this is a pretty common pattern in React apps. The child simply handles the event and surfaces the event through a callback to the parent component. The parent component actually does the work and then changes the data on the child. All right, in the next lesson we'll focus on filtering the HarEntryTable. See you there.