Driving a table from outside: rowKey, setSelection, setExternalFilter, subscribe

Search all columns

AFC, 2024

KC	West	15	0.063
BUF	East	13	0.190
LAC	West	11	0.101
DEN	West	10	0.108

events: select, change; selected: KC, BUF

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

// .rowKey("team"): a row's id is its team, so a figure (or a URL) can name rows without knowing their order
const spec = defineTable<Standing>()
  .columns((c) => [c.text("team"), c.text("division"), c.int("wins"), c.num("net_epa", { digits: 3 })])
  .title("AFC, 2024")
  .rowKey("team")
  .build();
const table = createTable(spec, STANDINGS, { sort: { col: "wins", dir: "desc" } });
const events: string[] = [];
const stop = table.subscribe((e) => events.push(e.type));
table.setSelection(new Set(["KC", "BUF"])); // a chart's brush picked the two division winners
table.setExternalFilter((r) => r.wins >= 10); // another view keeps the playoff-record teams; ANDed with the table's own
table.setSelection(new Set(["KC", "BUF"])); // the same selection again notifies nobody, so a two-way link cannot loop
stop();
`${renderHTML(table)}<p>events: ${events.join(", ")}; selected: ${[...table.getSelection()].join(", ")}</p>`;

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