@sportsdataverse/sdvtables 0.1.0 → 0.2.0

package/dist/tanstack-table.d.ts

@@ -0,0 +1,113 @@
+import { TableFeatures, RowData, ColumnDef } from '@tanstack/table-core';
+import { T as TableSpec } from './spec-A88vJX5A.js';
+import '@sportsdataverse/sdvplot';
+
+/**
+ * The TanStack Table v9 adapter (`@tanstack/table-core` 9, MIT, and its React and Svelte adapters): an sdvtables spec
+ * as the options `useTable` (React) or `createTable` (Svelte) takes. Columns keep the HTML table's labels, alignment,
+ * number formats (a scaleNote and the rank suffix included) and sort, missing values last both ways; logo, wordmark,
+ * headshot and superscript-rank cells come out as plain data that the caller's `render` turns into its framework's
+ * markup. TanStack Table is headless: the caller owns the `<table>`, its CSS and its interactions.
+ * Pure: TanStack Table is never imported at runtime (types only), and nothing touches the DOM, so the module imports on
+ * a server and in any framework.
+ */
+
+/** A cell sdvtables draws as more than text, as data: `render` turns it into the caller's framework markup. */
+type CellPart = {
+    readonly type: "image";
+    /** "logo" and "wordmark": a team's mark; "headshot": a player's photo. */
+    readonly kind: "logo" | "wordmark" | "headshot";
+    readonly src: string;
+    /** The team's name for a mark; "" for a headshot, which is decorative (the player's name sits in its row). */
+    readonly alt: string;
+    /** px */
+    readonly height: number;
+    /** The resolved team id or the player id, as the HTML table's `data-sdv-id`. */
+    readonly id: string;
+    /** A logo column with `includeName`: the cell's text, drawn after the image. */
+    readonly text?: string;
+} | {
+    /** A rank with `superscript` (the default): `num` then `suffix` in a `<sup>` of `size` ("1", "st"). */
+    readonly type: "rank";
+    readonly num: string;
+    readonly suffix: string;
+    readonly size: string;
+};
+/** A column's CSS, from the spec: its alignment and width. */
+interface ColumnStyle {
+    /** The HTML table's alignment: the spec's `align`, else right for numbers and centre for images. */
+    readonly textAlign: "left" | "center" | "right";
+    /** The spec's `width`, as given (any CSS width). */
+    readonly width?: string;
+}
+/** `tanstackTable` options. */
+interface TanstackTableOptions<TFeatures extends TableFeatures> {
+    /**
+     * Your `tableFeatures({...})`: register `rowSortingFeature` and `sortedRowModel: createSortedRowModel()` for the
+     * columns' sort. It is passed through, and fixes the columns' type to your table's features.
+     */
+    features: TFeatures;
+    /**
+     * Turns an image or superscript-rank cell into your framework's markup: a React element, or Svelte's
+     * `renderSnippet(snippet, part)`. Without it, those cells are text: the team or player value, and "1st".
+     */
+    render?: (part: CellPart) => unknown;
+}
+/** What `tanstackTable` returns. */
+interface SdvTanstackTable<TFeatures extends TableFeatures, TData extends RowData> {
+    /** For `useTable(options)` / `createTable(options)`, or spread with your own options (`initialState`, ...). */
+    options: {
+        features: TFeatures;
+        columns: ColumnDef<TFeatures, TData>[];
+        data: readonly TData[];
+        /** With the spec's `rowKey` only. */
+        getRowId?: (row: TData) => string;
+    };
+    /** Each column's CSS by column id (the spec's key), for its `<th>` and `<td>`. */
+    columnStyle: Readonly<Record<string, ColumnStyle>>;
+}
+/**
+ * An sdvtables spec as TanStack Table v9 options: `useTable(tanstackTable(spec, rows, { features }).options)`.
+ *
+ * - **Columns**: one accessor column per spec column, id the spec's key, header the HTML table's label (with a
+ *   `scaleNote`'s suffix). Number cells (`num`, `int`, `pct`, `rank`, a `scaleNote`'s divisor and decimals) are the
+ *   HTML table's text; a blank or unparseable number is missing (`undefined`), never 0.
+ * - **Sorting**: sdvtables' own comparator (the column's `compare`, else by kind), with missing values last in both
+ *   directions (`sortUndefined: "last"`). Register `rowSortingFeature` and `createSortedRowModel()` to use it.
+ * - **Row ids**: with the spec's `rowKey`, `String(row[rowKey])`, checked unique and not blank (TanStack would merge two
+ *   rows with one id); without it, TanStack's row index.
+ * - **Images**: `logo`, `wordmark` and `headshot` cells, and superscript ranks, go through `render` as a `CellPart`.
+ *   A team or player with no image keeps its text, with one warning. Team values may be abbreviations, names or
+ *   numeric ids.
+ *
+ * Other kinds (pills, bars, team colours, sparklines...) show their plain value, with one warning per kind.
+ * Synchronous: call `await prepare(spec)` (`@sportsdataverse/sdvtables/html`) first. Images are worked out once, from
+ * `rows`: build again when the rows change, and keep the result stable between renders (module scope or a memo).
+ *
+ * @example
+ * ```ts
+ * import { createSortedRowModel, rowSortingFeature, tableFeatures } from "@tanstack/table-core";
+ * import { defineTable } from "@sportsdataverse/sdvtables";
+ * import { prepare } from "@sportsdataverse/sdvtables/html";
+ * import { tanstackTable } from "@sportsdataverse/sdvtables/tanstack-table";
+ *
+ * // 2024 regular season, nflverse games
+ * const rows = [
+ *   { team: "KC", wins: 15, pf: 385 },
+ *   { team: "BUF", wins: 13, pf: 525 },
+ *   { team: "LAC", wins: 11, pf: 402 },
+ * ];
+ * const spec = defineTable<(typeof rows)[number]>()
+ *   .columns((c) => [c.logo("team", { league: "nfl", height: 28 }), c.int("wins"), c.int("pf")])
+ *   .rowKey("team")
+ *   .build();
+ * await prepare(spec);
+ * const features = tableFeatures({ rowSortingFeature, sortedRowModel: createSortedRowModel() });
+ * const { options } = tanstackTable(spec, rows, { features });
+ * // in React: useTable(options), from @tanstack/react-table; in Svelte: createTable(options)
+ * options.columns.map((c) => [c.id, c.header]);
+ * ```
+ */
+declare function tanstackTable<TFeatures extends TableFeatures, TData extends RowData>(spec: TableSpec<TData>, rows: readonly TData[], o: TanstackTableOptions<TFeatures>): SdvTanstackTable<TFeatures, TData>;
+
+export { type CellPart, type ColumnStyle, type SdvTanstackTable, type TanstackTableOptions, tanstackTable };

package/dist/tanstack-table.js

@@ -0,0 +1,98 @@
+import { scaleNotes, missingLast, formatterFor, unmapped, checkHeight, headshotUrls, logoMarks, rankParts, rowIds, value } from './chunk-WBTFIGYK.js';
+import { alignOf, labelOf, teamNameSync } from './chunk-R375P3MN.js';
+import { NUMERIC_KINDS, toNumber, isMissing, isBlank } from './chunk-UTOVFIFT.js';
+
+// src/tanstack-table.ts
+var TS = {
+  fn: "tanstackTable",
+  ns: "tanstack-table",
+  grid: "TanStack Table",
+  short: "TanStack Table",
+  built: "options"
+};
+function tanstackTable(spec, rows, o) {
+  const { scaled, labelSuffix } = scaleNotes(spec);
+  const columnStyle = {};
+  const columns = spec.columns.map((col) => {
+    columnStyle[col.key] = {
+      textAlign: alignOf(col),
+      ...col.width === void 0 ? {} : { width: col.width }
+    };
+    const asc = missingLast(col, rows)("asc");
+    const numeric = NUMERIC_KINDS.has(col.kind);
+    const def = {
+      id: col.key,
+      header: labelOf(col) + (labelSuffix.get(col.key) ?? ""),
+      // a missing value is undefined, which sortUndefined keeps last both ways
+      accessorFn: (row) => {
+        const v = value(row, col.key);
+        return numeric ? toNumber(v) ?? void 0 : isMissing(v) ? void 0 : v;
+      },
+      cell: cellOf(col, formatterFor(col, scaled)),
+      sortFn: (a, b, id) => asc(a.getValue(id), b.getValue(id)),
+      sortUndefined: "last",
+      ...col.sortable === void 0 ? {} : { enableSorting: col.sortable }
+    };
+    return def;
+  });
+  function cellOf(col, format) {
+    const text = (v) => format ? format(v) : isBlank(v) ? "" : String(v);
+    const { render } = o;
+    switch (col.kind) {
+      case "text":
+      case "num":
+      case "int":
+      case "pct":
+        return (ctx) => text(ctx.getValue());
+      case "rank":
+        return (ctx) => {
+          const r = col.superscript && render ? rankParts(ctx.getValue()) : null;
+          return r === null || !render ? text(ctx.getValue()) : render({ type: "rank", ...r, size: col.suffixSize });
+        };
+      case "logo":
+      case "wordmark": {
+        const h = checkHeight(col.height, col.kind);
+        const marks = logoMarks(col, rows);
+        const kind = col.kind;
+        const withName = kind === "logo" && col.includeName;
+        return (ctx) => {
+          const raw = text(ctx.getValue());
+          const t = raw.trim();
+          const m = marks.get(t);
+          if (m === void 0 || !render) return raw;
+          const alt = teamNameSync(col.league, m.id) ?? t;
+          return render({
+            type: "image",
+            kind,
+            src: m.url,
+            alt,
+            height: h,
+            id: m.id,
+            ...withName ? { text: raw } : {}
+          });
+        };
+      }
+      case "headshot": {
+        const h = checkHeight(col.height, "headshot");
+        const urls = headshotUrls(col, rows, TS);
+        return (ctx) => {
+          const raw = text(ctx.getValue());
+          const src = urls.get(raw.trim());
+          return src === void 0 || !render ? raw : render({ type: "image", kind: "headshot", src, alt: "", height: h, id: raw.trim() });
+        };
+      }
+      default:
+        unmapped(col.kind, TS);
+        return (ctx) => text(ctx.getValue());
+    }
+  }
+  const getRowId = spec.rowKey === void 0 ? void 0 : rowIds(rows, spec.rowKey, TS);
+  return {
+    options: { features: o.features, columns, data: rows, ...getRowId === void 0 ? {} : { getRowId } },
+    columnStyle
+  };
+}
+
+export { tanstackTable };
+//# sourceMappingURL=tanstack-table.js.map
+//# sourceMappingURL=tanstack-table.js.map

package/dist/tanstack-table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tanstack-table.ts"],"names":[],"mappings":"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","file":"tanstack-table.js","sourcesContent":["/**\n * The TanStack Table v9 adapter (`@tanstack/table-core` 9, MIT, and its React and Svelte adapters): an sdvtables spec\n * as the options `useTable` (React) or `createTable` (Svelte) takes. Columns keep the HTML table's labels, alignment,\n * number formats (a scaleNote and the rank suffix included) and sort, missing values last both ways; logo, wordmark,\n * headshot and superscript-rank cells come out as plain data that the caller's `render` turns into its framework's\n * markup. TanStack Table is headless: the caller owns the `<table>`, its CSS and its interactions.\n * Pure: TanStack Table is never imported at runtime (types only), and nothing touches the DOM, so the module imports on\n * a server and in any framework.\n */\nimport type { CellContext, ColumnDef, RowData, Row as TRow, TableFeatures } from \"@tanstack/table-core\";\nimport {\n  type GridName,\n  checkHeight,\n  formatterFor,\n  headshotUrls,\n  logoMarks,\n  missingLast,\n  rankParts,\n  rowIds,\n  scaleNotes,\n  unmapped,\n  value,\n} from \"./_grid.js\";\nimport { NUMERIC_KINDS, isMissing } from \"./engine.js\";\nimport { isBlank, toNumber } from \"./format.js\";\nimport { alignOf, labelOf } from \"./html/parts.js\";\nimport type { ColumnSpec, TableSpec } from \"./spec.js\";\nimport { teamNameSync } from \"./team-name.js\";\n\n/** A cell sdvtables draws as more than text, as data: `render` turns it into the caller's framework markup. */\nexport type CellPart =\n  | {\n      readonly type: \"image\";\n      /** \"logo\" and \"wordmark\": a team's mark; \"headshot\": a player's photo. */\n      readonly kind: \"logo\" | \"wordmark\" | \"headshot\";\n      readonly src: string;\n      /** The team's name for a mark; \"\" for a headshot, which is decorative (the player's name sits in its row). */\n      readonly alt: string;\n      /** px */\n      readonly height: number;\n      /** The resolved team id or the player id, as the HTML table's `data-sdv-id`. */\n      readonly id: string;\n      /** A logo column with `includeName`: the cell's text, drawn after the image. */\n      readonly text?: string;\n    }\n  | {\n      /** A rank with `superscript` (the default): `num` then `suffix` in a `<sup>` of `size` (\"1\", \"st\"). */\n      readonly type: \"rank\";\n      readonly num: string;\n      readonly suffix: string;\n      readonly size: string;\n    };\n/** A column's CSS, from the spec: its alignment and width. */\nexport interface ColumnStyle {\n  /** The HTML table's alignment: the spec's `align`, else right for numbers and centre for images. */\n  readonly textAlign: \"left\" | \"center\" | \"right\";\n  /** The spec's `width`, as given (any CSS width). */\n  readonly width?: string;\n}\n/** `tanstackTable` options. */\nexport interface TanstackTableOptions<TFeatures extends TableFeatures> {\n  /**\n   * Your `tableFeatures({...})`: register `rowSortingFeature` and `sortedRowModel: createSortedRowModel()` for the\n   * columns' sort. It is passed through, and fixes the columns' type to your table's features.\n   */\n  features: TFeatures;\n  /**\n   * Turns an image or superscript-rank cell into your framework's markup: a React element, or Svelte's\n   * `renderSnippet(snippet, part)`. Without it, those cells are text: the team or player value, and \"1st\".\n   */\n  render?: (part: CellPart) => unknown;\n}\n/** What `tanstackTable` returns. */\nexport interface SdvTanstackTable<TFeatures extends TableFeatures, TData extends RowData> {\n  /** For `useTable(options)` / `createTable(options)`, or spread with your own options (`initialState`, ...). */\n  options: {\n    features: TFeatures;\n    columns: ColumnDef<TFeatures, TData>[];\n    data: readonly TData[];\n    /** With the spec's `rowKey` only. */\n    getRowId?: (row: TData) => string;\n  };\n  /** Each column's CSS by column id (the spec's key), for its `<th>` and `<td>`. */\n  columnStyle: Readonly<Record<string, ColumnStyle>>;\n}\n\nconst TS: GridName = {\n  fn: \"tanstackTable\",\n  ns: \"tanstack-table\",\n  grid: \"TanStack Table\",\n  short: \"TanStack Table\",\n  built: \"options\",\n};\n\n/**\n * An sdvtables spec as TanStack Table v9 options: `useTable(tanstackTable(spec, rows, { features }).options)`.\n *\n * - **Columns**: one accessor column per spec column, id the spec's key, header the HTML table's label (with a\n *   `scaleNote`'s suffix). Number cells (`num`, `int`, `pct`, `rank`, a `scaleNote`'s divisor and decimals) are the\n *   HTML table's text; a blank or unparseable number is missing (`undefined`), never 0.\n * - **Sorting**: sdvtables' own comparator (the column's `compare`, else by kind), with missing values last in both\n *   directions (`sortUndefined: \"last\"`). Register `rowSortingFeature` and `createSortedRowModel()` to use it.\n * - **Row ids**: with the spec's `rowKey`, `String(row[rowKey])`, checked unique and not blank (TanStack would merge two\n *   rows with one id); without it, TanStack's row index.\n * - **Images**: `logo`, `wordmark` and `headshot` cells, and superscript ranks, go through `render` as a `CellPart`.\n *   A team or player with no image keeps its text, with one warning. Team values may be abbreviations, names or\n *   numeric ids.\n *\n * Other kinds (pills, bars, team colours, sparklines...) show their plain value, with one warning per kind.\n * Synchronous: call `await prepare(spec)` (`@sportsdataverse/sdvtables/html`) first. Images are worked out once, from\n * `rows`: build again when the rows change, and keep the result stable between renders (module scope or a memo).\n *\n * @example\n * ```ts\n * import { createSortedRowModel, rowSortingFeature, tableFeatures } from \"@tanstack/table-core\";\n * import { defineTable } from \"@sportsdataverse/sdvtables\";\n * import { prepare } from \"@sportsdataverse/sdvtables/html\";\n * import { tanstackTable } from \"@sportsdataverse/sdvtables/tanstack-table\";\n *\n * // 2024 regular season, nflverse games\n * const rows = [\n *   { team: \"KC\", wins: 15, pf: 385 },\n *   { team: \"BUF\", wins: 13, pf: 525 },\n *   { team: \"LAC\", wins: 11, pf: 402 },\n * ];\n * const spec = defineTable<(typeof rows)[number]>()\n *   .columns((c) => [c.logo(\"team\", { league: \"nfl\", height: 28 }), c.int(\"wins\"), c.int(\"pf\")])\n *   .rowKey(\"team\")\n *   .build();\n * await prepare(spec);\n * const features = tableFeatures({ rowSortingFeature, sortedRowModel: createSortedRowModel() });\n * const { options } = tanstackTable(spec, rows, { features });\n * // in React: useTable(options), from @tanstack/react-table; in Svelte: createTable(options)\n * options.columns.map((c) => [c.id, c.header]);\n * ```\n */\nexport function tanstackTable<TFeatures extends TableFeatures, TData extends RowData>(\n  spec: TableSpec<TData>,\n  rows: readonly TData[],\n  o: TanstackTableOptions<TFeatures>,\n): SdvTanstackTable<TFeatures, TData> {\n  const { scaled, labelSuffix } = scaleNotes(spec);\n  const columnStyle: Record<string, ColumnStyle> = {};\n  const columns = spec.columns.map((col) => {\n    columnStyle[col.key] = {\n      textAlign: alignOf(col),\n      ...(col.width === undefined ? {} : { width: col.width }),\n    };\n    const asc = missingLast(col, rows)(\"asc\"); // TanStack reverses it for a descending sort\n    const numeric = NUMERIC_KINDS.has(col.kind);\n    const def = {\n      id: col.key,\n      header: labelOf(col) + (labelSuffix.get(col.key) ?? \"\"),\n      // a missing value is undefined, which sortUndefined keeps last both ways\n      accessorFn: (row: TData): unknown => {\n        const v = value(row, col.key);\n        return numeric ? (toNumber(v) ?? undefined) : isMissing(v) ? undefined : v;\n      },\n      cell: cellOf(col, formatterFor(col, scaled)),\n      sortFn: (a: TRow<TFeatures, TData>, b: TRow<TFeatures, TData>, id: string) =>\n        asc(a.getValue(id), b.getValue(id)),\n      sortUndefined: \"last\" as const,\n      ...(col.sortable === undefined ? {} : { enableSorting: col.sortable }),\n    };\n    return def as unknown as ColumnDef<TFeatures, TData>;\n  });\n\n  function cellOf(\n    col: ColumnSpec<TData>,\n    format: ((v: unknown) => string) | undefined,\n  ): (ctx: CellContext<TFeatures, TData, unknown>) => unknown {\n    const text = (v: unknown): string => (format ? format(v) : isBlank(v) ? \"\" : String(v));\n    const { render } = o;\n    switch (col.kind) {\n      case \"text\":\n      case \"num\":\n      case \"int\":\n      case \"pct\":\n        return (ctx) => text(ctx.getValue());\n      case \"rank\":\n        return (ctx) => {\n          const r = col.superscript && render ? rankParts(ctx.getValue()) : null;\n          return r === null || !render\n            ? text(ctx.getValue())\n            : render({ type: \"rank\", ...r, size: col.suffixSize });\n        };\n      case \"logo\":\n      case \"wordmark\": {\n        const h = checkHeight(col.height, col.kind);\n        const marks = logoMarks(col, rows);\n        const kind = col.kind;\n        const withName = kind === \"logo\" && col.includeName;\n        return (ctx) => {\n          const raw = text(ctx.getValue());\n          const t = raw.trim(); // the lookup key: 12, \"12\" and \" 12 \" are one team\n          const m = marks.get(t);\n          if (m === undefined || !render) return raw; // blank, unknown team or no image: the text, as the HTML table\n          const alt = teamNameSync(col.league, m.id) ?? t;\n          return render({\n            type: \"image\",\n            kind,\n            src: m.url,\n            alt,\n            height: h,\n            id: m.id,\n            ...(withName ? { text: raw } : {}),\n          });\n        };\n      }\n      case \"headshot\": {\n        const h = checkHeight(col.height, \"headshot\");\n        const urls = headshotUrls(col, rows, TS);\n        return (ctx) => {\n          const raw = text(ctx.getValue());\n          const src = urls.get(raw.trim());\n          return src === undefined || !render\n            ? raw\n            : render({ type: \"image\", kind: \"headshot\", src, alt: \"\", height: h, id: raw.trim() });\n        };\n      }\n      default:\n        unmapped(col.kind, TS);\n        return (ctx) => text(ctx.getValue());\n    }\n  }\n\n  // a repeated or blank rowKey value would give TanStack one id for two rows; checked once, here\n  const getRowId = spec.rowKey === undefined ? undefined : rowIds(rows, spec.rowKey, TS);\n  return {\n    options: { features: o.features, columns, data: rows, ...(getRowId === undefined ? {} : { getRowId }) },\n    columnStyle,\n  };\n}\n"]}

package/dist/{tokens-CpYFsFtf.d.ts → tokens-CHwBt9gs.d.ts}

@@ -1,4 +1,4 @@
-import { D as Density, a as ThemeRef } from './spec-BEhLDtj_.js';
+import { D as Density, a as ThemeRef } from './spec-A88vJX5A.js';
 
 type Role = "body" | "pad" | "title" | "subtitle" | "label" | "group" | "source";
 type DensitySizes = Readonly<Record<Role, number>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sportsdataverse/sdvtables",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Publication tables for SportsDataverse data — TableSpec, 18+3 themes, team logos/headshots/colors, static HTML renderer. TypeScript port of sdvplotR gt_* / gtUtils",
   "license": "MIT",
   "keywords": [
@@ -11,7 +11,11 @@
     "html-tables",
     "gt",
     "great-tables",
-    "team-logos"
+    "team-logos",
+    "mui",
+    "mui-x-data-grid",
+    "ag-grid",
+    "tanstack-table"
   ],
   "homepage": "https://plot.sportsdataverse.org",
   "bugs": "https://github.com/sportsdataverse/sdvplot-js/issues",
@@ -22,6 +26,7 @@
   },
   "files": [
     "dist",
+    "data",
     "NOTICE.md"
   ],
   "exports": {
@@ -37,6 +42,18 @@
       "types": "./dist/react.d.ts",
       "import": "./dist/react.js"
     },
+    "./mui": {
+      "types": "./dist/mui.d.ts",
+      "import": "./dist/mui.js"
+    },
+    "./aggrid": {
+      "types": "./dist/aggrid.d.ts",
+      "import": "./dist/aggrid.js"
+    },
+    "./tanstack-table": {
+      "types": "./dist/tanstack-table.d.ts",
+      "import": "./dist/tanstack-table.js"
+    },
     "./export": {
       "types": "./dist/export.d.ts",
       "import": "./dist/export.js"
@@ -44,11 +61,23 @@
     "./package.json": "./package.json"
   },
   "peerDependencies": {
+    "@mui/x-data-grid": ">=9.15.0",
     "@sportsdataverse/sdvplot": "^0",
+    "@tanstack/table-core": ">=9.3.1",
+    "ag-grid-community": ">=36.2.0",
     "playwright": ">=1.45",
     "react": ">=18"
   },
   "peerDependenciesMeta": {
+    "@mui/x-data-grid": {
+      "optional": true
+    },
+    "@tanstack/table-core": {
+      "optional": true
+    },
+    "ag-grid-community": {
+      "optional": true
+    },
     "playwright": {
       "optional": true
     },
@@ -57,16 +86,24 @@
     }
   },
   "devDependencies": {
+    "@emotion/react": "11.14.0",
+    "@emotion/styled": "11.14.1",
+    "@mui/material": "9.5.0",
+    "@mui/system": "9.5.0",
+    "@mui/x-data-grid": "9.15.0",
     "@observablehq/plot": "^0.6.17",
+    "@tanstack/react-table": "9.3.1",
+    "@tanstack/table-core": "9.3.1",
     "@testing-library/react": "^16.3.3",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
+    "ag-grid-community": "36.2.0",
     "happy-dom": "^15.11.0",
     "jsdom": "^26.1.0",
     "playwright": "^1.64.0",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
-    "@sportsdataverse/sdvplot": "^0.1.0"
+    "@sportsdataverse/sdvplot": "^0.2.0"
   },
   "repository": {
     "type": "git",