{"record":{"id":"eff33ae43157398b","repo":"TanStack/table","slug":"usetablecontext-must-be-used-within-an-apptable-eff33a","errorCode":null,"errorMessage":"`useTableContext` must be used within an `AppTable` component. Make sure your component is wrapped with `<table.AppTable>...</table.AppTable>`.","messagePattern":"`useTableContext` must be used within an `AppTable` component\\. Make sure your component is wrapped with `<table\\.AppTable>\\.\\.\\.</table\\.AppTable>`\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/vue-table/src/createTableHook.ts","lineNumber":408,"sourceCode":"    return coreCreateColumnHelper<TFeatures, TData>() as AppColumnHelper<\n      TFeatures,\n      TData,\n      TCellComponents,\n      THeaderComponents\n    >\n  }\n\n  function useTableContext<TData extends RowData = RowData>(): AppVueTable<\n    TFeatures,\n    TData,\n    TTableComponents,\n    TCellComponents,\n    THeaderComponents\n  > {\n    const table = inject(TableContext)\n\n    if (!table) {\n      throw new Error(\n        '`useTableContext` must be used within an `AppTable` component. ' +\n          'Make sure your component is wrapped with `<table.AppTable>...</table.AppTable>`.',\n      )\n    }\n\n    // The value provided by `<table.AppTable>` is the extended table (the App*\n    // wrapper components and `tableComponents` are Object.assign-ed onto the same\n    // instance `useAppTable` returns), so this asserts the runtime shape.\n    return table as unknown as AppVueTable<\n      TFeatures,\n      TData,\n      TTableComponents,\n      TCellComponents,\n      THeaderComponents\n    >\n  }\n\n  function useCellContext<TValue extends CellData = CellData>(): Cell<","sourceCodeStart":390,"sourceCodeEnd":426,"githubUrl":"https://github.com/TanStack/table/blob/d01c01bedbab0ff6c2641f18b2fc9a11545d9bf6/packages/vue-table/src/createTableHook.ts#L390-L426","documentation":"useTableContext in packages/vue-table reads the table from Vue's inject(TableContext). If no ancestor component provided the context, it throws this error telling you to render the component tree inside <table.AppTable>. The hook only works within the AppTable render scope created by the table instance.","triggerScenarios":"Calling useTableContext() in a component that is not a descendant of <table.AppTable> — e.g. a sibling, a portal/Teleport target outside the provider tree, or usage in a route component rendered outside the table.","commonSituations":"Rendering cell components via Teleport/portals outside the provider; using the hook in a separate component tree (modals mounted to body); forgetting to use table.AppTable instead of plain markup; multiple table instances and the wrong one provides context.","solutions":["Wrap the consuming component in <table.AppTable>...</table.AppTable> within the provider tree.","Pass the table instance as a prop instead of relying on context for out-of-tree components.","If using Teleport, keep the logical component inside AppTable and only teleport the DOM output, or provide/inject the context manually at the portal root.","Ensure only one table instance is expected, or that the correct table provides the context."],"exampleFix":"<!-- before -->\n<my-cell />\n\n<!-- after -->\n<table.AppTable>\n  <my-cell />\n</table.AppTable>","handlingStrategy":"try-catch","validationCode":"// in setup, before using the hook's result\nconst table = inject(TableContext, null)\nif (!table) {\n  console.warn('useTableContext used outside <table.AppTable>')\n}","typeGuard":"function hasTableContext(v: unknown): v is Table {\n  return v != null && typeof v === 'object' && 'AppTable' in (v as object)\n}","tryCatchPattern":"import { getCurrentInstance } from 'vue'\ntry {\n  const table = useTableContext()\n} catch (e) {\n  if ((e as Error).message.includes('useTableContext')) {\n    // render fallback or require table as a prop\n  } else throw e\n}","preventionTips":["Always render consumers inside <table.AppTable>","Prefer passing the table instance as a prop for Teleport/modals rendered outside the tree","Do not call useTableContext in route-level components outside the table","Use inject with a default to fail gracefully in shared components"],"tags":["vue","context","provider-missing"],"backgroundTag":"context-provider-missing","analyzedSha":"d01c01bedbab0ff6c2641f18b2fc9a11545d9bf6","analyzedAt":"2026-08-28T21:52:44.679Z","schemaVersion":2},"datasetVersion":"2026-08-29T02:17:18.158Z"}