Looking for a client side sorting library for UI for static pages
Unanswered
White-throated Robin posted this in #help-forum
White-throated RobinOP
New to the react ecosystem and wondering if there is a sorting library that is plug and play all you need to do with define your key/values in
Zero JS needed all done via markup. I feel like this is a very common use case but I can't seem to find a single library that does this? Asking before I go ahead and reinvent the wheel.
data-* attributes. Here's a very crude example of what I'm after:<button data-sort-target-id="students" data-sort-key="votes" data-sort-dir="asc">Popular</button>
<ul id="students">
<li>Lisa <span data-sort-key="votes">2</span></li>
<li>Bart <span data-sort-key="votes">1</span></li>
</ul>Zero JS needed all done via markup. I feel like this is a very common use case but I can't seem to find a single library that does this? Asking before I go ahead and reinvent the wheel.
30 Replies
Gray-tailed Tattler
Maybe expand on what you mean by all being done by markup. And you mean literally no-js?
React is a Javascript library/framework, sounds like you're wanting to work with it more like how HTMX or Alpine.js would do.
White-throated RobinOP
I managed to find https://listjs.com/ however the project is abandoned. Yes, like how Alpine.js works. My data is already SSR'd just looking for something to sprinkle on top that can modify DOM.
West African Crocodile
So have you finished your project?
I foolishly used jquery back in the day with a Vue app and years later still works fine. Just open yourself up to maintainability and reliability issues tho.
if you're using react, why not sort stuff in a react way
instead of trying to hack this into it?
it is a very common use-case, and for that use-case people use a react solution
for example
Gray-tailed Tattler
He’s already finished his project
But ya probably worth a rework if it’s critical to the success of the app
White-throated RobinOP
Yes I've finished but I'll take a look at tanstack table in the meantime thanks. From what I gather my "table" will be server side rendered on initial load then hydrated and become a client component when the page's js is done?
@Gray-tailed Tattler I foolishly used jquery back in the day with a Vue app and years later still works fine. Just open yourself up to maintainability and reliability issues tho.
White-throated RobinOP
Haha very true, when I was writing the question I was wondering how quick I could do this with just some jquery but not worth the headache.
Gray-tailed Tattler
for what it's worth, I would still discourage it. You get the chance to learn a more modern and powerful tool that you'll potentially leverage more of the features of later.
plus you get the maintainability, etc... we talked about above.
that tanstack table looks pretty sweet but i havn't used it. i'm sure there are less involved alternatives too
react ecosystem is pretty damn big
@Gray-tailed Tattler for what it's worth, I would still discourage it. You get the chance to learn a more modern and powerful tool that you'll potentially leverage more of the features of later.
White-throated RobinOP
Yep i'm a refugee from the traditional rails/laravel tech stacks who started looking at react because you guys get all the cool component libraries. I'm actually porting a rails app hence the weird edge case. Used Vue and Alpine sparingly in the past but the React ecosystem is just too dominant especially with their native mobile offerings.
@Gray-tailed Tattler that tanstack table looks pretty sweet but i havn't used it. i'm sure there are less involved alternatives too
White-throated RobinOP
Found https://ui.shadcn.com/examples/tasks and it looks very promising. My only worry is the table data is easily exposed as a json object to be easily scraped.
Gray-tailed Tattler
I'm a refugee from shadcn
lol mostly kidding. but i would say take "unopinionated" lightly
there are some cool components there. at the very least a lot can be gleaned from
i just spent a few days trying to square peg round hole the Radix UI navigation menu that the shadcn nav menu is based on, only to scrap it in the end and just build it myself in a much more flexible way
class variance authority is a cool little tool and i'm using it to build my own components
White-throated RobinOP
Oh haha I had issues with that too just gave up and grabbed something off tailwindui
CVA looks interesting
Gray-tailed Tattler
if it's just light sorting maybe try and roll your own. sometimes i just try down that path to see what i can learn, if it just gets overwhelming then i reach for something.
i can't tell you how many times just rolling my own has worked out just fine though.