shadcn.io is not affiliated with official shadcn/ui
Leaderboard Table Block for Svelte
A running club's monthly distance ranking with shared places shown as T-2, a You row that is always in view, Top 5, Top 10 and Around me views, and a Your standing cell with the gap to the next place.
Installation
Overview
Rank people fairly and show them where they stand, with this leaderboard table for Svelte with Ark UI. A compact header names the board, and a band above it holds a three-way Toggle Group, Top 5, Top 10 and Around me. A native table ranks twelve runners from Pacebook, a running club, by kilometres in September, with the streak beside the distance. Ranking is the way a race does it: runners on the same distance share a place and the next place is skipped (1, 2, 2, 4), and a shared place is written "T-2". The runner called You is always in the table, in place when the view reaches them and pinned under the last rows when it doesn't, with the word "You" in an outline Badge, a bar at the row's start, a solid tint and aria-current. Around me shows two runners above and two below, with a "..." row that says how many are not shown. At the end, a Your standing cell gives the rank, the distance to the next place and the streak, divided from the table by a rule (above it on a phone). It's built from Toggle Group, Avatar, Badge and Guides, with a CSS entrance only. For club tables, sales leaderboards, game rankings and any list where equal scores must tie.
FAQ
How are ties ranked?
By competition ranking: a runner's place is one more than the number of runners strictly ahead of them. Two runners on 201.3 km are both second and the next runner is fourth, not third. rankOf does this from the distances, sharedOf finds the ties and the table writes "T-2" for them, with hidden text that reads "Tied, rank 2". Top 5 means places 1 to 5, so a tie at the edge keeps its members together and the view can show six rows.
How does Around me choose its rows?
It finds the runner marked you, takes two rows before and two after in ranked order and adds a "..." row at either end saying how many runners are not shown. The pinned You row in Top 5 and Top 10 comes from the same rule: if the view doesn't reach you, a gap row (when there is one) and your row are added under the last. Change you: true to another runner and every view, and the standing cell, follows.
What stays local, and how do I wire it to real data?
The twelve runners and the view are in the page; nothing is saved or requested. In your own app, send the rows already sorted, mark the signed-in user, and keep rankOf, rowsOf and the standing cell as they are. For a large board, rank and slice on the server, and send the rank and the count of hidden rows instead of every row.
Is it accessible?
Yes. It's a native table with a caption, th scope="col" heads and each rank as the row header. The view control has a name and takes the arrow keys, and a polite status line says how many runners are shown. The You row is marked in the markup with aria-current="true" and the word "You", not only by paint, and the gap row says "4 runners not shown" in plain text. The standing is a description list, so a screen reader reads each label with its value.
How does it look on a phone?
Your standing moves above the table, so the first thing you see is your place, and the table keeps all four columns without scrolling sideways: the avatars go and the distance and the streak get narrow columns. The view control spans the full width.
Does the block change height between views?
No. The table sits in a region as tall as ten rows, the most any view shows, and scrolls inside it if it ever needs more, so switching between Top 5, Top 10 and Around me leaves the standing cell and everything below in place. Shorter views leave a little empty space at the bottom of the region.