Standings

League/competition standings table — position, team, stats (played/won/drawn/lost/goals/points), zone highlighting (e.g. Champions League, relegation), rank-movement badges, and recent team form. Sport-agnostic: works for football, hockey, basketball, and any other sport the Sports API covers, adapting its columns to what each sport/competition actually supports.

Import

import { Standings } from "fansunited-frontend-components";
import { StandingsProps } from "fansunited-frontend-core";

Required props

Optional props

Columns

type StandingsColumnKey =
  | "played"
  | "won"
  | "drawn"
  | "lost"
  | "goals"
  | "points"
  | "winPercentage"
  | "form";

By default, all columns the competition's sport/data actually supports are shown, in the order above. columns lets you pick a subset — but it's a request, not a guarantee: any column the competition can't support is dropped even if you explicitly ask for it.

Sport-specific drops (unconditional):

points vs. winPercentage (data-driven, not sport-driven):

Some competitions rank teams by win percentage instead of an accumulated points total (e.g. the Canadian Elite Basketball League). The component detects this from the actual API response — if a group's standings carry no points stat at all, points is dropped and winPercentage (won / played, formatted like .714) is shown in its place. This is checked per competition, not assumed from the sport, since other leagues in the same sport may well report points normally.

Team form (form column): only fetched when the competition's sport is "football" — there's no match-event data source for other sports yet, so form never renders for them regardless of what columns requests.

Zone Colors & Labels

type StandingsZoneKey =
  | "championsLeague" | "championsLeagueQual"
  | "europaLeague" | "europaLeagueQual"
  | "uefaConferenceLeague" | "uefaConferenceLeagueQual"
  | "europaClPlayOff"
  | "relegation" | "relegationPlayOff" | "relegationPlayOffs"
  | "playOffs" | "possiblePlayOffs"
  | "promotion" | "promotionPlayOff"
  | "championshipGroup" | "europaClGroup" | "relegationGroup";

Zones come from each standings row's rules[] (competition-specific, free-form text from the Sports API). The component matches known rule text to the keys above by normalized text and assigns a colour automatically (primary/success/warning/danger, cycling if a group has more than four distinct zones) — but competitions can send arbitrary custom rule text too, which still gets a colour, just not a StandingsZoneKey you can target by name.

zoneColors / zoneLabels only override the keys they recognize; anything else keeps its auto-assigned colour and its built-in locale label.

<Standings
  entityId="fb:c:1"
  sdk={sdk}
  language="en"
  zoneColors={{ championsLeague: "#1565C0" }}
  zoneLabels={{ championsLeague: "UCL" }}
/>

Rank Range

interface StandingsRankRange {
  startRank?: number;
  endRank?: number;
}

Either bound can be omitted — startRank defaults to the first position, endRank to the last. Both are clamped to each group's actual rank range, so e.g. { endRank: 20 } on a 4-team group just shows all 4 instead of erroring or coming back empty.

<Standings
  entityId="fb:c:1"
  sdk={sdk}
  language="en"
  range={{ startRank: 1, endRank: 4 }}
/>

Multi-group competitions

Competitions with more than one named group (e.g. World Cup groups A–L) render differently depending on groupsView:

Single-table competitions (no named groups) ignore groupsView entirely and just render one table.

No logo fallback

If a competition has no logo asset, the header shows a generic trophy icon in its place instead of leaving the space blank.

Examples

Single-table league

import { Standings } from "fansunited-frontend-components";

<Standings entityId="fb:c:1" sdk={sdk} language="en" />;

Multi-group competition (detailed tabs)

<Standings
  entityId="fb:c:30"
  sdk={sdk}
  language="en"
  groupsView="detailed"
/>

Restricting columns and highlighting a team

<Standings
  entityId="fb:c:1"
  sdk={sdk}
  language="en"
  columns={["played", "won", "drawn", "lost", "points"]}
  highlightedCompetitorIds={["fb:t:8104"]}
/>

Non-football sport (hockey)

<Standings
  entityId="hk:c:1499"
  sdk={sdk}
  language="en"
  showLegend={false}
/>
// Renders played/won/lost/goals/points — "drawn" and "form" are dropped
// automatically since hockey doesn't support either.

Specific season and stage

<Standings
  entityId="fb:c:1"
  sdk={sdk}
  language="en"
  seasonId="fb:c:1:2024/25"
  stageId="fb:stg:142062"
/>