How To Sort A Table In React (No Libraries)

[@JacoblBroughton]

Hey everyone, what would you guys like a video on next?

[@gguk3471]

thank you very much!

[@jewelthomas668]

Hello Jacob, really liked the way you explained things keeping the video precise. This video was all that i needed rn. Thank you😃

[@JacoblBroughton]

Thats great to hear. Thank you for watching man!

[@Dysfunctional704]

Nice vid Jacob! Can you try building a list, making its rows draggable? Something like React SortableJS

[@JacoblBroughton]

Thats a great idea, I actually just made that as a feature in a personal app i'm making haha. I'll put together a plan for a video, thanks!

[@RachelJohnson-sq3ci]

Hi Jacob! Thanks for this. Any chance you could share the code?

[@timgoens7617]

Okay, so this is a great video, short and sweet. However, it's still not working for me :( Here's my problem - the site I'm working on right now is basically nothing but tables. Like, 8/9 links on the navbar go to a page with tables. Some pages have multiple tables separated by tabs! So because of this, I needed a custom table component that I can just slap everywhere and the data and headers are dynamic based on the needs of each page. I put it together a few months back and was like, I'll add sorting later! It's got so much going on including dynamic styling based on the type of data I'm passing in. Since it's not a simple table like you have made I'm worried that part of the problem? Yours is the only success I've had, but it's still not correct. Basically, it takes two clicks on the header and what ends up happening is that it just reverses the order, but doesn't sort them. I don't know if you can help me at all, but I'd really appreciate any advice you can give me!

[@JacoblBroughton]

Hey, firstly thank you for watching! Regarding the first part of your issue - the double click - I would first add a useEffect to your component and put your toggle state in the dependency array to start to diagnose where your first click is going. That one is kind of hard to diagnose without seeing, but if you have a GitHub or something with that code in it I would be happy to take a look at it. Secondly - the sort order - by default sort() sorts by UTF16 character values, so your values may sort in unexpected ways (8 may sort to be higher than 1100, etc). I would look into the callback function that sort() expects and go from there. If you're sorting numbers, your sort() callback (sort((a, b) => a > b ? 1 : -1) will need to accommodate numbers. I doubt this will all fix your problem right away but hopefully it helps you get in the right direction, please let me know how it goes!