Make columns sortable

[mattwinne]

Sorts columns of candidate-table using react-table useSortBy function.

[ddfridley]

This is great! And I have a couple of requests:

• [x] Put the arrow in front of the column name rather than behind it. - because on the submissions page we have a chevron for filtering that is following the column name.
• [x] When sorting is not active, show a dim gray arrow. (no background around it)
• [x] When sorting is active make the arrow dark.
• [x] For a extra credit, would you like to try to apply this to app/component/submissions.js as well?

[mattwinne]

Implemented pretty close to your direction, but please let me know if you have any notes. Still some work to do on the submissions.js. Need to figure out how to update state / force a rerender whenever sorting is selected, so that the calcCornerClass function is called again. Without doing so, the radius edges will be mixed in to the middle of the table.

[ddfridley]

It looks great. I see what you mean about the rounded corners in submissions though. Let me know if you want to talk through rerender strategies. Sometimes I just increment a counter and pass it as a prop to the thing I want to rerender. The thing doesnt have to do anything with it. But that's just one tactic.

[mattwinne]

UPDATE: I coded up the strategy you mentioned, but it didn't solve the rounded corners. I realized the issue actually isn't necessarily with rerendering but the rounded corner calculation logic. As shown in the TableCell component, the calcCornerClass function is called utilizing the row order from the filterRows column property of react-table. That provides the ordering of the rows in both filtered and unfiltered conditions.

To get it working, I think we just need to provide the function the order of sorted rows whenever sorting is active, similar to how it currently done with filtering. I'm just having trouble accessing the sorted row order. Luckily, according to the react-table docs, there is a rows property within the "table instance properties" (vice column properties which filterRows is in) that provides an array of the rows in the sorted order.

Right now, I'm just trying to figure out how to access that property and make it accessible within the TableCell component, which is currently only receiving value, column, and row Props.

[mattwinne]

That should do it, but please let me know if you see any issues. Simple fix in the end.