Tables
sdvtables builds a table once, as a spec, and renders it anywhere: to an HTML string here, to React, or to a PNG. This page shows the spec under each theme and density, the column kinds and decorations it can carry, and the headless engine that sorts, filters, pages and selects once the HTML is hydrated. Every value is from the 2024 NFL regular season (nflverse); examples/src/data.ts gives each column's source. Logos and quarterback headshots load from the sportsdataverse archive and ESPN.
Themes and densities
Theme picks one of the social is sized for an image post). The sdvTeam theme takes its header colours from a team: pick it with sdvTeam colours, which also colours the spotlight below. Wide tables scroll inside the column on a narrow screen.
Column kinds and decorations
One spec, seven column kinds: a logo with the team name, a headshot, text, a W-L-T tally with the win share, a point-differential delta with arrows, colour pills for net EPA per play, and a league-wide SRS rank. New England's net EPA is blank on purpose, so you can see how a missing value renders. Tick Decorations to add or remove each one; the rows are sorted by wins, best first. The playoff cutline sits after the fourth row, so it is left out when the table is grouped by division (the top four span both groups).
Sort, filter, page and select
createTable(spec, rows) is a headless engine: it holds the sort, the filters, the page and the selection. renderHTML(table) writes its current state as HTML (the same string a server or a static site would send), and hydrate(element, table) wires that HTML to it without React. Then:
- click a column header to sort it (again to reverse it, a third time to clear it);
- type in the search box to filter every column, or in the division box to filter that column;
- page with the pager (Rows per page sets its size);
- click a row, or press Space on it, to select it; hovering a row underlines it.
The line under the table is read from the engine on every change, so it shows what the HTML is drawing.