@sportsdataverse/sdvtables gallery

AFC, 2024
Team	Division	Wins	Losses
KC	West	15	2
LAC	West	11	6
DEN	West	10	7
LV	West	4	13

AFC, 2024

KC	West	15	2
BUF	East	13	4
LAC	West	11	6
DEN	West	10	7

<SdvTable/>: the static table, and the same spec interactive

8 of 8 teams, page 1 of 2

AFC, 2024

BUF	East	525	368
DEN	West	425	311
LAC	West	402	301
KC	West	385	326

useTable: the engine and its snapshot in your own component

GT_ALIASES74 names; aliasFor("gt_color_pills").target is "c.colorPills"
sdvplotR / gtUtils	sdvtables	Status	Note
gt_sdv_logos	c.logo	ported
gt_sdv_wordmarks	c.wordmark	ported
gt_sdv_headshots	c.headshot	ported
gt_sdv_cols_label	labelHtml	not-ported	labels are text in Phase 4; use .titleHeader() or subheader
gt_merge_stack_team_color	c.mergeStackTeamColor	ported
gt_theme_sdv	theme.sdv	ported
gt_theme_sdv_team	theme.sdvTeam	ported
gt_theme_almanac	theme.almanac	ported
gt_theme_athletic	theme.athletic	ported
gt_theme_booktabs	theme.booktabs	ported
gt_theme_broadsheet	theme.broadsheet	ported
gt_theme_brutalist	theme.brutalist	ported
gt_theme_drench	theme.drench	ported
gt_theme_gtutils	theme.gtutils	ported
gt_theme_kenpom	theme.kenpom	ported
gt_theme_midnight	theme.midnight	ported
gt_theme_ncaa	theme.ncaa	ported
gt_theme_pl	theme.pl	ported
gt_theme_savant	theme.savant	ported
gt_theme_scoreboard	theme.scoreboard	ported
gt_theme_sofa	theme.sofa	ported
gt_theme_swiss	theme.swiss	ported
gt_theme_terminal	theme.terminal	ported
gt_theme_tier	theme.tier	ported
gt_theme_tufte	theme.tufte	ported
gt_theme_preview	html.themePreview	ported	a Record<name, html>, not a grid
pal_midnight	PAL_MIDNIGHT	ported
gt_538_caption	builder.caption538	ported
gt_bold_rows	builder.boldRows	ported
gt_border_bars_top	builder.borderBars	ported
gt_border_bars_bottom	builder.borderBars	ported
gt_border_grid	builder.borderGrid	ported
gt_color_pills	c.colorPills	ported
gt_color_ranks	c.colorRanks	ported
gt_color_results	c.colorResults	ported	a column kind (spec §6.1) that fills its row
gt_column_subheaders	builder.columns	ported	the per-column subheader option of every c.* kind
gt_cutline	builder.cutline	ported
gt_delta	c.delta	ported
gt_fmt_rank	c.rank	ported
gt_fmt_tally	c.tally	ported
gt_group_stripes	builder.groupStripes	ported
gt_highlight_cells	c.highlight	ported	data predicate, not a formula
gt_highlight_na	c.highlightNa	ported
gt_indicator_boxes	c.indicatorBox	ported	value list, not a rule
gt_legend_continuous	builder.legendContinuous	ported
gt_legend_discrete	builder.legendDiscrete	ported
gt_color_legend	builder.legendContinuous	ported	deprecated gtUtils name (sdvplotR deprecated.R:20)
gt_centered_legend	builder.legendDiscrete	ported	deprecated gtUtils name (sdvplotR deprecated.R:27)
gt_marginalia	builder.marginalia	ported
gt_outliers	builder.outliers	ported
gt_percentile_bar	c.percentileBar	ported
gt_row_accent	builder.rowAccent	ported
gt_scale_note	builder.scaleNote	ported
gt_set_font	builder.font	ported
gt_significance	builder.significance	ported
gt_snake	builder.snake	ported
gt_snake_align	snakeAlign	ported
gt_social_tag	builder.socialTag	ported
gt_spotlight	builder.spotlight	ported
gt_tiers	builder.tiers	ported
gt_title_header	builder.titleHeader	ported
gt_watermark	builder.watermark	ported
gt_wrap_labels	builder.wrapLabels	ported
gt_save_crop	tableToPNG	phase-5
gt_save_batch	tableToPNG	phase-5
gt_social_crop	socialCrop	phase-5
gt_grid	gridTables	phase-5
gt_stack_tables	stackTables	phase-5
reactable_sdv_logos	c.logo	ported
reactable_sdv_wordmarks	c.wordmark	ported
reactable_sdv_headshots	c.headshot	ported
reactable_sdv_cols_label	labelHtml	not-ported	as gt_sdv_cols_label
reactable_sdv_team_color_bar	c.teamColorBar	ported
reactable_sdv_team_color_bg	c.teamColorBg	ported

Every sdvplotR / gtUtils name and its sdvtables home

{
  "c.rank(\"srs_rank\")": {
    "kind": "rank",
    "key": "srs_rank",
    "superscript": true,
    "suffixSize": "0.7em"
  },
  "c.delta(\"pa\", \"pf\")": {
    "kind": "delta",
    "key": "pa",
    "to": "pf",
    "label": "Change",
    "percent": false,
    "decimals": 1,
    "arrows": false,
    "color": true,
    "colorPositive": "#1B7837",
    "colorNegative": "#B2182B",
    "forceSign": true
  },
  "c.colorRanks(\"pf\").palette is RANK_PALETTE": true,
  "RANK_PALETTE": [
    "#3D8B6E",
    "#9DC5A7",
    "#EDE0CC",
    "#DB9070",
    "#BE4D3A"
  ],
  "c.fmtRank is c.rank (the gtUtils name)": true,
  "defineTable() is a TableBuilder": true,
  "every method returns a new builder": true
}

The column factory and the immutable builder

{
  "build() with no columns": "TableSpecError: a table needs at least one column: call .columns(c => [...])",
  "the same key twice": "TableSpecError: column key \"wins\" appears twice",
  "two titles": "TableSpecError: only one .title()",
  "an unknown theme": "TableSpecError: unknown theme \"neon\"; one of sdv, sdvTeam, almanac, athletic, booktabs, broadsheet, brutalist, drench, gtutils, kenpom, midnight, ncaa, pl, savant, scoreboard, sofa, swiss, terminal, tier, tufte",
  "sdvTeam without a league": "TableSpecError: sdvTeam needs options.league (e.g. { league: \"nfl\", team: \"KC\" })",
  "a column the rows lack": "TableSpecError: column \"net_epa\" (kind text) is not a key of the first row; keys are team, conf, division, wins, losses, ties, pf, pa, srs_rank, qb, qb_espn_id, result_last"
}

Errors: one TableSpecError, raised early

{
  "wins >= 11": [
    "KC",
    "LAC",
    "BUF"
  ],
  "division == \"East\"": [
    "BUF",
    "MIA",
    "NYJ",
    "NE"
  ],
  "net_epa isNull": [
    "NE"
  ],
  "team in [\"KC\", \"BUF\"]": [
    "KC",
    "BUF"
  ],
  "qb matches \"^J\"": [
    "LAC",
    "BUF"
  ],
  "selectRows([0, 4]) (indices pass through)": [
    0,
    4
  ],
  "matches(wins > 14, KC)": true
}

Predicates: rows picked by data, not by functions

STANDINGS: eight AFC teams, 2024 regular season
team	conf	division	wins	losses	ties	pf	pa	net_epa	srs_rank	qb	qb_espn_id	result_last
KC	AFC	West	15	2	0	385	326	0.063	10	Patrick Mahomes	3139477	L
LAC	AFC	West	11	6	0	402	301	0.101	9	Justin Herbert	4038941	W
DEN	AFC	West	10	7	0	425	311	0.108	8	Bo Nix	4426338	W
LV	AFC	West	4	13	0	309	434	-0.146	26	Gardner Minshew	4038524	L
BUF	AFC	East	13	4	0	525	368	0.19	4	Josh Allen	3918298	L
MIA	AFC	East	8	9	0	345	364	-0.019	21	Tua Tagovailoa	4241479	L
NYJ	AFC	East	5	12	0	338	404	-0.045	24	Aaron Rodgers	8439	W
NE	AFC	East	4	13	0	289	417		29	Drake Maye	4431452	W
import { STANDINGS } from "@sportsdataverse/examples/data"

The sample rows every table example uses

{
  "columns": [
    {
      "kind": "logo",
      "key": "team",
      "height": 30,
      "includeName": false,
      "league": "nfl"
    },
    {
      "kind": "int",
      "key": "wins"
    },
    {
      "kind": "int",
      "key": "losses"
    },
    {
      "kind": "colorPills",
      "key": "net_epa",
      "palette": [
        "#C84630",
        "#5DA271"
      ],
      "fillType": "continuous",
      "rankOrder": "desc",
      "formatType": "number",
      "scalePercent": true,
      "suffix": "",
      "reverse": false,
      "outlineWidth": 0.25,
      "pillHeight": 25,
      "label": "Net EPA/play",
      "digits": 3,
      "domain": [
        -0.2,
        0.2
      ]
    }
  ],
  "decorations": [
    {
      "type": "title",
      "text": "AFC, 2024"
    }
  ],
  "theme": {
    "name": "midnight",
    "density": "comfortable"
  }
}

A TableSpec is plain data

AFC, 2024 regular season
Wins	Losses	PF	PA	Net EPA/play
15	2	385	326	0.063
11	6	402	301	0.101
10	7	425	311	0.108
4	13	309	434	-0.146
13	4	525	368	0.190
8	9	345	364	-0.019
5	12	338	404	-0.045
4	13	289	417

Theme: almanac

AFC, 2024 regular season
Wins	Losses	PF	PA	Net EPA/play
15	2	385	326	0.063
11	6	402	301	0.101
10	7	425	311	0.108
4	13	309	434	-0.146
13	4	525	368	0.190
8	9	345	364	-0.019
5	12	338	404	-0.045
4	13	289	417

Theme: athletic

AFC, 2024 regular season
Wins	Losses	PF	PA	Net EPA/play
15	2	385	326	0.063
11	6	402	301	0.101
10	7	425	311	0.108
4	13	309	434	-0.146
13	4	525	368	0.190
8	9	345	364	-0.019
5	12	338	404	-0.045
4	13	289	417

Theme: booktabs

AFC, 2024 regular season
Wins	Losses	PF	PA	Net EPA/play
15	2	385	326	0.063
11	6	402	301	0.101
10	7	425	311	0.108
4	13	309	434	-0.146
13	4	525	368	0.190
8	9	345	364	-0.019
5	12	338	404	-0.045
4	13	289	417

Theme: broadsheet

AFC, 2024 regular season
Wins	Losses	PF	PA	Net EPA/play
15	2	385	326	0.063
11	6	402	301	0.101
10	7	425	311	0.108
4	13	309	434	-0.146
13	4	525	368	0.190
8	9	345	364	-0.019
5	12	338	404	-0.045
4	13	289	417

Theme: brutalist

AFC, 2024 regular season
Wins	Losses	PF	PA	Net EPA/play
15	2	385	326	0.063
11	6	402	301	0.101
10	7	425	311	0.108
4	13	309	434	-0.146
13	4	525	368	0.190
8	9	345	364	-0.019
5	12	338	404	-0.045
4	13	289	417

Theme: drench

AFC, 2024 regular season
Wins	Losses	PF	PA	Net EPA/play
15	2	385	326	0.063
11	6	402	301	0.101
10	7	425	311	0.108
4	13	309	434	-0.146
13	4	525	368	0.190
8	9	345	364	-0.019
5	12	338	404	-0.045
4	13	289	417

Theme: gtutils

AFC, 2024 regular season
Wins	Losses	PF	PA	Net EPA/play
15	2	385	326	0.063
11	6	402	301	0.101
10	7	425	311	0.108
4	13	309	434	-0.146
13	4	525	368	0.190
8	9	345	364	-0.019
5	12	338	404	-0.045
4	13	289	417

Theme: kenpom

AFC, 2024 regular season
Wins	Losses	PF	PA	Net EPA/play
15	2	385	326	0.063
11	6	402	301	0.101
10	7	425	311	0.108
4	13	309	434	-0.146
13	4	525	368	0.190
8	9	345	364	-0.019
5	12	338	404	-0.045
4	13	289	417

Theme: midnight

AFC, 2024 regular season
Wins	Losses	PF	PA	Net EPA/play
15	2	385	326	0.063
11	6	402	301	0.101
10	7	425	311	0.108
4	13	309	434	-0.146
13	4	525	368	0.190
8	9	345	364	-0.019
5	12	338	404	-0.045
4	13	289	417

Theme: ncaa

AFC, 2024 regular season
Wins	Losses	PF	PA	Net EPA/play
15	2	385	326	0.063
11	6	402	301	0.101
10	7	425	311	0.108
4	13	309	434	-0.146
13	4	525	368	0.190
8	9	345	364	-0.019
5	12	338	404	-0.045
4	13	289	417

Theme: pl

AFC, 2024 regular season
Wins	Losses	PF	PA	Net EPA/play
15	2	385	326	0.063
11	6	402	301	0.101
10	7	425	311	0.108
4	13	309	434	-0.146
13	4	525	368	0.190
8	9	345	364	-0.019
5	12	338	404	-0.045
4	13	289	417

Theme: savant

AFC, 2024 regular season
Wins	Losses	PF	PA	Net EPA/play
15	2	385	326	0.063
11	6	402	301	0.101
10	7	425	311	0.108
4	13	309	434	-0.146
13	4	525	368	0.190
8	9	345	364	-0.019
5	12	338	404	-0.045
4	13	289	417

Theme: scoreboard

AFC, 2024 regular season
Wins	Losses	PF	PA	Net EPA/play
15	2	385	326	0.063
11	6	402	301	0.101
10	7	425	311	0.108
4	13	309	434	-0.146
13	4	525	368	0.190
8	9	345	364	-0.019
5	12	338	404	-0.045
4	13	289	417

Theme: sdv

AFC, 2024 regular season
Wins	Losses	PF	PA	Net EPA/play
15	2	385	326	0.063
11	6	402	301	0.101
10	7	425	311	0.108
4	13	309	434	-0.146
13	4	525	368	0.190
8	9	345	364	-0.019
5	12	338	404	-0.045
4	13	289	417

Theme: sdvTeam

AFC, 2024 regular season
Wins	Losses	PF	PA	Net EPA/play
15	2	385	326	0.063
11	6	402	301	0.101
10	7	425	311	0.108
4	13	309	434	-0.146
13	4	525	368	0.190
8	9	345	364	-0.019
5	12	338	404	-0.045
4	13	289	417

Theme: sofa

AFC, 2024 regular season
Wins	Losses	PF	PA	Net EPA/play
15	2	385	326	0.063
11	6	402	301	0.101
10	7	425	311	0.108
4	13	309	434	-0.146
13	4	525	368	0.190
8	9	345	364	-0.019
5	12	338	404	-0.045
4	13	289	417

Theme: swiss

AFC, 2024 regular season
Wins	Losses	PF	PA	Net EPA/play
15	2	385	326	0.063
11	6	402	301	0.101
10	7	425	311	0.108
4	13	309	434	-0.146
13	4	525	368	0.190
8	9	345	364	-0.019
5	12	338	404	-0.045
4	13	289	417

Theme: terminal

AFC, 2024 regular season
Wins	Losses	PF	PA	Net EPA/play
15	2	385	326	0.063
11	6	402	301	0.101
10	7	425	311	0.108
4	13	309	434	-0.146
13	4	525	368	0.190
8	9	345	364	-0.019
5	12	338	404	-0.045
4	13	289	417

Theme: tier

AFC, 2024 regular season
Wins	Losses	PF	PA	Net EPA/play
15	2	385	326	0.063
11	6	402	301	0.101
10	7	425	311	0.108
4	13	309	434	-0.146
13	4	525	368	0.190
8	9	345	364	-0.019
5	12	338	404	-0.045
4	13	289	417

Theme: tufte

density: "compact"body 12px, cell padding 3px
Team	Wins	Losses
	15	2
	11	6
	10	7

density: "comfortable"body 14px, cell padding 6px
Team	Wins	Losses
	15	2
	11	6
	10	7

density: "social"body 17px, cell padding 9px
Team	Wins	Losses
	15	2
	11	6
	10	7

Density: compact, comfortable, social

{
  "THEME_NAMES": [
    "sdv",
    "sdvTeam",
    "almanac",
    "athletic",
    "booktabs",
    "broadsheet",
    "brutalist",
    "drench",
    "gtutils",
    "kenpom",
    "midnight",
    "ncaa",
    "pl",
    "savant",
    "scoreboard",
    "sofa",
    "swiss",
    "terminal",
    "tier",
    "tufte"
  ],
  "THEMES.midnight is a function": true,
  "TOKEN_KEYS.length": 53,
  "midnight colour tokens": {
    "bg": "#0C0D10",
    "text": "#E8E9ED",
    "muted": "#9498A3",
    "accent": "#5b8def",
    "rule": "#24272E",
    "stripe": "transparent"
  },
  "midnight fonts": [
    "Chivo"
  ],
  "PAL_MIDNIGHT": [
    "#5B8DEF",
    "#3FBF87",
    "#E8E9ED",
    "#9498A3",
    "#24272E"
  ]
}

The theme registry: names, definitions, tokens

Kansas City, sdvTeamEach row: the header inks sdvTeam would pick for that team
Team	Primary	Title Ink	Subtitle Ink
KC	#e31837	#ffffff	#ffffff
LAC	#007bc7	#000000	#00060a
DEN	#002244	#ffffff	#8090a2
LV	#000000	#ffffff	#808080
BUF	#00338d	#ffffff	#99add1
MIA	#008e97	#000000	#001517
NYJ	#003f2d	#ffffff	#8ca9a0
NE	#002244	#ffffff	#8090a2

sdvTeam and secondaryOn: a header in the team colour

AFC, 2024
Team	Net EPA/play
KC	0.063
LAC	0.101
DEN	0.108
LV	-0.146
BUF	0.190
MIA	-0.019
NYJ	-0.045
NE

colorPills: values in pills coloured on a scale

AFC, 2024
Team	Points for	Points against
KC	385	326
LAC	402	301
DEN	425	311
LV	309	434
BUF	525	368
MIA	345	364
NYJ	338	404
NE	289	417

colorRanks: cells filled green to red

AFC, 2024: final regular-season game
Team	Qb	Last game
KC	Patrick Mahomes	L
LAC	Justin Herbert	W
DEN	Bo Nix	W
LV	Gardner Minshew	L
BUF	Josh Allen	L
MIA	Tua Tagovailoa	L
NYJ	Aaron Rodgers	W
NE	Drake Maye	W

colorResults: a row filled by its result

AFC, 2024
Team	PF	Point diff.
KC	385	▲ 59
LAC	402	▲ 101
DEN	425	▲ 114
LV	309	▼ 125
BUF	525	▲ 157
MIA	345	▼ 19
NYJ	338	▼ 66
NE	289	▼ 128

delta: the change from one column to another

AFC starting quarterbacks, 2024
	Quarterback	Team
	Patrick Mahomes	KC
	Justin Herbert	LAC
	Bo Nix	DEN
	Gardner Minshew	LV
	Josh Allen	BUF
	Tua Tagovailoa	MIA
	Aaron Rodgers	NYJ
	Drake Maye	NE

headshot: player headshots from ESPN ids

AFC, 2024: 11 or more wins
Team	Wins	Losses
KC	15	2
LAC	11	6
DEN	10	7
LV	4	13
BUF	13	4
MIA	8	9
NYJ	5	12
NE	4	13

highlight: cells that match a predicate

AFC, 2024
Team	Net EPA/play
KC	0.063
LAC	0.101
DEN	0.108
LV	-0.146
BUF	0.19
MIA	-0.019
NYJ	-0.045
NE	n/a

highlightNa: missing values marked

AFC, 2024
	Team	Qb
	KC	Patrick Mahomes
	LAC	Justin Herbert
	DEN	Bo Nix
	LV	Gardner Minshew
	BUF	Josh Allen
	MIA	Tua Tagovailoa
	NYJ	Aaron Rodgers
	NE	Drake Maye

image: any image URL in the data

AFC, 2024
Team	Won week 18
KC
LAC
DEN
LV
BUF
MIA
NYJ
NE

indicatorBox: a filled box for a yes

AFC, 2024
Team	W	L	PF	PA
KC	15	2	385	326
LAC	11	6	402	301
DEN	10	7	425	311
LV	4	13	309	434
BUF	13	4	525	368
MIA	8	9	345	364
NYJ	5	12	338	404
NE	4	13	289	417

int: whole numbers

AFC, 2024
Team	Division
KC	West
LAC	West
DEN	West
LV	West
BUF	East
MIA	East
NYJ	East
NE	East

logo: team logos from the bundled league data

AFC, 2024
Quarterback	Wins
Patrick Mahomes KC	15
Justin Herbert LAC	11
Bo Nix DEN	10
Gardner Minshew LV	4
Josh Allen BUF	13
Tua Tagovailoa MIA	8
Aaron Rodgers NYJ	5
Drake Maye NE	4

mergeStackTeamColor: two lines, the lower in the team colour

AFC, 2024
Team	Net EPA/play	Points for
KC	+0.063	385 pts
LAC	+0.101	402 pts
DEN	+0.108	425 pts
LV	−0.146	309 pts
BUF	+0.190	525 pts
MIA	−0.019	345 pts
NYJ	−0.045	338 pts
NE		289 pts

num: digits, a forced sign, a prefix or suffix

AFC, 2024
Team	Wins	Losses	Win %
KC	15	2	88.2%
LAC	11	6	64.7%
DEN	10	7	58.8%
LV	4	13	23.5%
BUF	13	4	76.5%
MIA	8	9	47.1%
NYJ	5	12	29.4%
NE	4	13	23.5%

pct: a share shown as a percentage

AFC, 2024
Team	Win %
KC	88
LAC	65
DEN	59
LV	24
BUF	76
MIA	47
NYJ	29
NE	24

percentileBar: a marker on a track

AFC, 2024: league-wide SRS rank
Team	SRS rank
KC	10^th
LAC	9^th
DEN	8^th
LV	26^th
BUF	4^th
MIA	21^st
NYJ	24^th
NE	29^th

rank: ordinals with a superscript suffix

AFC, 2024: W-L-T (win share)
Team	Record
KC	15-2-0 (88.2%)
LAC	11-6-0 (64.7%)
DEN	10-7-0 (58.8%)
LV	4-13-0 (23.5%)
BUF	13-4-0 (76.5%)
MIA	8-9-0 (47.1%)
NYJ	5-12-0 (29.4%)
NE	4-13-0 (23.5%)

tally: a record, with the share of one part

AFC, 2024
Team	Qb	Wins
KC	Patrick Mahomes	15
LAC	Justin Herbert	11
DEN	Bo Nix	10
LV	Gardner Minshew	4
BUF	Josh Allen	13
MIA	Tua Tagovailoa	8
NYJ	Aaron Rodgers	5
NE	Drake Maye	4

teamColorBar: a bar in the team colour

AFC, 2024: secondary colours at 50%
Team	Qb	Wins
KC	Patrick Mahomes	15
LAC	Justin Herbert	11
DEN	Bo Nix	10
LV	Gardner Minshew	4
BUF	Josh Allen	13
MIA	Tua Tagovailoa	8
NYJ	Aaron Rodgers	5
NE	Drake Maye	4

teamColorBg: a cell tinted with the team colour

AFC, 2024
Team	Quarterback	Division
KC	Patrick Mahomes	West
LAC	Justin Herbert	West
DEN	Bo Nix	West
LV	Gardner Minshew	West
BUF	Josh Allen	East
MIA	Tua Tagovailoa	East
NYJ	Aaron Rodgers	East
NE	Drake Maye	East

text: a value as written

AFC, 2024
Team	Wins	Losses
	15	2
	11	6
	10	7
	4	13
	13	4
	8	9
	5	12
	4	13

wordmark: team wordmarks

AFC, 2024: 13 or more wins
Team	Wins	Losses
	15	2
	11	6
	10	7
	4	13
	13	4
	8	9
	5	12
	4	13

boldRows: rows picked by a predicate

AFC, 2024
Team	Wins	Losses
	15	2
	11	6
	10	7
	4	13
	13	4
	8	9
	5	12
	4	13

SportsDataverse

borderBars: colour bars above and below

AFC, 2024
Wins	Losses	PF
15	2	385
11	6	402
10	7	425
4	13	309
13	4	525
8	9	345
5	12	338
4	13	289

borderGrid: vertical rules between columns

AFC, 2024
Team	Wins	Losses
	15	2
	11	6
	10	7
	4	13
	13	4
	8	9
	5	12
	4	13
Kansas City lost two games all season.
SOURCE: NFLVERSE

caption538: a ruled note and a source line

AFC, 2024
Team	Wins	Losses
	15	2
	13	4
	11	6
	10	7
	8	9
	5	12
	4	13
	4	13

cutline: a dashed line after the nth row

AFC, 2024
Qb	Wins	Losses
Patrick Mahomes	15	2
Justin Herbert	11	6
Bo Nix	10	7
Gardner Minshew	4	13
Josh Allen	13	4
Tua Tagovailoa	8	9
Aaron Rodgers	5	12
Drake Maye	4	13

font: one Google font for the whole table

AFC, 2024
Team	Qb	Wins	Losses
West
	Patrick Mahomes	15	2
	Justin Herbert	11	6
	Bo Nix	10	7
	Gardner Minshew	4	13
East
	Josh Allen	13	4
	Tua Tagovailoa	8	9
	Aaron Rodgers	5	12
	Drake Maye	4	13

groupBy: a heading row per group

AFC, 2024
Team	Qb	Wins	Losses
West
	Patrick Mahomes	15	2
	Justin Herbert	11	6
	Bo Nix	10	7
	Gardner Minshew	4	13
East
	Josh Allen	13	4
	Tua Tagovailoa	8	9
	Aaron Rodgers	5	12
	Drake Maye	4	13

groupStripes: every other group shaded

AFC, 2024
Team	Net EPA/play
	0.063
	0.101
	0.108
	-0.146
	0.190
	-0.019
	-0.045

Net EPA per play

-0.20.2

legendContinuous: a stepped key for a colour scale

Final regular-season game

WonLost

AFC, 2024
Team	Qb	Week 18
	Patrick Mahomes	L
	Justin Herbert	W
	Bo Nix	W
	Gardner Minshew	L
	Josh Allen	L
	Tua Tagovailoa	L
	Aaron Rodgers	W
	Drake Maye	W

legendDiscrete: a key of named colours

AFC, 2024
Wins	Losses	Starting QB
15	2	Patrick Mahomes
11	6	Justin Herbert
10	7	Bo Nix
4	13	Gardner Minshew
13	4	Josh Allen
8	9	Tua Tagovailoa
5	12	Aaron Rodgers
4	13	Drake Maye

marginalia: a column set as side notes

AFC, 2024
Team	PF	PA
	385	326
	402	301
	425	311
	309	434
	525†	368
	345	364
	338	404
	289	417
Marked values fall outside 1.5 × IQR of the column quartiles.

outliers: values beyond 1.5 IQR flagged

AFC, 2024: East in blue, West in red
Team	Wins	Losses
	15	2
	11	6
	10	7
	4	13
	13	4
	8	9
	5	12
	4	13

rowAccent: an edge colour per row

AFC, 2024
Team	PF / g	PA / g
	22.6	19.2
	23.6	17.7
	25.0	18.3
	18.2	25.5
	30.9	21.6
	20.3	21.4
	19.9	23.8
	17.0	24.5
Points per game (17 games).

scaleNote: columns divided, with a note saying so

8 AFC teams, 2024: which records beat a coin flip?
Team	Win %	p vs .500
	88.2%^***	0.002
	64.7%	0.332
	58.8%	0.629
	23.5%^**	0.049
	76.5%^**	0.049
	47.1%	1.000
	29.4%	0.143
	23.5%^**	0.049
* p < 0.01, p < 0.05, * p < 0.1

significance: stars from a p-value column

AFC, 2024
Wins	Losses	Wins	Losses
15	2	13	4
11	6	8	9
10	7	5	12
4	13	4	13

snake: a long table folded into side-by-side blocks

AFC, 2024
Team	Wins	Losses
	15	2
	11	6
	10	7
	4	13
	13	4
	8	9
	5	12
	4	13
Data: nflverse
SportsDataverse \| sportsdataverse

socialTag: handles with their icons

AFC, 2024
Team	PF	PA
	385	326
	402	301
	425	311
	309	434
	525	368
	345	364
	338	404
	289	417
Data: nflverse

sourceNote: a footnote under the table

AFC, 2024: Buffalo
Qb	Wins	Losses
Patrick Mahomes	15	2
Justin Herbert	11	6
Bo Nix	10	7
Gardner Minshew	4	13
Josh Allen	13	4
Tua Tagovailoa	8	9
Aaron Rodgers	5	12
Drake Maye	4	13

spotlight: one row lit, the rest dimmed

AFC, 2024Regular season, East and West divisions
Team	Wins	Losses
	15	2
	11	6
	10	7
	4	13
	13	4
	8	9
	5	12
	4	13

subtitle: a line under the title

8 AFC teams, 2024: SRS tiers

SRS top 10
11th to 20th
21st to 32nd

tiers: a tier list of 8 AFC teams, one row per tier

AFC, 2024
Team	Wins	Losses
	15	2
	11	6
	10	7
	4	13
	13	4
	8	9
	5	12
	4	13

title: the table caption

NFL 2024
AFC standingsEast and West divisions
Final, week 18
Team	Wins	Losses
	15	2
	11	6
	10	7
	4	13
	13	4
	8	9
	5	12
	4	13

titleHeader: kicker, title, subtitle and date

AFC, 2024
Qb	Wins	Losses
Patrick Mahomes	15	2
Justin Herbert	11	6
Bo Nix	10	7
Gardner Minshew	4	13
Josh Allen	13	4
Tua Tagovailoa	8	9
Aaron Rodgers	5	12
Drake Maye	4	13

watermark: faint text behind the rows

AFC, 2024
Team	Points scored, regular season	Points allowed, regular season
	385	326
	402	301
	425	311
	309	434
	525	368
	345	364
	338	404
	289	417

wrapLabels: long column labels on several lines

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Spline+Sans+Mono:wght@500&family=Work+Sans:wght@500;650&display=swap">

AFC, 2024
Team	Wins	Losses
KC	15	2
LAC	11	6
DEN	10	7
LV	4	13
BUF	13	4
MIA	8	9
NYJ	5	12
NE	4	13

fonts: false, and loading the fonts yourself

Both tables carry the class sdvt-t-445aaff9 (east: sdvt-t-445aaff9).

AFC West, 2024
Team	Wins	Losses
KC	15	2
LAC	11	6
DEN	10	7
LV	4	13

AFC East, 2024
Team	Wins	Losses
BUF	13	4
MIA	8	9
NYJ	5	12
NE	4	13

Many tables, one stylesheet

{
  "leaguesOf(teams)": [
    "nfl"
  ],
  "leaguesOf(players)": [],
  "teams.columns.map(columnLabel)": [
    "Team",
    "Wins",
    "Net EPA/play"
  ],
  "players.columns.map(columnLabel)": [
    "Qb Espn Id",
    "Qb"
  ]
}

leaguesOf and columnLabel: what a spec needs and shows

AFC, 2024
Team		Wins	Losses
KC	Patrick Mahomes	15	2
LAC	Justin Herbert	11	6
DEN	Bo Nix	10	7
LV	Gardner Minshew	4	13
BUF	Josh Allen	13	4
MIA	Tua Tagovailoa	8	9
NYJ	Aaron Rodgers	5	12
NE	Drake Maye	4	13

renderHTMLAsync: prepare and render in one call

AFC, 2024
Team	Wins	Losses
	15	2
	11	6
	10	7
	4	13
	13	4
	8	9
	5	12
	4	13

A standings table as an HTML string

sdv

AFC, 2024
Team	Wins	Losses
	15	2
	11	6
	10	7

midnight

AFC, 2024
Team	Wins	Losses
	15	2
	11	6
	10	7

tufte

AFC, 2024
Team	Wins	Losses
	15	2
	11	6
	10	7

scoreboard

AFC, 2024
Team	Wins	Losses
	15	2
	11	6
	10	7

themePreview: one table under several themes

AFC, 2024
Qb	Wins	Losses
Patrick Mahomes	15	2
Justin Herbert	11	6
Bo Nix	10	7
Gardner Minshew	4	13
Josh Allen	13	4
Tua Tagovailoa	8	9
Aaron Rodgers	5	12
Drake Maye	4	13

toElement: a table as a DOM element

AFC, 2024

BUF	East	525	368
DEN	West	425	311
LAC	West	402	301
KC	West	385	326

A custom renderer: the pager above the table, the search box below

AFC2024 regular season

KC	West	15	2	385	326
BUF	East	13	4	525	368
LAC	West	11	6	402	301
DEN	West	10	7	425	311

hydrate: sort, filter, page and select without React

AFC, 2024

KC	West	15	0.063
BUF	East	13	0.190
LAC	West	11	0.101
DEN	West	10	0.108

events: select, change; selected: KC, BUF

Driving a table from outside: rowKey, setSelection, setExternalFilter, subscribe

AFC, 2024

KC	Patrick Mahomes	15	2
LAC	Justin Herbert	11	6
DEN	Bo Nix	10	7
LV	Gardner Minshew	4	13

Your own wiring: the handlers hydrate and <SdvTable/> share

{
  "clicks": [
    "asc",
    "desc",
    null
  ],
  "ascending": [
    "LV",
    "NYJ",
    "MIA",
    "KC",
    "LAC",
    "DEN",
    "BUF",
    "NE"
  ],
  "descending": [
    "BUF",
    "DEN",
    "LAC",
    "KC",
    "MIA",
    "NYJ",
    "LV",
    "NE"
  ],
  "missing": [
    "NE"
  ],
  "numericKinds": [
    "num",
    "int",
    "pct",
    "rank",
    "delta",
    "tally",
    "colorPills",
    "colorRanks",
    "percentileBar"
  ]
}

The engine's sort rules as plain functions

Points for and against

AFC, 2024 regular season

Team	Points for	Points against
KC	385	326
LAC	402	301
DEN	425	311
LV	309	434
BUF	525	368
MIA	345	364
NYJ	338	404
NE	289	417

composePage: the title and notes frame around any HTML

AFC by division

2024 regular season

AFC West

Wins	Losses	PF
15	2	385
11	6	402
10	7	425
4	13	309

AFC East

Wins	Losses	PF
13	4	525
8	9	345
5	12	338
4	13	289

gridTables: small multiples on one page (gt_grid)

AFC, 2024

Team	Quarterback	Wins	Losses
KC	Patrick Mahomes	15	2
LAC	Justin Herbert	11	6
DEN	Bo Nix	10	7
LV	Gardner Minshew	4	13

Team	Quarterback	Wins	Losses
BUF	Josh Allen	13	4
MIA	Tua Tagovailoa	8	9
NYJ	Aaron Rodgers	5	12
NE	Drake Maye	4	13

stackTables: tables one above the other (gt_stack_tables)

[
  [
    "KC",
    "LAC",
    "DEN"
  ],
  [
    "LV",
    "BUF",
    "MIA"
  ],
  [
    "NYJ",
    "NE",
    "(fill)"
  ]
]

snakeAlign: rows split into the blocks .snake() draws


KC	15
BUF	13

Table

AFC, 2024
Team	Wins	Losses
KC	15	2
BUF	13	4
LAC	11	6

defineTable

{
  "row": 1,
  "col": null
}

handleKeydown

{
  "type": "cursor",
  "row": 0,
  "col": "net_epa"
}

keyAction

Team	Points for	Points against
BUF	525	368
DEN	425	311
LAC	402	301

renderHTML

Team	Wins	Losses
KC	15	2
BUF	13	4

Team	Wins	Losses
KC	15	2
BUF	13	4

Team	Wins	Losses
KC	15	2
BUF	13	4

themePreview

@sportsdataverse/sdvtables gallery

React

Table spec

Every theme

Theme API

Every cell kind

Every decoration

HTML renderer

sdv

midnight

tufte

scoreboard

Interactive tables

Export (Node)

Layout

From the API docs

Team	Points for	Points against
KC	385	326
LAC	402	301
DEN	425	311
LV	309	434
BUF	525	368
MIA	345	364
NYJ	338	404
NE	289	417

Team	W	L	PF	PA
KC	15	2	385	326
LAC	11	6	402	301
DEN	10	7	425	311
LV	4	13	309	434
BUF	13	4	525	368
MIA	8	9	345	364
NYJ	5	12	338	404
NE	4	13	289	417

Team	Points for	Points against
KC	385	326
LAC	402	301
DEN	425	311
LV	309	434
BUF	525	368
MIA	345	364
NYJ	338	404
NE	289	417

Team	Points for	Points against
KC	385	326
LAC	402	301
DEN	425	311
LV	309	434
BUF	525	368
MIA	345	364
NYJ	338	404
NE	289	417

Team	W	L	PF	PA
KC	15	2	385	326
LAC	11	6	402	301
DEN	10	7	425	311
LV	4	13	309	434
BUF	13	4	525	368
MIA	8	9	345	364
NYJ	5	12	338	404
NE	4	13	289	417

Team	Points for	Points against
KC	385	326
LAC	402	301
DEN	425	311
LV	309	434
BUF	525	368
MIA	345	364
NYJ	338	404
NE	289	417

React​

Table spec​

Every theme​

Theme API​

Every cell kind​

Every decoration​

HTML renderer​

sdv

midnight

tufte

scoreboard

Interactive tables​

Export (Node)​

Layout​

From the API docs​

React

Table spec

Every theme

Theme API

Every cell kind

Every decoration

HTML renderer

Interactive tables

Export (Node)

Layout

From the API docs

Team	Points for	Points against
KC	385	326
LAC	402	301
DEN	425	311
LV	309	434
BUF	525	368
MIA	345	364
NYJ	338	404
NE	289	417

Team	W	L	PF	PA
KC	15	2	385	326
LAC	11	6	402	301
DEN	10	7	425	311
LV	4	13	309	434
BUF	13	4	525	368
MIA	8	9	345	364
NYJ	5	12	338	404
NE	4	13	289	417

Team	Points for	Points against
KC	385	326
LAC	402	301
DEN	425	311
LV	309	434
BUF	525	368
MIA	345	364
NYJ	338	404
NE	289	417