useTable: the engine and its snapshot in your own component

8 of 8 teams, page 1 of 2

AFC, 2024

BUF	East	525	368
DEN	West	425	311
LAC	West	402	301
KC	West	385	326

import { STANDINGS, type Standing } from "@sportsdataverse/examples/data";
import { defineTable } from "@sportsdataverse/sdvtables";
import { SdvTable, useTable } from "@sportsdataverse/sdvtables/react";

const spec = defineTable<Standing>()
  .columns((c) => [c.text("team"), c.text("division", { filterable: true }), c.int("pf"), c.int("pa")])
  .title("AFC, 2024")
  .rowKey("team")
  .build();

function Standings() {
  // snapshot re-renders this component on every engine change; table drives <SdvTable table={…}/>
  const { table, snapshot } = useTable(spec, STANDINGS, { pageSize: 4, sort: { col: "pf", dir: "desc" } });
  const selected = [...table.getSelection()];
  return (
    <div>
      <p>
        {snapshot.filteredCount} of {STANDINGS.length} teams, page {snapshot.state.page + 1} of{" "}
        {snapshot.pageCount}
        {selected.length > 0 ? `; selected: ${selected.join(", ")}` : ""}
      </p>
      <SdvTable table={table} interactive />
    </div>
  );
}
<Standings />;

Tags: react · table · useTable · nfl. All sdvtables examples.