Pagination on leaderboards

[therungg]

The leaderboards have no pagination, and are sometimes 200+ users long, so that becomes a bit of a mess. They could use searching and pagination. See other tables with pagination and searching (eg tournament runs) for examples

[christofkern]

not sure what you mean by searching, since there is no current implementation of that anywhere?
additionaly I could not find any examples of pagination at the tournaments, so I implemented it on my own.

Searching is already implemented via the search game/user option, or do you have something different in mind?

[therungg]

There's a few places. A combination of search, sort, pagination is in components/tournament/tournament-runs.tsx.

I'd rather use the same implementation everywhere. I'd be down to refactor everything to use some library that does everything as per #3, but that would be a big refactor

[christofkern]

i agree, in the end if theres one table with pagination that works really well it can be copied quite easily, so I want to look into creating one with an external library and then after that can look into refactoring all tables/or make the one under
components/tournament/tournament-runs.tsx as a importable component, I dont really mind, since I like the looks of it, even though i dont understand why there are those "..." buttons that dont do anything.

Just tell me what you prefer, honestly :D im down for both

[therungg]

Those are to indicate there are more pages. But it appears to not work correctly when there are less than 5 pages. I'll investigate and make a seperate issue for that.

As for now, I think it's best to keep it uniform, and then do a complete refactor after some proof of concept later. That should be handled in #3 and is out of scope for this issue.

[christofkern]

also when filtering the text is behaving a bit weirdly, the numbers should be swapped I believe 🤣

[christofkern]

I just implemented it for the Event leaderboards, but in a way that it can be used everywhere basically, so kinda tackling #3 as well. All the functionality is there, searching, navigation, and working flawlessly, even debounced the search for 1s (so we dont permanently change the view, think #4 has this issue as well) The only thing im not too happy about is the positioning, cause I like it more if its under the table, but if the table gets too long its kinda annoying,
so the option would be:

• to hard limit the entries
• just do it under the table
• if there are more than 20 entries have it on top and on bottom
• leave it as it is

so maybe we can start a discussion what fits the best / what UI we want, but the functionality exists now 🤷 .

[christofkern]

https://github.com/christofkern/therun-frontend/tree/pagination_overhaul
if you want to try it out

[therungg]

Hey! Thanks so much for the effort. Your code looks great!

However, as I mentioned yesterday, I don't see the benefit in a new pagination solution. The point of this issue was to just reuse the current pagination logic that's used in other components, to avoid that there are simultaneously 2 seperate pagination solutions.

Afterward, in #3, it's the idea to completely overhaul every table with new pagination/searching/sorting, but to use a prebuilt solution, for example something like https://www.npmjs.com/package/react-data-table-component, which has every functionality we'd ever need and more out of the box.

Let me know your thoughts and how you view this :)!

[christofkern]

i agree, I just wasnt that aware of what is out there. Heres an implementation with the react data table component library.
it does not have a built-in search functionality as far as I can tell from the docs, but there is an example which does that as well.

In general it looks quite clean, and was very easy to implement. so why not :D