@tanstack/vue-table 9.0.0-beta.6 → 9.0.0-beta.61

package/README.md

@@ -39,6 +39,8 @@
 > - [Solid Table](https://tanstack.com/table/alpha/docs/framework/solid/solid-table)
 > - [Svelte Table](https://tanstack.com/table/alpha/docs/framework/svelte/svelte-table)
 > - [Vue Table](https://tanstack.com/table/alpha/docs/framework/vue/vue-table)
+> - [Alpine Table](https://tanstack.com/table/alpha/docs/framework/alpine/alpine-table)
+> - [Ember Table](https://tanstack.com/table/alpha/docs/framework/ember/ember-table)
 
 A headless table library for building powerful datagrids with full control over markup, styles, and behavior.
 

package/dist/FlexRender.d.ts

@@ -59,5 +59,4 @@ declare const FlexRender: import("vue").DefineComponent<{
   footer: FlexRenderHeader;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //#endregion
-export { FlexRender, FlexRenderCell, FlexRenderHeader, flexRender };
-//# sourceMappingURL=FlexRender.d.ts.map
+export { FlexRender, FlexRenderCell, FlexRenderHeader, flexRender };

package/dist/FlexRender.js

@@ -6,8 +6,10 @@ import { defineComponent, h, isVNode } from "vue";
 * @example flexRender(cell.column.columnDef.cell, cell.getContext())
 */
 function flexRender(render, props) {
+	if (render === null || render === void 0) return render;
 	if (typeof render === "function") {
 		const rendered = render(props);
+		if (rendered === null || rendered === void 0) return rendered;
 		if (isVNode(rendered)) return rendered;
 		if (typeof rendered === "function" || typeof rendered === "object") return h(rendered, props);
 		return rendered;
@@ -60,11 +62,10 @@ const FlexRender = defineComponent({
 	setup: (props) => {
 		return () => {
 			if (props.cell) {
-				var _cell$getIsAggregated, _cell$getIsPlaceholde;
 				const cell = props.cell;
 				const def = cell.column.columnDef;
-				if ((_cell$getIsAggregated = cell.getIsAggregated) === null || _cell$getIsAggregated === void 0 ? void 0 : _cell$getIsAggregated.call(cell)) return flexRender(def.aggregatedCell ?? def.cell, cell.getContext());
-				if ((_cell$getIsPlaceholde = cell.getIsPlaceholder) === null || _cell$getIsPlaceholde === void 0 ? void 0 : _cell$getIsPlaceholde.call(cell)) return null;
+				if (cell.getIsAggregated?.()) return flexRender(def.aggregatedCell ?? def.cell, cell.getContext());
+				if (cell.getIsPlaceholder?.()) return null;
 				return flexRender(def.cell, cell.getContext());
 			}
 			if (props.header) return flexRender(props.header.column.columnDef.header, props.header.getContext());
@@ -75,5 +76,4 @@ const FlexRender = defineComponent({
 });
 
 //#endregion
-export { FlexRender, flexRender };
-//# sourceMappingURL=FlexRender.js.map
+export { FlexRender, flexRender };

package/dist/createTableHook.d.ts

@@ -1,7 +1,7 @@
 import { FlexRenderCell, FlexRenderHeader } from "./FlexRender.js";
 import { TableOptionsWithReactiveData, VueTable } from "./useTable.js";
 import { Component, PropType } from "vue";
-import { AccessorFn, AccessorFnColumnDef, AccessorKeyColumnDef, Cell, CellContext, CellData, Column, ColumnDef, DeepKeys, DeepValue, DisplayColumnDef, GroupColumnDef, Header, IdentifiedColumnDef, NoInfer, Row, RowData, Table, TableFeatures, TableState } from "@tanstack/table-core";
+import { AccessorFn, AccessorFnColumnDef, AccessorKeyColumnDef, Cell, CellContext, CellData, Column, ColumnDef, DeepKeys, DeepValue, DisplayColumnDef, GroupColumnDef, Header, IdentifiedColumnDef, NoInfer, Row, RowData, Table, TableFeatures } from "@tanstack/table-core";
 
 //#region src/createTableHook.d.ts
 type ComponentType<T extends Record<string, any>> = Component<T>;
@@ -59,13 +59,48 @@ interface AppCellProps<TFeatures extends TableFeatures, TData extends RowData, T
 interface AppHeaderProps<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData> {
   header: Header<TFeatures, TData, TValue>;
 }
-type AppVueTable<TFeatures extends TableFeatures, TData extends RowData, TSelected, TTableComponents extends Record<string, ComponentType<any>>, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> = VueTable<TFeatures, TData> & NoInfer<TTableComponents> & {
+type AppVueTable<TFeatures extends TableFeatures, TData extends RowData, TTableComponents extends Record<string, ComponentType<any>>, _TCellComponents extends Record<string, ComponentType<any>>, _THeaderComponents extends Record<string, ComponentType<any>>> = VueTable<TFeatures, TData> & NoInfer<TTableComponents> & {
   AppTable: Component<AppTableProps>;
   AppCell: Component<AppCellProps<TFeatures, TData>>;
   AppHeader: Component<AppHeaderProps<TFeatures, TData>>;
   AppFooter: Component<AppHeaderProps<TFeatures, TData>>;
   FlexRender: typeof AppFlexRender;
 };
+interface CreateTableHookResult<TFeatures extends TableFeatures, TTableComponents extends Record<string, ComponentType<any>>, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> {
+  /** The features object that was passed to `createTableHook`. */
+  appFeatures: TFeatures;
+  /**
+   * A column helper pre-bound to `TFeatures` and the registered components, so
+   * the cell/header/footer render props expose the bound components.
+   */
+  createAppColumnHelper: <TData extends RowData>() => AppColumnHelper<TFeatures, TData, TCellComponents, THeaderComponents>;
+  /**
+   * Creates a table with the `App*` wrapper components and registered
+   * `tableComponents` attached. `TData` is inferred from the `data` option.
+   */
+  useAppTable: <TData extends RowData>(tableOptions: Omit<TableOptionsWithReactiveData<TFeatures, TData>, 'features'>) => AppVueTable<TFeatures, TData, TTableComponents, TCellComponents, THeaderComponents>;
+  /**
+   * Reads the table provided by the nearest `<table.AppTable>`. This is the same
+   * extended instance `useAppTable` returns, so the `App*` components and your
+   * `tableComponents` are available on it.
+   */
+  useTableContext: <TData extends RowData = RowData>() => AppVueTable<TFeatures, TData, TTableComponents, TCellComponents, THeaderComponents>;
+  /**
+   * Reads the cell provided by the nearest `<table.AppCell>`, extended with your
+   * `cellComponents` and a context-bound `FlexRender`.
+   */
+  useCellContext: <TValue extends CellData = CellData>() => Cell<TFeatures, any, TValue> & TCellComponents & {
+    FlexRender: Component;
+  };
+  /**
+   * Reads the header provided by the nearest `<table.AppHeader>` /
+   * `<table.AppFooter>`, extended with your `headerComponents` and a
+   * context-bound `FlexRender`.
+   */
+  useHeaderContext: <TValue extends CellData = CellData>() => Header<TFeatures, any, TValue> & THeaderComponents & {
+    FlexRender: Component;
+  };
+}
 declare const AppFlexRender: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
   cell: {
     type: PropType<FlexRenderCell>;
@@ -110,7 +145,6 @@ declare const AppFlexRender: import("vue").DefineComponent<import("vue").Extract
  * ```ts
  * const { useAppTable, createAppColumnHelper } = createTableHook({
  *   features,
- *   rowModels: {},
  *   tableComponents: {},
  *   cellComponents: {},
  *   headerComponents: {},
@@ -122,14 +156,6 @@ declare function createTableHook<TFeatures extends TableFeatures, const TTableCo
   cellComponents,
   headerComponents,
   ...defaultTableOptions
-}: CreateTableHookOptions<TFeatures, TTableComponents, TCellComponents, THeaderComponents>): {
-  appFeatures: TFeatures;
-  createAppColumnHelper: <TData extends RowData>() => AppColumnHelper<TFeatures, TData, TCellComponents, THeaderComponents>;
-  useAppTable: <TData extends RowData>(tableOptions: Omit<TableOptionsWithReactiveData<TFeatures, TData>, "features" | "rowModels">) => AppVueTable<TFeatures, TData, TableState<TFeatures>, TTableComponents, TCellComponents, THeaderComponents>;
-  useTableContext: <TData extends RowData = RowData>() => VueTable<TFeatures, TData>;
-  useCellContext: <TValue extends CellData = unknown>() => Cell<TFeatures, any, TValue>;
-  useHeaderContext: <TValue extends CellData = unknown>() => Header<TFeatures, any, TValue>;
-};
+}: CreateTableHookOptions<TFeatures, TTableComponents, TCellComponents, THeaderComponents>): CreateTableHookResult<TFeatures, TTableComponents, TCellComponents, THeaderComponents>;
 //#endregion
-export { AppCellContext, AppCellProps, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppFlexRender, AppGroupColumnDef, AppHeaderContext, AppHeaderProps, AppTableProps, AppVueTable, ComponentType, CreateTableHookOptions, createTableHook };
-//# sourceMappingURL=createTableHook.d.ts.map
+export { AppCellContext, AppCellProps, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppFlexRender, AppGroupColumnDef, AppHeaderContext, AppHeaderProps, AppTableProps, AppVueTable, ComponentType, CreateTableHookOptions, CreateTableHookResult, createTableHook };

package/dist/createTableHook.js

@@ -23,18 +23,9 @@ const AppFlexRender = defineComponent({
 	},
 	setup(props) {
 		return () => {
-			if (props.cell) return h(FlexRender, {
-				render: props.cell.column.columnDef.cell,
-				props: props.cell.getContext()
-			});
-			if (props.header) return h(FlexRender, {
-				render: props.header.column.columnDef.header,
-				props: props.header.getContext()
-			});
-			if (props.footer) return h(FlexRender, {
-				render: props.footer.column.columnDef.footer,
-				props: props.footer.getContext()
-			});
+			if (props.cell) return h(FlexRender, { cell: props.cell });
+			if (props.header) return h(FlexRender, { header: props.header });
+			if (props.footer) return h(FlexRender, { footer: props.footer });
 			return null;
 		};
 	}
@@ -50,7 +41,6 @@ const AppFlexRender = defineComponent({
 * ```ts
 * const { useAppTable, createAppColumnHelper } = createTableHook({
 *   features,
-*   rowModels: {},
 *   tableComponents: {},
 *   cellComponents: {},
 *   headerComponents: {},
@@ -107,8 +97,7 @@ function createTableHook({ tableComponents, cellComponents, headerComponents, ..
 			setup(_, { slots }) {
 				provide(TableContext, table);
 				return () => {
-					var _slots$default;
-					return (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots);
+					return slots.default?.();
 				};
 			}
 		});
@@ -126,8 +115,7 @@ function createTableHook({ tableComponents, cellComponents, headerComponents, ..
 					...cellComponents ?? {}
 				});
 				return () => {
-					var _slots$default2;
-					return (_slots$default2 = slots.default) === null || _slots$default2 === void 0 ? void 0 : _slots$default2.call(slots, { cell: extendedCell });
+					return slots.default?.({ cell: extendedCell });
 				};
 			}
 		});
@@ -145,8 +133,7 @@ function createTableHook({ tableComponents, cellComponents, headerComponents, ..
 					...headerComponents ?? {}
 				});
 				return () => {
-					var _slots$default3;
-					return (_slots$default3 = slots.default) === null || _slots$default3 === void 0 ? void 0 : _slots$default3.call(slots, { header: extendedHeader });
+					return slots.default?.({ header: extendedHeader });
 				};
 			}
 		});
@@ -164,8 +151,7 @@ function createTableHook({ tableComponents, cellComponents, headerComponents, ..
 					...headerComponents ?? {}
 				});
 				return () => {
-					var _slots$default4;
-					return (_slots$default4 = slots.default) === null || _slots$default4 === void 0 ? void 0 : _slots$default4.call(slots, { header: extendedHeader });
+					return slots.default?.({ header: extendedHeader });
 				};
 			}
 		});
@@ -189,5 +175,4 @@ function createTableHook({ tableComponents, cellComponents, headerComponents, ..
 }
 
 //#endregion
-export { AppFlexRender, createTableHook };
-//# sourceMappingURL=createTableHook.js.map
+export { AppFlexRender, createTableHook };

package/dist/experimental-worker-plugin.d.ts

@@ -0,0 +1 @@
+export * from "@tanstack/table-core/experimental-worker-plugin";

package/dist/experimental-worker-plugin.js

@@ -0,0 +1,3 @@
+export * from "@tanstack/table-core/experimental-worker-plugin"
+
+export {  };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { FlexRender, FlexRenderCell, FlexRenderHeader, flexRender } from "./FlexRender.js";
 import { TableOptionsWithReactiveData, VueTable, useTable } from "./useTable.js";
-import { AppCellContext, AppCellProps, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppFlexRender, AppGroupColumnDef, AppHeaderContext, AppHeaderProps, AppTableProps, AppVueTable, ComponentType, CreateTableHookOptions, createTableHook } from "./createTableHook.js";
+import { AppCellContext, AppCellProps, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppFlexRender, AppGroupColumnDef, AppHeaderContext, AppHeaderProps, AppTableProps, AppVueTable, ComponentType, CreateTableHookOptions, CreateTableHookResult, createTableHook } from "./createTableHook.js";
 export * from "@tanstack/table-core";
-export { AppCellContext, AppCellProps, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppFlexRender, AppGroupColumnDef, AppHeaderContext, AppHeaderProps, AppTableProps, AppVueTable, ComponentType, CreateTableHookOptions, FlexRender, FlexRenderCell, FlexRenderHeader, TableOptionsWithReactiveData, VueTable, createTableHook, flexRender, useTable };
+export { AppCellContext, AppCellProps, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppFlexRender, AppGroupColumnDef, AppHeaderContext, AppHeaderProps, AppTableProps, AppVueTable, ComponentType, CreateTableHookOptions, CreateTableHookResult, FlexRender, FlexRenderCell, FlexRenderHeader, TableOptionsWithReactiveData, VueTable, createTableHook, flexRender, useTable };

package/dist/merge-proxy.js

@@ -71,5 +71,4 @@ function flatMerge(...sources) {
 }
 
 //#endregion
-export { flatMerge, mergeProxy };
-//# sourceMappingURL=merge-proxy.js.map
+export { flatMerge, mergeProxy };

package/dist/reactivity.js

@@ -1,12 +1,8 @@
 import { computed, shallowRef, watch } from "vue";
-import { batch } from "@tanstack/store";
 
 //#region src/reactivity.ts
 function observerToCallback(observerOrNext) {
-	return typeof observerOrNext === "function" ? observerOrNext : (value) => {
-		var _observerOrNext$next;
-		return (_observerOrNext$next = observerOrNext.next) === null || _observerOrNext$next === void 0 ? void 0 : _observerOrNext$next.call(observerOrNext, value);
-	};
+	return typeof observerOrNext === "function" ? observerOrNext : (value) => observerOrNext.next?.(value);
 }
 function refToReadonlyAtom(source) {
 	return Object.assign(source, {
@@ -55,10 +51,9 @@ function vueReactivity() {
 			return refToWritableAtom(shallowRef(value));
 		},
 		untrack: (fn) => fn(),
-		batch
+		batch: (fn) => fn()
 	};
 }
 
 //#endregion
-export { vueReactivity };
-//# sourceMappingURL=reactivity.js.map
+export { vueReactivity };

package/dist/useTable.d.ts

@@ -3,13 +3,7 @@ import { RowData, Table, TableFeatures, TableOptions } from "@tanstack/table-cor
 
 //#region src/useTable.d.ts
 type TableOptionsWithReactiveData<TFeatures extends TableFeatures, TData extends RowData> = { [K in keyof TableOptions<TFeatures, TData>]: K extends 'data' ? MaybeRef<ReadonlyArray<TData>> : MaybeRef<TableOptions<TFeatures, TData>[K]> };
-type VueTable<TFeatures extends TableFeatures, TData extends RowData> = Omit<Table<TFeatures, TData>, 'store'> & {
-  /**
-   * @deprecated Prefer `table.atoms.<slice>.get()` for slice snapshots, or
-   * `table.Subscribe` for explicit subscriptions. `table.store.state` is a
-   * current-value snapshot and is easy to misuse in render code.
-   */
-  readonly store: Table<TFeatures, TData>['store'];
+type VueTable<TFeatures extends TableFeatures, TData extends RowData> = Table<TFeatures, TData> & {
   /** Creates a reactive render boundary. The child function reads the table
    * atoms it needs, so Vue only tracks those atom reads.
    */
@@ -30,7 +24,6 @@ type VueTable<TFeatures extends TableFeatures, TData extends RowData> = Omit<Tab
  * const table = useTable(
  *   {
  *     features,
- *     rowModels: {},
  *     columns,
  *     data,
  *   },
@@ -39,5 +32,4 @@ type VueTable<TFeatures extends TableFeatures, TData extends RowData> = Omit<Tab
  */
 declare function useTable<TFeatures extends TableFeatures, TData extends RowData>(tableOptions: TableOptions<TFeatures, TData> | TableOptionsWithReactiveData<TFeatures, TData>): VueTable<TFeatures, TData>;
 //#endregion
-export { TableOptionsWithReactiveData, VueTable, useTable };
-//# sourceMappingURL=useTable.d.ts.map
+export { TableOptionsWithReactiveData, VueTable, useTable };

package/dist/useTable.js

@@ -25,7 +25,6 @@ function getReactiveOptionDeps(options) {
 * const table = useTable(
 *   {
 *     features,
-*     rowModels: {},
 *     columns,
 *     data,
 *   },
@@ -38,17 +37,14 @@ function useTable(tableOptions) {
 	};
 	const reactivity = vueReactivity();
 	const mergedOptions = mergeProxy(tableOptions, { features: {
-		coreReativityFeature: reactivity,
+		coreReactivityFeature: reactivity,
 		...unref(tableOptions.features) ?? {}
 	} });
 	const coreTable = constructTable(mergeProxy(getOptionsWithReactiveValues(mergedOptions), { mergeOptions: (defaultOptions, newOptions) => {
 		return flatMerge(defaultOptions, newOptions);
 	} }));
 	const table = coreTable;
-	if (getCurrentScope()) onScopeDispose(() => {
-		var _reactivity$unmount;
-		return (_reactivity$unmount = reactivity.unmount) === null || _reactivity$unmount === void 0 ? void 0 : _reactivity$unmount.call(reactivity);
-	});
+	if (getCurrentScope()) onScopeDispose(() => reactivity.unmount?.());
 	watch(() => getReactiveOptionDeps(mergedOptions), () => {
 		syncTableOptions(coreTable, mergedOptions);
 	}, { immediate: true });
@@ -58,7 +54,7 @@ function useTable(tableOptions) {
 		if (!controlledState) return [];
 		const controlledValues = [];
 		for (const key of Object.keys(table.initialState)) {
-			if (!(key in controlledState) || (controlledAtoms === null || controlledAtoms === void 0 ? void 0 : controlledAtoms[key]) !== void 0) continue;
+			if (!(key in controlledState) || controlledAtoms?.[key] !== void 0) continue;
 			controlledValues.push(controlledState[key]);
 		}
 		return controlledValues;
@@ -72,5 +68,4 @@ function useTable(tableOptions) {
 }
 
 //#endregion
-export { useTable };
-//# sourceMappingURL=useTable.js.map
+export { useTable };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-table",
-  "version": "9.0.0-beta.6",
+  "version": "9.0.0-beta.61",
   "description": "Headless UI for building powerful tables & datagrids for Vue.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -22,41 +22,31 @@
     "tanstack-intent"
   ],
   "type": "module",
-  "types": "./dist/index.d.cts",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    },
-    "./flex-render": {
-      "import": "./dist/flex-render.js",
-      "require": "./dist/flex-render.cjs"
-    },
-    "./static-functions": {
-      "import": "./dist/static-functions.js",
-      "require": "./dist/static-functions.cjs"
-    },
+    ".": "./dist/index.js",
+    "./experimental-worker-plugin": "./dist/experimental-worker-plugin.js",
+    "./flex-render": "./dist/flex-render.js",
+    "./static-functions": "./dist/static-functions.js",
     "./package.json": "./package.json"
   },
   "sideEffects": false,
   "engines": {
-    "node": ">=16"
+    "node": ">=20"
   },
   "files": [
     "dist",
-    "src",
     "skills"
   ],
   "dependencies": {
     "@tanstack/store": "^0.11.0",
-    "@tanstack/table-core": "^9.0.0-beta.5"
+    "@tanstack/table-core": "9.0.0-beta.61"
   },
   "devDependencies": {
+    "@testing-library/vue": "^8.1.0",
     "@vitejs/plugin-vue": "^6.0.7",
     "eslint-plugin-vue": "^10.9.2",
-    "vue": "^3.5.35"
+    "vue": "^3.5.38"
   },
   "peerDependencies": {
     "vue": ">=3.2"
@@ -64,6 +54,8 @@
   "scripts": {
     "clean": "rimraf ./build && rimraf ./dist",
     "test:eslint": "eslint ./src",
+    "test:lib": "vitest --passWithNoTests",
+    "test:lib:dev": "pnpm test:lib --watch",
     "test:types": "tsc",
     "test:build": "publint --strict",
     "build": "tsdown"

package/skills/create-table-hook/SKILL.md

@@ -0,0 +1,146 @@
+---
+name: create-table-hook
+description: >
+  Create a reusable Vue useAppTable/createAppColumnHelper with shared features/defaults, reactive per-table options, optional component registries, dynamic App wrappers, typed context hooks, and explicit types that break circular inference.
+metadata:
+  type: framework
+  library: '@tanstack/vue-table'
+  framework: vue
+  library_version: '9.0.0-beta.61'
+requires:
+  - '@tanstack/table-core#core'
+  - getting-started
+  - table-state
+sources:
+  - 'TanStack/table:docs/framework/vue/guide/composable-tables.md'
+  - 'TanStack/table:examples/vue/composable-tables'
+  - 'TanStack/table:packages/vue-table/src/createTableHook.ts'
+---
+
+This skill builds on `@tanstack/table-core#core`, `getting-started`, and `table-state`. Use it for recurring app conventions; use `useTable` for a one-off.
+
+## Setup
+
+```ts
+import {
+  createTableHook,
+  rowSortingFeature,
+  tableFeatures,
+} from '@tanstack/vue-table'
+import type { RowData, VueTable } from '@tanstack/vue-table'
+
+const features = tableFeatures({ rowSortingFeature })
+const hook = createTableHook({ features })
+export const useAppTable = hook.useAppTable
+export const createAppColumnHelper = hook.createAppColumnHelper
+export const useTableContext: <TData extends RowData = RowData>() => VueTable<
+  typeof features,
+  TData
+> = hook.useTableContext
+```
+
+The explicit exported context-hook types are important when registered components import the hook module that also imports those components.
+
+## Core Patterns
+
+### Keep per-table values reactive
+
+```ts
+const helper = createAppColumnHelper<Person>()
+const columns = helper.columns([helper.accessor('name', { header: 'Name' })])
+const table = useAppTable({ columns, data })
+```
+
+Pass refs/computed options through unchanged.
+
+### Wrap registered component context
+
+Render through `table.AppTable`, `table.AppCell`, or `table.AppHeader`; inside registered components call the corresponding typed context hook instead of prop drilling.
+
+## Common Mistakes
+
+### HIGH Creating circular inferred exports
+
+Wrong:
+
+```ts
+export const { useAppTable, useTableContext } = createTableHook({
+  tableComponents: { Pager },
+})
+```
+
+Correct:
+
+```ts
+const hook = createTableHook({ tableComponents: { Pager } })
+export const useTableContext: <TData extends RowData = RowData>() => VueTable<
+  typeof features,
+  TData
+> = hook.useTableContext
+```
+
+When `Pager` imports `useTableContext`, inferred destructured exports can form a circular inference/import chain.
+
+Source: `docs/framework/vue/guide/composable-tables.md`
+
+### HIGH Flattening reactive table options
+
+Wrong:
+
+```ts
+useAppTable({ columns, data: data.value })
+```
+
+Correct:
+
+```ts
+useAppTable({ columns, data })
+```
+
+The app hook preserves the adapter’s `MaybeRef` option contract.
+
+Source: `packages/vue-table/src/createTableHook.ts`
+
+### HIGH Using context without App wrappers
+
+Wrong:
+
+```ts
+const table = useTableContext()
+```
+
+Correct:
+
+```vue
+<component :is="table.AppTable"><Pager /></component>
+```
+
+The typed context exists only below the corresponding dynamic wrapper.
+
+Source: `packages/vue-table/src/createTableHook.ts`
+
+### MEDIUM Treating Subscribe children as slots
+
+Wrong:
+
+```tsx
+<table.Subscribe>
+  {(atoms) => <Pager page={atoms.pagination.get()} />}
+</table.Subscribe>
+```
+
+Correct:
+
+```tsx
+<table.Subscribe
+  children={(atoms) => <Pager page={atoms.pagination.get()} />}
+/>
+```
+
+Vue’s adapter expects an explicit `children` prop in JSX.
+
+Source: `packages/vue-table/src/useTable.ts`
+
+## API Discovery
+
+Inspect `node_modules/@tanstack/vue-table/dist/createTableHook.d.ts` for the returned helpers, wrapper props, registry types, and context contracts.