{"record":{"id":"f93213fb771289c6","repo":"TanStack/table","slug":"usecellcontext-must-be-used-within-an-appcell","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=(.+?)>\\.\\.\\.</table\\.AppCell>`\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/octane-table/src/createTableHookContexts.ts","lineNumber":104,"sourceCode":"      )\n    }\n\n    return table as unknown as OctaneTable<TFeatures, TTableData>\n  }\n\n  /**\n   * Access the cell instance from within an `AppCell` wrapper bound to these\n   * scoped contexts.\n   */\n  function useCellContext<TValue extends CellData = CellData>(): Cell<\n    TFeatures,\n    any,\n    TValue\n  > {\n    const cell = useContext(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    return cell as unknown as Cell<TFeatures, any, TValue>\n  }\n\n  /**\n   * Access the header instance from within an `AppHeader` or `AppFooter`\n   * wrapper bound to these scoped contexts.\n   */\n  function useHeaderContext<TValue extends CellData = CellData>(): Header<\n    TFeatures,\n    any,\n    TValue\n  > {\n    const header = useContext(headerContext)","sourceCodeStart":86,"sourceCodeEnd":122,"githubUrl":"https://github.com/TanStack/table/blob/d01c01bedbab0ff6c2641f18b2fc9a11545d9bf6/packages/octane-table/src/createTableHookContexts.ts#L86-L122","documentation":"Octane's useCellContext reads the cell from React context provided by <table.AppCell cell={cell}>. If no cell is in context, the hook is called outside an AppCell wrapper and throws this error.","triggerScenarios":"Calling useCellContext() from a component not rendered via <table.AppCell cell={cell}>; rendering cell markup in a plain component without the AppCell wrapper; portal/modal rendering outside the cell subtree.","commonSituations":"Custom cell renderers extracted to files and used without the AppCell wrapper; reusing cell components in a different table area (header/footer) that doesn't provide cell context.","solutions":["Render the consuming component inside <table.AppCell cell={cell}>...</table.AppCell>","Pass the cell object explicitly as a prop instead of using useCellContext","Verify the component is used as a cell renderer, not a header or table-level component"],"exampleFix":"// before\nconst cell = useCellContext(); // throws\n// after\n<table.AppCell cell={cell}>\n  <MyCellContent /> // useCellContext() works here\n</table.AppCell>","handlingStrategy":"validation","validationCode":"// only call inside AppCell-rendered components\nconst cell = useContextSafe(cellContext);\nif (!cell) throw new Error('useCellContext requires <table.AppCell cell={cell}>');","typeGuard":"function isCell(c: unknown): c is Cell<any, any, any> {\n  return !!c && typeof c === 'object' && 'column' in c && 'row' in c;\n}","tryCatchPattern":"try {\n  const cell = useCellContext();\n} catch (e) {\n  if (e.message.includes('AppCell')) {\n    // accept cell as prop instead\n  } else { throw e; }\n}","preventionTips":["Render cell-consuming components only within <table.AppCell cell={cell}>","Pass cells as props when components are shared across table regions","Match the hook to the slot: cell hook in cells, header hook in headers"],"tags":["react","context","missing-provider","octane","cell"],"backgroundTag":"missing-provider-context","analyzedSha":"d01c01bedbab0ff6c2641f18b2fc9a11545d9bf6","analyzedAt":"2026-08-28T21:52:44.679Z","schemaVersion":2},"datasetVersion":"2026-08-29T02:17:18.158Z"}