Leaderboard
Ranked scores with movement since the last period, and the current user pinned even when they are nowhere near the top. A board you cannot find yourself on is a board you stop opening.
src/components/ui/leaderboard.tsxAbout
From the component's own source, where it was written.
A ranked table with the viewer pinned.
The current user's row is always rendered, even at rank 4,812 — pinned to the bottom with an ellipsis above it if they fall outside the visible page. A leaderboard that simply omits you is the one thing people check it for.
Ties share a rank and the next rank skips accordingly (1, 2, 2, 4), which is standard competition ranking. Numbering rows sequentially silently breaks ties in favour of whoever the sort happened to put first.
Install
npx astralyx-ui add leaderboard
Usage
import { LeaderboardTable } from '@/components/ui/leaderboard'
<LeaderboardTable entries={entries} limit={10} />Composer
Change the props and the source below follows.
- 1nightjarnightjar1184,920
- 2quillonquillon1172,338
- 3saltmarshsaltmarsh168,004
- 4vennvenn3149,112
- 5okraokra1141,806
- 6brackenfellbrackenfell138,221
- 7tollivertolliver2131,990
- 8meridianmeridian1128,450
- 9ashgroveashgrove1122,007
- 10castellancastellan2118,664
- ···
- 11youyouYou5041,220
<LeaderboardTable entries={entries} limit={10} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
LeaderboardTable
A ranked table with the viewer pinned.
Extends ComponentProps<'div'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| entries | LeaderboardEntry[] | required | { id, name, score, avatar?, previousRank?, isCurrentUser?, meta? }. Sorted here, so a caller cannot ship a board that is out of order. |
| limit | number | — | Rows shown before the current user is pinned. |
| scoreLabel | ReactNode | 'Score' | — |
| formatScore | (score: number) => ReactNode | — | For points, times, or currency. Defaults to a grouped number. |
| locale | string | 'en-GB' | — |
| rankHeader | ReactNode | '#' | — |
| playerHeader | ReactNode | 'Player' | — |
| currentUserLabel | ReactNode | 'You' | Badge on the viewer's own row. |
Types
LeaderboardEntry
| Field | Type | Description |
|---|---|---|
| id | string | — |
| name | ReactNode | — |
| avatar? | ReactNode | — |
| score | number | — |
| previousRank? | number | Drives the movement arrow. Absent means new to the board, which is drawn differently from "unchanged". |
| isCurrentUser? | boolean | Highlights the row, and pins it below the cut with its true rank when it falls outside limit. |
| meta? | ReactNode | — |
Behaviour
| Topic | Detail | Description |
|---|---|---|
| ties | shared rank | Equal scores share a rank and the next rank skips, which is how every sport does it. Two players in "3rd" are not 3rd and 4th. |