Many tables, one stylesheet

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

import { STANDINGS, type Standing } from "@sportsdataverse/examples/data";
import { defineTable } from "@sportsdataverse/sdvtables";
import { prepare, renderHTML, styleSheet, themeKey } from "@sportsdataverse/sdvtables/html";

const division = (name: string) =>
  defineTable<Standing>()
    .columns((c) => [c.logo("team", { league: "nfl", includeName: true }), c.int("wins"), c.int("losses")])
    .theme("athletic")
    .title(`AFC ${name}, 2024`)
    .build();
const west = division("West");
const east = division("East");
await prepare(west);

// Same theme, density and options, so the same themeKey class: the host page writes styleSheet() once per key
// and renders each table with css: "none".
const key = themeKey(west.theme);
[
  `<style>${styleSheet(west)}</style>`,
  `<p>Both tables carry the class <code>${key}</code> (east: <code>${themeKey(east.theme)}</code>).</p>`,
  renderHTML(
    west,
    STANDINGS.filter((r) => r.division === "West"),
    { css: "none" },
  ),
  renderHTML(
    east,
    STANDINGS.filter((r) => r.division === "East"),
    { css: "none" },
  ),
].join("\n");

Tags: table · styleSheet · themeKey · css · renderHTML · nfl. All sdvtables examples.