@pyreon/table 0.0.1

package/lib/index.js

@@ -0,0 +1,94 @@
+import { createTable } from "@tanstack/table-core";
+import { onUnmount } from "@pyreon/core";
+import { batch, computed, effect, signal } from "@pyreon/reactivity";
+
+export * from "@tanstack/table-core"
+
+//#region src/use-table.ts
+/**
+* Create a reactive TanStack Table instance. Returns a read-only signal
+* that holds the Table instance — read it in effects or templates to
+* track state changes.
+*
+* Options are passed as a function so reactive signals (e.g. data, columns)
+* can be read inside, and the table updates automatically when they change.
+*
+* @example
+* const data = signal([{ name: "Alice" }, { name: "Bob" }])
+* const table = useTable(() => ({
+*   data: data(),
+*   columns: [{ accessorKey: "name", header: "Name" }],
+*   getCoreRowModel: getCoreRowModel(),
+* }))
+* // In template: () => table().getRowModel().rows
+*/
+function useTable(options) {
+	const tableState = signal({});
+	const version = signal(0);
+	const table = createTable({
+		state: {},
+		onStateChange() {},
+		renderFallbackValue: null,
+		...options()
+	});
+	tableState.set(table.initialState);
+	const tableSig = computed(() => {
+		version();
+		return table;
+	});
+	const cleanup = effect(() => {
+		const userOpts = options();
+		const currentState = tableState();
+		let stateChanged = false;
+		table.setOptions((prev) => ({
+			...prev,
+			...userOpts,
+			state: {
+				...currentState,
+				...userOpts.state
+			},
+			onStateChange: (updater) => {
+				const newState = typeof updater === "function" ? updater(tableState.peek()) : updater;
+				stateChanged = true;
+				batch(() => {
+					tableState.set(newState);
+					version.update((n) => n + 1);
+				});
+				userOpts.onStateChange?.(updater);
+			}
+		}));
+		if (!stateChanged) version.update((n) => n + 1);
+	});
+	onUnmount(() => cleanup.dispose());
+	return tableSig;
+}
+
+//#endregion
+//#region src/flex-render.ts
+/**
+* Check whether a value is a Pyreon VNode (has type, props, children, key).
+*/
+function isVNode(value) {
+	return value != null && typeof value === "object" && !Array.isArray(value) && "type" in value && "props" in value && "children" in value;
+}
+/**
+* Renders a TanStack Table column def template (header, cell, footer).
+* Handles strings, numbers, functions (components/render fns), and VNodes.
+*
+* @example
+* // In a header:
+* flexRender(header.column.columnDef.header, header.getContext())
+* // In a cell:
+* flexRender(cell.column.columnDef.cell, cell.getContext())
+*/
+function flexRender(component, props) {
+	if (component == null) return null;
+	if (typeof component === "string" || typeof component === "number") return component;
+	if (typeof component === "function") return component(props);
+	if (isVNode(component)) return component;
+	return null;
+}
+
+//#endregion
+export { flexRender, useTable };
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/use-table.ts","../src/flex-render.ts"],"sourcesContent":["import { onUnmount } from '@pyreon/core'\nimport { signal, computed, effect, batch } from '@pyreon/reactivity'\nimport type { Computed } from '@pyreon/reactivity'\nimport {\n  createTable,\n  type RowData,\n  type TableOptions,\n  type TableOptionsResolved,\n  type TableState,\n  type Table,\n  type Updater,\n} from '@tanstack/table-core'\n\nexport type UseTableOptions<TData extends RowData> = () => TableOptions<TData>\n\n/**\n * Create a reactive TanStack Table instance. Returns a read-only signal\n * that holds the Table instance — read it in effects or templates to\n * track state changes.\n *\n * Options are passed as a function so reactive signals (e.g. data, columns)\n * can be read inside, and the table updates automatically when they change.\n *\n * @example\n * const data = signal([{ name: \"Alice\" }, { name: \"Bob\" }])\n * const table = useTable(() => ({\n *   data: data(),\n *   columns: [{ accessorKey: \"name\", header: \"Name\" }],\n *   getCoreRowModel: getCoreRowModel(),\n * }))\n * // In template: () => table().getRowModel().rows\n */\nexport function useTable<TData extends RowData>(\n  options: UseTableOptions<TData>,\n): Computed<Table<TData>> {\n  // Internal state managed by the adapter — merged with user-provided state.\n  const tableState = signal<TableState>({} as TableState)\n\n  // Version counter — Pyreon signals use Object.is for equality, so\n  // setting the same table reference is a no-op. We bump a version\n  // counter to force the computed to re-evaluate and notify consumers.\n  const version = signal(0)\n\n  // Resolve user options with adapter-required defaults.\n  const resolvedOptions: TableOptionsResolved<TData> = {\n    state: {},\n    onStateChange() {\n      /* default noop */\n    },\n    renderFallbackValue: null,\n    ...options(),\n  }\n\n  // Create the table instance once.\n  const table = createTable(resolvedOptions)\n\n  // Initialize internal state from the table's initial state.\n  tableState.set(table.initialState)\n\n  // The signal that consumers read — depends on `version` so it\n  // re-notifies whenever we bump the version after a state/option change.\n  const tableSig = computed(() => {\n    version()\n    return table\n  })\n\n  // Sync options reactively: when signals inside options() change, or when\n  // internal state changes, update the table and notify consumers.\n  const cleanup = effect(() => {\n    const userOpts = options()\n    const currentState = tableState()\n    let stateChanged = false\n\n    table.setOptions((prev) => ({\n      ...prev,\n      ...userOpts,\n      state: {\n        ...currentState,\n        ...userOpts.state,\n      },\n      onStateChange: (updater: Updater<TableState>) => {\n        const newState =\n          typeof updater === 'function' ? updater(tableState.peek()) : updater\n\n        stateChanged = true\n        batch(() => {\n          tableState.set(newState)\n          version.update((n) => n + 1)\n        })\n\n        userOpts.onStateChange?.(updater)\n      },\n    }))\n\n    // Only bump if setOptions didn't already trigger a state change\n    if (!stateChanged) {\n      version.update((n) => n + 1)\n    }\n  })\n\n  // Clean up the effect when the component unmounts.\n  onUnmount(() => cleanup.dispose())\n\n  return tableSig\n}\n","import type { RowData } from '@tanstack/table-core'\n\n/**\n * Check whether a value is a Pyreon VNode (has type, props, children, key).\n */\nfunction isVNode(value: unknown): boolean {\n  return (\n    value != null &&\n    typeof value === 'object' &&\n    !Array.isArray(value) &&\n    'type' in (value as Record<string, unknown>) &&\n    'props' in (value as Record<string, unknown>) &&\n    'children' in (value as Record<string, unknown>)\n  )\n}\n\n/**\n * Renders a TanStack Table column def template (header, cell, footer).\n * Handles strings, numbers, functions (components/render fns), and VNodes.\n *\n * @example\n * // In a header:\n * flexRender(header.column.columnDef.header, header.getContext())\n * // In a cell:\n * flexRender(cell.column.columnDef.cell, cell.getContext())\n */\nexport function flexRender<_TData extends RowData, TValue>(\n  component:\n    | ((p: TValue) => unknown)\n    | string\n    | number\n    | undefined\n    | null\n    | unknown,\n  props: TValue,\n): unknown {\n  if (component == null) return null\n  if (typeof component === 'string' || typeof component === 'number')\n    return component\n  if (typeof component === 'function')\n    return (component as (p: TValue) => unknown)(props)\n  // Pass through VNodes and other objects as-is (the renderer handles them)\n  if (isVNode(component)) return component\n  return null\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgCA,SAAgB,SACd,SACwB;CAExB,MAAM,aAAa,OAAmB,EAAE,CAAe;CAKvD,MAAM,UAAU,OAAO,EAAE;CAazB,MAAM,QAAQ,YAVuC;EACnD,OAAO,EAAE;EACT,gBAAgB;EAGhB,qBAAqB;EACrB,GAAG,SAAS;EACb,CAGyC;AAG1C,YAAW,IAAI,MAAM,aAAa;CAIlC,MAAM,WAAW,eAAe;AAC9B,WAAS;AACT,SAAO;GACP;CAIF,MAAM,UAAU,aAAa;EAC3B,MAAM,WAAW,SAAS;EAC1B,MAAM,eAAe,YAAY;EACjC,IAAI,eAAe;AAEnB,QAAM,YAAY,UAAU;GAC1B,GAAG;GACH,GAAG;GACH,OAAO;IACL,GAAG;IACH,GAAG,SAAS;IACb;GACD,gBAAgB,YAAiC;IAC/C,MAAM,WACJ,OAAO,YAAY,aAAa,QAAQ,WAAW,MAAM,CAAC,GAAG;AAE/D,mBAAe;AACf,gBAAY;AACV,gBAAW,IAAI,SAAS;AACxB,aAAQ,QAAQ,MAAM,IAAI,EAAE;MAC5B;AAEF,aAAS,gBAAgB,QAAQ;;GAEpC,EAAE;AAGH,MAAI,CAAC,aACH,SAAQ,QAAQ,MAAM,IAAI,EAAE;GAE9B;AAGF,iBAAgB,QAAQ,SAAS,CAAC;AAElC,QAAO;;;;;;;;AClGT,SAAS,QAAQ,OAAyB;AACxC,QACE,SAAS,QACT,OAAO,UAAU,YACjB,CAAC,MAAM,QAAQ,MAAM,IACrB,UAAW,SACX,WAAY,SACZ,cAAe;;;;;;;;;;;;AAcnB,SAAgB,WACd,WAOA,OACS;AACT,KAAI,aAAa,KAAM,QAAO;AAC9B,KAAI,OAAO,cAAc,YAAY,OAAO,cAAc,SACxD,QAAO;AACT,KAAI,OAAO,cAAc,WACvB,QAAQ,UAAqC,MAAM;AAErD,KAAI,QAAQ,UAAU,CAAE,QAAO;AAC/B,QAAO"}

package/lib/types/index.d.ts

@@ -0,0 +1,93 @@
+import { createTable } from "@tanstack/table-core";
+import { onUnmount } from "@pyreon/core";
+import { batch, computed, effect, signal } from "@pyreon/reactivity";
+export * from "@tanstack/table-core";
+
+//#region src/use-table.ts
+/**
+* Create a reactive TanStack Table instance. Returns a read-only signal
+* that holds the Table instance — read it in effects or templates to
+* track state changes.
+*
+* Options are passed as a function so reactive signals (e.g. data, columns)
+* can be read inside, and the table updates automatically when they change.
+*
+* @example
+* const data = signal([{ name: "Alice" }, { name: "Bob" }])
+* const table = useTable(() => ({
+*   data: data(),
+*   columns: [{ accessorKey: "name", header: "Name" }],
+*   getCoreRowModel: getCoreRowModel(),
+* }))
+* // In template: () => table().getRowModel().rows
+*/
+function useTable(options) {
+  const tableState = signal({});
+  const version = signal(0);
+  const table = createTable({
+    state: {},
+    onStateChange() {},
+    renderFallbackValue: null,
+    ...options()
+  });
+  tableState.set(table.initialState);
+  const tableSig = computed(() => {
+    version();
+    return table;
+  });
+  const cleanup = effect(() => {
+    const userOpts = options();
+    const currentState = tableState();
+    let stateChanged = false;
+    table.setOptions(prev => ({
+      ...prev,
+      ...userOpts,
+      state: {
+        ...currentState,
+        ...userOpts.state
+      },
+      onStateChange: updater => {
+        const newState = typeof updater === "function" ? updater(tableState.peek()) : updater;
+        stateChanged = true;
+        batch(() => {
+          tableState.set(newState);
+          version.update(n => n + 1);
+        });
+        userOpts.onStateChange?.(updater);
+      }
+    }));
+    if (!stateChanged) version.update(n => n + 1);
+  });
+  onUnmount(() => cleanup.dispose());
+  return tableSig;
+}
+
+//#endregion
+//#region src/flex-render.ts
+/**
+* Check whether a value is a Pyreon VNode (has type, props, children, key).
+*/
+function isVNode(value) {
+  return value != null && typeof value === "object" && !Array.isArray(value) && "type" in value && "props" in value && "children" in value;
+}
+/**
+* Renders a TanStack Table column def template (header, cell, footer).
+* Handles strings, numbers, functions (components/render fns), and VNodes.
+*
+* @example
+* // In a header:
+* flexRender(header.column.columnDef.header, header.getContext())
+* // In a cell:
+* flexRender(cell.column.columnDef.cell, cell.getContext())
+*/
+function flexRender(component, props) {
+  if (component == null) return null;
+  if (typeof component === "string" || typeof component === "number") return component;
+  if (typeof component === "function") return component(props);
+  if (isVNode(component)) return component;
+  return null;
+}
+
+//#endregion
+export { flexRender, useTable };
+//# sourceMappingURL=index.d.ts.map

package/lib/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/use-table.ts","../../src/flex-render.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgCA,SAAgB,QAAA,CACd,OAAA,EACwB;EAExB,MAAM,UAAA,GAAa,MAAA,CAAmB,CAAA,CAAE,CAAe;EAKvD,MAAM,OAAA,GAAU,MAAA,CAAO,CAAA,CAAE;EAazB,MAAM,KAAA,GAAQ,WAAA,CAVuC;IACnD,KAAA,EAAO,CAAA,CAAE;IACT,aAAA,CAAA,EAAgB,CAAA,CAAA;IAGhB,mBAAA,EAAqB,IAAA;IACrB,GAAG,OAAA,CAAA;GACJ,CAGyC;EAG1C,UAAA,CAAW,GAAA,CAAI,KAAA,CAAM,YAAA,CAAa;EAIlC,MAAM,QAAA,GAAW,QAAA,CAAA,MAAe;IAC9B,OAAA,CAAA,CAAS;IACT,OAAO,KAAA;IACP;EAIF,MAAM,OAAA,GAAU,MAAA,CAAA,MAAa;IAC3B,MAAM,QAAA,GAAW,OAAA,CAAA,CAAS;IAC1B,MAAM,YAAA,GAAe,UAAA,CAAA,CAAY;IACjC,IAAI,YAAA,GAAe,KAAA;IAEnB,KAAA,CAAM,UAAA,CAAY,IAAA,KAAU;MAC1B,GAAG,IAAA;MACH,GAAG,QAAA;MACH,KAAA,EAAO;QACL,GAAG,YAAA;QACH,GAAG,QAAA,CAAS;OACb;MACD,aAAA,EAAgB,OAAA,IAAiC;QAC/C,MAAM,QAAA,GACJ,OAAO,OAAA,KAAY,UAAA,GAAa,OAAA,CAAQ,UAAA,CAAW,IAAA,CAAA,CAAM,CAAC,GAAG,OAAA;QAE/D,YAAA,GAAe,IAAA;QACf,KAAA,CAAA,MAAY;UACV,UAAA,CAAW,GAAA,CAAI,QAAA,CAAS;UACxB,OAAA,CAAQ,MAAA,CAAQ,CAAA,IAAM,CAAA,GAAI,CAAA,CAAE;UAC5B;QAEF,QAAA,CAAS,aAAA,GAAgB,OAAA,CAAQ;;KAEpC,CAAA,CAAE;IAGH,IAAI,CAAC,YAAA,EACH,OAAA,CAAQ,MAAA,CAAQ,CAAA,IAAM,CAAA,GAAI,CAAA,CAAE;IAE9B;EAGF,SAAA,CAAA,MAAgB,OAAA,CAAQ,OAAA,CAAA,CAAS,CAAC;EAElC,OAAO,QAAA;;;;;;;;AClGT,SAAS,OAAA,CAAQ,KAAA,EAAyB;EACxC,OACE,KAAA,IAAS,IAAA,IACT,OAAO,KAAA,KAAU,QAAA,IACjB,CAAC,KAAA,CAAM,OAAA,CAAQ,KAAA,CAAM,IACrB,MAAA,IAAW,KAAA,IACX,OAAA,IAAY,KAAA,IACZ,UAAA,IAAe,KAAA;;;;;;;;;;;;AAcnB,SAAgB,UAAA,CACd,SAAA,EAOA,KAAA,EACS;EACT,IAAI,SAAA,IAAa,IAAA,EAAM,OAAO,IAAA;EAC9B,IAAI,OAAO,SAAA,KAAc,QAAA,IAAY,OAAO,SAAA,KAAc,QAAA,EACxD,OAAO,SAAA;EACT,IAAI,OAAO,SAAA,KAAc,UAAA,EACvB,OAAQ,SAAA,CAAqC,KAAA,CAAM;EAErD,IAAI,OAAA,CAAQ,SAAA,CAAU,EAAE,OAAO,SAAA;EAC/B,OAAO,IAAA"}

package/lib/types/index2.d.ts

@@ -0,0 +1,40 @@
+import { RowData, Table, TableOptions } from "@tanstack/table-core";
+import { Computed } from "@pyreon/reactivity";
+export * from "@tanstack/table-core";
+
+//#region src/use-table.d.ts
+type UseTableOptions<TData extends RowData> = () => TableOptions<TData>;
+/**
+ * Create a reactive TanStack Table instance. Returns a read-only signal
+ * that holds the Table instance — read it in effects or templates to
+ * track state changes.
+ *
+ * Options are passed as a function so reactive signals (e.g. data, columns)
+ * can be read inside, and the table updates automatically when they change.
+ *
+ * @example
+ * const data = signal([{ name: "Alice" }, { name: "Bob" }])
+ * const table = useTable(() => ({
+ *   data: data(),
+ *   columns: [{ accessorKey: "name", header: "Name" }],
+ *   getCoreRowModel: getCoreRowModel(),
+ * }))
+ * // In template: () => table().getRowModel().rows
+ */
+declare function useTable<TData extends RowData>(options: UseTableOptions<TData>): Computed<Table<TData>>;
+//#endregion
+//#region src/flex-render.d.ts
+/**
+ * Renders a TanStack Table column def template (header, cell, footer).
+ * Handles strings, numbers, functions (components/render fns), and VNodes.
+ *
+ * @example
+ * // In a header:
+ * flexRender(header.column.columnDef.header, header.getContext())
+ * // In a cell:
+ * flexRender(cell.column.columnDef.cell, cell.getContext())
+ */
+declare function flexRender<_TData extends RowData, TValue>(component: ((p: TValue) => unknown) | string | number | undefined | null | unknown, props: TValue): unknown;
+//#endregion
+export { type UseTableOptions, flexRender, useTable };
+//# sourceMappingURL=index2.d.ts.map

package/lib/types/index2.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.d.ts","names":[],"sources":["../../src/use-table.ts","../../src/flex-render.ts"],"mappings":";;;;;KAaY,eAAA,eAA8B,OAAA,UAAiB,YAAA,CAAa,KAAA;;;;AAAxE;;;;;;;;;;;;;;iBAmBgB,QAAA,eAAuB,OAAA,CAAA,CACrC,OAAA,EAAS,eAAA,CAAgB,KAAA,IACxB,QAAA,CAAS,KAAA,CAAM,KAAA;;;;;;;;AArBlB;;;;;iBCagB,UAAA,gBAA0B,OAAA,SAAA,CACxC,SAAA,IACM,CAAA,EAAG,MAAA,8DAMT,KAAA,EAAO,MAAA"}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@pyreon/table",
+  "version": "0.0.1",
+  "description": "Pyreon adapter for TanStack Table",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pyreon/fundamentals.git",
+    "directory": "packages/table"
+  },
+  "homepage": "https://github.com/pyreon/fundamentals/tree/main/packages/table#readme",
+  "bugs": {
+    "url": "https://github.com/pyreon/fundamentals/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "lib",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "types": "./lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "bun": "./src/index.ts",
+      "import": "./lib/index.js",
+      "types": "./lib/types/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "vl_rolldown_build",
+    "dev": "vl_rolldown_build-watch",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@tanstack/table-core": "^8.0.0"
+  },
+  "peerDependencies": {
+    "@pyreon/core": "^0.2.1",
+    "@pyreon/reactivity": "^0.2.1"
+  },
+  "devDependencies": {
+    "@happy-dom/global-registrator": "^20.8.3",
+    "@pyreon/core": "^0.2.1",
+    "@pyreon/reactivity": "^0.2.1",
+    "@pyreon/runtime-dom": "^0.2.1"
+  }
+}

package/src/flex-render.ts

@@ -0,0 +1,45 @@
+import type { RowData } from '@tanstack/table-core'
+
+/**
+ * Check whether a value is a Pyreon VNode (has type, props, children, key).
+ */
+function isVNode(value: unknown): boolean {
+  return (
+    value != null &&
+    typeof value === 'object' &&
+    !Array.isArray(value) &&
+    'type' in (value as Record<string, unknown>) &&
+    'props' in (value as Record<string, unknown>) &&
+    'children' in (value as Record<string, unknown>)
+  )
+}
+
+/**
+ * Renders a TanStack Table column def template (header, cell, footer).
+ * Handles strings, numbers, functions (components/render fns), and VNodes.
+ *
+ * @example
+ * // In a header:
+ * flexRender(header.column.columnDef.header, header.getContext())
+ * // In a cell:
+ * flexRender(cell.column.columnDef.cell, cell.getContext())
+ */
+export function flexRender<_TData extends RowData, TValue>(
+  component:
+    | ((p: TValue) => unknown)
+    | string
+    | number
+    | undefined
+    | null
+    | unknown,
+  props: TValue,
+): unknown {
+  if (component == null) return null
+  if (typeof component === 'string' || typeof component === 'number')
+    return component
+  if (typeof component === 'function')
+    return (component as (p: TValue) => unknown)(props)
+  // Pass through VNodes and other objects as-is (the renderer handles them)
+  if (isVNode(component)) return component
+  return null
+}

package/src/index.ts

@@ -0,0 +1,11 @@
+// ─── TanStack Table core — re-export everything ─────────────────────────────
+// Mirrors the approach of @tanstack/react-table and @tanstack/solid-table:
+// users can import any core utility, type, or built-in fn from @pyreon/table.
+export * from '@tanstack/table-core'
+
+// ─── Pyreon adapter ─────────────────────────────────────────────────────────────
+
+export { useTable } from './use-table'
+export type { UseTableOptions } from './use-table'
+
+export { flexRender } from './flex-render'