EnCiv / undebate-ssp

Undebate Self Service Portal- Web portal where election administrators of democratically run organizations create undebates for their candidates and voters
Other
6 stars 9 forks source link

Make columns sortable #199

Closed mattwinne closed 2 years ago

mattwinne commented 2 years ago

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

ddfridley commented 2 years ago

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

mattwinne commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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