Skip to main content

Function: renderHTML()

Call Signature​

renderHTML<Row>(table, opts?): string

Defined in: packages/sdvtables/src/html/index.ts:72

Static markup from a spec, or the interactive document (toolbar, aria-sort headers, pager) from a createTable instance.

A spec renders as one HTML string, synchronously: the theme as a scoped <style> (with css: "none" the host page emits styleSheet(spec) once instead), then the table. Cells that read league data (logos, team names) need await prepare(spec) first, or use renderHTMLAsync. Throws TableSpecError for a column the rows lack or an unknown theme.

Type Parameters​

Row​

Row

Parameters​

table​

Table<Row>

opts?​

RenderOptions

Returns​

string

Example​

import { defineTable } from "@sportsdataverse/sdvtables";
import { renderHTML } from "@sportsdataverse/sdvtables/html";

const rows = [
  { team: "BUF", pf: 525, pa: 368 },
  { team: "DEN", pf: 425, pa: 311 },
  { team: "LAC", pf: 402, pa: 301 },
];
const spec = defineTable<(typeof rows)[number]>()
  .columns((c) => [c.text("team"), c.int("pf", { label: "Points for" }), c.int("pa", { label: "Points against" })])
  .theme("athletic")
  .build();
renderHTML(spec, rows);

Call Signature​

renderHTML<Row>(spec, rows, opts?): string

Defined in: packages/sdvtables/src/html/index.ts:73

Static markup from a spec, or the interactive document (toolbar, aria-sort headers, pager) from a createTable instance.

A spec renders as one HTML string, synchronously: the theme as a scoped <style> (with css: "none" the host page emits styleSheet(spec) once instead), then the table. Cells that read league data (logos, team names) need await prepare(spec) first, or use renderHTMLAsync. Throws TableSpecError for a column the rows lack or an unknown theme.

Type Parameters​

Row​

Row

Parameters​

spec​

TableSpec<Row>

rows​

readonly Row[]

opts?​

RenderOptions

Returns​

string

Example​

import { defineTable } from "@sportsdataverse/sdvtables";
import { renderHTML } from "@sportsdataverse/sdvtables/html";

const rows = [
  { team: "BUF", pf: 525, pa: 368 },
  { team: "DEN", pf: 425, pa: 311 },
  { team: "LAC", pf: 402, pa: 301 },
];
const spec = defineTable<(typeof rows)[number]>()
  .columns((c) => [c.text("team"), c.int("pf", { label: "Points for" }), c.int("pa", { label: "Points against" })])
  .theme("athletic")
  .build();
renderHTML(spec, rows);