Sort by columns

[MinhxNguyen7]

(Above) ZotCourse sorting by enrolled count.

Part of #440

[ap0nia]

What's leaflet grid? The website is written with MUI, so ideally we'd use something natively offered by them:
https://mui.com/material-ui/react-table/#sorting-amp-selecting

MUI also has an advanced data table component that can be used instead of the basic one:
https://mui.com/x/react-data-grid/

Tanstack table is a headless table (i.e. it'll handle all the logic required for a table, but you bring your own table component) that you can investigate if you want complex data handling logic for the table:
https://tanstack.com/table/v8

Personally, I prefer handling data transformations on the server, e.g. sorting, filtering, etc. and defining a clear API to do that. The frontend would just need to send the corresponding query whenever its state changes.

[MinhxNguyen7]

Oops. I meant React Grid. I wrote this quickly while we were leaving the meeting and didn't check myself.

Server-side transformations make sense for filtering, but with ordering, people can switch it around by clicking once, so I think that would be a waste of bandwidth. The returned information is essentially the same. Then, I don't think that client-side caching on top of that would be a more elegant solution over the grid.

[ap0nia]

I definitely think that's valid because the app is primarily client-side driven.

My main priority for this feature would be to sufficiently scale down the complexity of the sorting; e.g. abstracting it away as a function outside of the component.

If complexity ever becomes an issue, I'd personally defer to server-side data handling because we can implement more sophisticated strategies without having to handle complex nested sorting on our side.

...A caveat to the point above is the existence of Fuse.js, which we can import into the React app to do the complex sorting/filtering/searching. The bundle size is already massive tho, so maybe not a good first choice 💀

[MinhxNguyen7]

React Grid seems to have that built in from a cursory look. I'll have to look into it

[ap0nia]

Ultimately, you can learn and work with whatever you'd like so you can get experience with a variety of libraries. You can gain a lot of valuable experience by learning how different APIs work and how they choose to integrate themselves into the React ecosystem.

With respect to the concrete direction of the project, I'd recommend sticking to anything natively supported by MUI. Aside from handling themes, colors, etc. more consistently across the website,
my biggest reason for this is that I believe you implicitly sign a contract with the MUI gods that you will defer to them for any and all UI from thenceforth lol. Using external UI libraries breaks this contract, and in return they will break your legs 💀 (jk).

Some of my thought process on choosing libraries vs. alternatives, i.e. @silevis/reactgrid vs @tanstack/react-table

• reactgrid was last published 8 months ago, and explicitly supports up to React-16 (the goal is to eventually migrate to React-18)
• implied by the notes above, the styles and theming may not match the rest of the website and it's a generally a pain to apply extremely specific styles like MUI to a third party
• reactgrid has 700 GitHub stars and 6K weekly downloads on NPM, vs. @tanstack/react-table which has 21K GitHub stars and 400K weekly downloads on NPM
• ^ I bring up tanstack because it's an extremely established namespace within JS land (e.g. you should undebatably be using tanstack query for all projects that have any API requests and server-side state requirements) and the table implementation is headless, meaning you can use your own components, e.g. MUI, to render the table.

Feel free to reach out on Discord if you wanna discuss more when you try out implementing this! This isn't meant to deter you from trying out different solutions; I just wanted to share some of my thought process when selecting libraries to use for projects.

[MinhxNguyen7]

Oh I think there's a misunderstanding. The "React Grid Component" is a MUI component. It's closely related to the table component that we're using now. I didn't intend to add another dependency.

Thanks for the advice though. I'll keep it in mind.

[KevinWu098]

Is this PR closable as not planned? IIRC a few weeks ago, we discussed it and concluded that sorting by columns doesn't have many, if any, use cases