{"record":{"id":"b68e409634e5115c","repo":"TanStack/table","slug":"usecellcontext-must-be-used-within-an-appcell-b68e40","errorCode":null,"errorMessage":"`useCellContext` must be used within an `AppCell` component. Make sure your component is wrapped with `<table.AppCell :cell=\"cell\">...</table.AppCell>`.","messagePattern":"`useCellContext` must be used within an `AppCell` component\\. Make sure your component is wrapped with `<table\\.AppCell :cell=\"cell\">\\.\\.\\.</table\\.AppCell>`\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/vue-table/src/createTableHook.ts","lineNumber":435,"sourceCode":"    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<\n    TFeatures,\n    any,\n    TValue\n  > &\n    TCellComponents & { FlexRender: Component } {\n    const cell = inject(CellContext)\n\n    if (!cell) {\n      throw new Error(\n        '`useCellContext` must be used within an `AppCell` component. ' +\n          'Make sure your component is wrapped with `<table.AppCell :cell=\"cell\">...</table.AppCell>`.',\n      )\n    }\n\n    // `<table.AppCell>` Object.assign-es `cellComponents` and `FlexRender` onto\n    // the same cell instance it provides, so this asserts the runtime shape.\n    return cell as unknown as Cell<TFeatures, any, TValue> &\n      TCellComponents & { FlexRender: Component }\n  }\n\n  function useHeaderContext<TValue extends CellData = CellData>(): Header<\n    TFeatures,\n    any,\n    TValue\n  > &\n    THeaderComponents & { FlexRender: Component } {\n    const header = inject(HeaderContext)","sourceCodeStart":417,"sourceCodeEnd":453,"githubUrl":"https://github.com/TanStack/table/blob/d01c01bedbab0ff6c2641f18b2fc9a11545d9bf6/packages/vue-table/src/createTableHook.ts#L417-L453","documentation":"The Vue table's `useCellContext` hook reads a cell object injected by `provide(CellContext)`. That injection only exists inside a `<table.AppCell>` render slot, so when `inject` returns undefined the hook throws instead of returning a mis-typed cell. It fails fast so you learn immediately that your component was rendered outside the provider rather than crashing later on a null cell.","triggerScenarios":"Calling `useCellContext()` inside a component that is not rendered as a direct child of `<table.AppCell :cell=\"cell\">` — e.g. placing the component under `AppRow` directly, inside a teleport, or calling it in `<script setup>` top-level of a component used elsewhere.","commonSituations":"Extracting the cell body into a standalone component and forgetting to wrap it with `table.AppCell`; reusing a 'CellContent' component in a non-table context; moving JSX/template markup out of the AppCell slot during a refactor.","solutions":["Wrap the consuming component with `<table.AppCell :cell=\"cell\">` so the CellContext is provided.","If the component is several levels deep, pass the cell down and render it inside AppCell's slot, or provide the cell context yourself.","Replace `useCellContext()` with an explicit `cell` prop if the component must work outside a table."],"exampleFix":"// before\n<template><MyCellBody /></template>\nconst cell = useCellContext()\n// after\n<table.AppCell :cell=\"cell\">\n  <MyCellBody />\n</table.AppCell>","handlingStrategy":"validation","validationCode":"// Vue: check the provider exists before relying on the hook\nimport { inject } from 'vue'\nconst cell = inject(CellContext)\nif (!cell) {\n  // render fallback or warn instead of calling useCellContext()\n  console.warn('Component must be rendered inside <table.AppCell>')\n}","typeGuard":"function hasCellContext(v: unknown): v is NonNullable<typeof v> {\n  return v != null\n}","tryCatchPattern":"try {\n  const cell = useCellContext()\n  // use cell\n} catch (e) {\n  if (e instanceof Error && e.message.includes('useCellContext')) {\n    // render non-table fallback\n  } else throw e\n}","preventionTips":["Only render components that call useCellContext inside <table.AppCell> slots","Keep cell-scoped components colocated with the AppCell usage","Document the provider requirement on extracted cell components","Avoid teleports/portals that escape the AppCell subtree"],"tags":["vue","react-table","context","missing-provider"],"backgroundTag":"hook-used-outside-provider","analyzedSha":"d01c01bedbab0ff6c2641f18b2fc9a11545d9bf6","analyzedAt":"2026-08-28T21:52:44.679Z","schemaVersion":2},"datasetVersion":"2026-08-29T02:17:18.158Z"}