ComponentsData display

Standings table

A ranking table for any league or ladder — sports, esports, quiz nights, debating, sales contests. Position, side, played / won / drawn / lost, score difference and points by default, with configurable columns, your own side highlighted, promotion or play-off lines with a legend, a compact top-N view and an optional form guide.

HTML table with row headers components/standings-table.tsxtheme · material · accent · density · font

North League after round 9
Position	Team	Played	Won	Drawn	Lost	Score	Difference	Points
1	Elmwood	9	7	1	1	21:8	+13	22
2	Northgate (your team)	9	6	2	1	18:9	+9	20
3	Lakeside	9	5	2	2	16:11	+5	17
4	Riverside	9	4	3	2	14:12	+2	15
5	Stonebridge	9	4	1	4	13:13	0	13
6	Harbour Town	9	3	2	4	11:14	−3	11
7	Westfield	9	2	2	5	9:16	−7	8
8	Hillcrest	9	0	3	6	5:24	−19	3

Promotion
Relegation

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { StandingsTable } from "@vamos-ui/react";

<StandingsTable
  caption="North League after round 9"
  rows={rows}
  highlight="northgate"
  zones={[{ after: 2, label: "Promotion" }, { after: 7, label: "Relegation", tone: "muted" }]}
/>

Short headers (P, W, D, L, Pts) are visible; screen readers hear the full column names.

Numbers use the locale formatter; negative differences use a true minus sign.

Examples

Compact (top three + your row)

limit keeps the top rows and the highlighted side, with a dashed gap rule; fits a sidebar or a home page.

North League, top three and Harbour Town
Position	Team	Played	Difference	Points
1	Elmwood	9	+13	22
2	Northgate	9	+9	20
3	Lakeside	9	+5	17
6	Harbour Town (your team)	9	−3	11

Custom columns

Built-in keys mixed with your own column definitions; points passed directly.

Autumn debating ladder
Position	Society	Played	Won	Lost	Ballots won	Points
1	Meridian Society	6	5	1	15	10
2	Oak Hall	6	4	2	13	8
3	Granite Union	6	2	4	8	4
4	Fernside	6	1	5	5	2

API

StandingsTable

Prop	Type	Default
`rows` In ranked order: { id?, side, position?, played?, won?, drawn?, lost?, for?, against?, points?, form?, …your own fields }.	`StandingRow[]`	`—`
`caption` Names the table (visually hidden).	`string`	`—`
`columns` Keys: played, won, drawn, lost, for, against, score (F:A), difference, points — or { key, label, short?, value(row), numeric?, hideBelow? }.	`(StandingsColumnKey \| StandingsColumn)[]`	`["played", "won", "drawn", "lost", "difference", "points"]`
`highlight` Row id (or string side) to emphasise; gets aria-current and a spoken "your team".	`string`	`—`
`zones` A rule under a position plus a legend entry (accent solid or muted dashed).	`{ after, label, tone? }[]`	`—`
`limit` Top N rows plus the highlighted row.	`number`	`—`
`showForm` Form guide column (lg and up). Default: when any row has form.	`boolean`	`—`
`pointsPerWin / pointsPerDraw` Used when a row has no points.	`number`	`3 / 1`
`labels` Dictionary namespace "standingsTable": column names and short forms, side, form, current.	`Partial<StandingsTableLabels>`	`—`
`…Table props` density, striped, stickyHeader, bordered …	`TableProps`	`—`

FormGuide

Prop	Type	Default
`form` Oldest first. role="img" named "Form: Win, Draw, Loss"; letters visible, so colour is not the only signal.	`("win" \| "draw" \| "loss")[]`	`—`
`size` Square size.	`"sm" \| "md"`	`"md"`
`labels` Namespace "formGuide": win, draw, loss, their short letters, form.	`Partial<FormGuideLabels>`	`—`

Spinner

Star rating