A TableSpec is plain data

{
  "columns": [
    {
      "kind": "logo",
      "key": "team",
      "height": 30,
      "includeName": false,
      "league": "nfl"
    },
    {
      "kind": "int",
      "key": "wins"
    },
    {
      "kind": "int",
      "key": "losses"
    },
    {
      "kind": "colorPills",
      "key": "net_epa",
      "palette": [
        "#C84630",
        "#5DA271"
      ],
      "fillType": "continuous",
      "rankOrder": "desc",
      "formatType": "number",
      "scalePercent": true,
      "suffix": "",
      "reverse": false,
      "outlineWidth": 0.25,
      "pillHeight": 25,
      "label": "Net EPA/play",
      "digits": 3,
      "domain": [
        -0.2,
        0.2
      ]
    }
  ],
  "decorations": [
    {
      "type": "title",
      "text": "AFC, 2024"
    }
  ],
  "theme": {
    "name": "midnight",
    "density": "comfortable"
  }
}

import type { Standing } from "@sportsdataverse/examples/data";
import { defineTable } from "@sportsdataverse/sdvtables";

// defineTable<Row>() checks every key against the row type; build() validates once and returns a plain object
// that JSON can carry (server to browser, a file, a cache key). Rendering is a separate step.
defineTable<Standing>()
  .columns((c) => [
    c.logo("team", { league: "nfl" }),
    c.int("wins"),
    c.int("losses"),
    c.colorPills("net_epa", { label: "Net EPA/play", digits: 3, domain: [-0.2, 0.2] }),
  ])
  .theme("midnight")
  .title("AFC, 2024")
  .build();

Tags: table · defineTable · TableSpec · nfl. All sdvtables examples.