{"record":{"id":"3f83ae068f95cee2","repo":"TanStack/table","slug":"usecellcontext-must-be-used-within-an-appcell-3f83ae","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/preact-table/src/createTableHookContexts.tsx","lineNumber":128,"sourceCode":"      )\n    }\n\n    return table as unknown as PreactTable<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` wrapper\n   * 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":110,"sourceCodeEnd":146,"githubUrl":"https://github.com/TanStack/table/blob/d01c01bedbab0ff6c2641f18b2fc9a11545d9bf6/packages/preact-table/src/createTableHookContexts.tsx#L110-L146","documentation":"In `packages/preact-table/src/createTableHookContexts.tsx`, `useCellContext` reads `cellContext` provided only by AppCell. A null result triggers this throw. It enforces that cell-rendering components are mounted inside `<table.AppCell cell={cell}>`.","triggerScenarios":"Calling `useCellContext()` (from createTableHookContexts) in a component rendered outside `<table.AppCell cell={cell}>` — e.g. under AppRow directly, in a header slot, or in a component reused outside any table.","commonSituations":"Extracting cell content into a shared component without the AppCell wrapper; importing the hook from the contexts module while rendering via a different package's AppCell; using the wrong context hook for the current scope.","solutions":["Wrap the component with `<table.AppCell cell={cell}>` from the same package.","Use `useHeaderContext`/`useTableContext` if the component lives in a header or table scope.","Pass the cell as an explicit prop when the component renders outside a cell."],"exampleFix":"// before\n<CellBody /> // calls useCellContext()\n// after\n<table.AppCell cell={cell}>\n  <CellBody />\n</table.AppCell>","handlingStrategy":"validation","validationCode":"const cell = useContext(cellContext)\nif (!cell) {\n  console.warn('Component must be rendered inside <table.AppCell cell={cell}> (matching package)')\n}","typeGuard":"function hasCellContext(c: unknown): c is NonNullable<typeof c> {\n  return c != null\n}","tryCatchPattern":"try {\n  const cell = useCellContext()\n} catch (e) {\n  if (e instanceof Error && e.message.includes('useCellContext')) {\n    // fallback cell UI or explicit cell prop\n  } else throw e\n}","preventionTips":["Match the hook import to the same package whose AppCell you render","Wrap cell components in AppCell slots consistently","Use scope-correct hooks (table vs header vs cell)","Note provider requirements when sharing cell components across apps"],"tags":["preact","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"}