Density: compact, comfortable, social

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

import { STANDINGS, type Standing } from "@sportsdataverse/examples/data";
import { DENSITY, type Density, defineTable } from "@sportsdataverse/sdvtables";
import { renderHTMLAsync } from "@sportsdataverse/sdvtables/html";

// .theme(name, { density }) scales type and padding from DENSITY; almanac, scoreboard and terminal default to compact.
const densities: Density[] = ["compact", "comfortable", "social"];
const tables = await Promise.all(
  densities.map((density) =>
    renderHTMLAsync(
      defineTable<Standing>()
        .columns((c) => [c.logo("team", { league: "nfl" }), c.int("wins"), c.int("losses")])
        .theme("sdv", { density })
        .title(`density: "${density}"`)
        .subtitle(`body ${DENSITY[density].body}px, cell padding ${DENSITY[density].pad}px`)
        .build(),
      STANDINGS.slice(0, 3),
    ),
  ),
);
tables.join("\n");

Tags: theme · density · DENSITY · nfl. All sdvtables examples.