Standings

A sport-agnostic 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. Works for football, hockey, basketball, and any other sport the Sports API covers, adapting its columns to what each sport/competition actually supports.

<div data-component="fu-widget" data-content-type="standings" data-content-id="fb:c:1"></div>

Configuration Attributes

Columns

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

columns is a request, not a guarantee — any column a competition can't support is dropped even if explicitly listed:

• Hockey: drawn and form are always dropped (no ties; no match-event data source yet).
• Basketball: drawn, form, and goals are always dropped (no ties, no goal-based scoring).
• points vs. winPercentage: detected per competition, not per sport — if a group's standings carry no points stat at all (e.g. the Canadian Elite Basketball League, which ranks by win percentage), points is dropped and winPercentage (won / played, shown as .714) takes its place.
• form: only fetched when the competition's sport is "football" — there's no match-event data source for other sports yet.

<div
	data-component="fu-widget"
	data-content-type="standings"
	data-content-id="fb:c:1"
	data-standings-columns="played,won,drawn,lost,points"
></div>

Zone Colors & Labels

Zones come from each row's rules[] (competition-specific text from the Sports API), matched by normalized text to a known set of keys and auto-assigned a colour. data-standings-zone-colors/data-standings-zone-labels override just the keys you name — everything else keeps its auto-assigned colour and built-in locale label.

<div
	data-component="fu-widget"
	data-content-type="standings"
	data-content-id="fb:c:1"
	data-standings-zone-colors='{"championsLeague":"#1565C0"}'
	data-standings-zone-labels='{"championsLeague":"UCL"}'
></div>

Multi-Group Competitions

Single-table competitions ignore data-standings-groups-view entirely.

Global Configuration

Set defaults for all Standings widgets in FuWidget.init():

FuWidget.init({
	// ... other config
	standings: {
		showHeader: true,
		showRankChange: true,
		showLegend: true,
		columns: ["played", "won", "drawn", "lost", "goals", "points"],
		groupsView: "overview",
		zoneColors: { championsLeague: "#1565C0" },
		zoneLabels: { championsLeague: "UCL" },
	},
});

Examples

Non-Football Sport (Hockey)

<div data-component="fu-widget" data-content-type="standings" data-content-id="hk:c:1499" data-standings-show-legend="false"></div>
<!-- Renders played/won/lost/goals/points — "drawn" and "form" are dropped
     automatically since hockey doesn't support either. -->

Highlighted Team and Rank Window

<div
	data-component="fu-widget"
	data-content-type="standings"
	data-content-id="fb:c:1"
	data-standings-highlighted-competitor-ids="fb:t:8104"
	data-standings-range-start-rank="1"
	data-standings-range-end-rank="4"
></div>

Features

• Sport-aware columns — unsupported stats (e.g. "drawn" for hockey) are dropped automatically, even if explicitly requested
• Data-driven "win percentage" fallback for competitions that rank by win/loss record instead of points (e.g. CEBL)
• Zone highlighting with auto-assigned colours per competition, overridable via data-standings-zone-colors/data-standings-zone-labels
• Multi-group support (e.g. World Cup groups) with compact overview cards or full detailed tabs
• Recent team form (football only), with per-team hover tooltip
• Rank-window filtering (data-standings-range-start-rank/data-standings-range-end-rank) and rank-movement badges