hydrate: sort, filter, page and select without React

AFC2024 regular season

KC	West	15	2	385	326
BUF	East	13	4	525	368
LAC	West	11	6	402	301
DEN	West	10	7	425	311

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

const spec = defineTable<Standing>()
  .columns((c) => [
    c.logo("team", { league: "nfl", includeName: true }),
    c.text("division", { filterable: true }),
    c.int("wins"),
    c.int("losses"),
    c.int("pf", { label: "PF" }),
    c.int("pa", { label: "PA" }),
  ])
  .title("AFC")
  .subtitle("2024 regular season")
  .rowKey("team")
  .build();
await prepare(spec);
const table = createTable(spec, STANDINGS, { pageSize: 4, sort: { col: "wins", dir: "desc" } });
const host = document.createElement("div");
host.innerHTML = renderHTML(table); // the same string a server or a static site would send
// one delegated listener set; each change re-renders only the table block and the pager
hydrate(host.querySelector(".sdvt") as Element, table);
host;

Tags: table · interactive · createTable · hydrate · nfl. All sdvtables examples.