image: any image URL in the data

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

import { STANDINGS } from "@sportsdataverse/examples/data";
import { loadLeague, logoUrlSync } from "@sportsdataverse/sdvplot";
import { defineTable } from "@sportsdataverse/sdvtables";
import { renderHTMLAsync } from "@sportsdataverse/sdvtables/html";

// image draws the URL the row holds; here sdvplot's archive logo URL, added to each row.
await loadLeague("nfl");
const rows = STANDINGS.map((r) => ({ ...r, logo_url: logoUrlSync(r.team, "nfl") ?? null }));
const spec = defineTable<(typeof rows)[number]>()
  .columns((c) => [
    c.image("logo_url", { label: "", height: "40px", alt: "team" }),
    c.text("team"),
    c.text("qb"),
  ])
  .title("AFC, 2024")
  .build();
await renderHTMLAsync(spec, rows);

Tags: kind · image. All sdvtables examples.