{"record":{"id":"39fa7d6df90a2ba3","repo":"TanStack/table","slug":"useheadercontext-must-be-used-within-an-apphead-39fa7d","errorCode":null,"errorMessage":"`useHeaderContext` must be used within an `AppHeader` or `AppFooter` component.","messagePattern":"`useHeaderContext` must be used within an `AppHeader` or `AppFooter` component\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/react-table/src/createTableHookContexts.tsx","lineNumber":154,"sourceCode":"    }\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    // eslint-disable-next-line @eslint-react/no-use-context -- intentional for React 18\n    const header = useContext(headerContext)\n\n    if (!header) {\n      throw new Error(\n        '`useHeaderContext` must be used within an `AppHeader` or `AppFooter` component.',\n      )\n    }\n\n    return header as unknown as Header<TFeatures, any, TValue>\n  }\n\n  return {\n    // Re-typed without `| null` so they drop straight into `createTableHook`'s\n    // `tableContext`/`cellContext`/`headerContext` options.\n    tableContext: tableContext as unknown as Context<ReactTable<any, any>>,\n    cellContext: cellContext as unknown as Context<Cell<any, any, any>>,\n    headerContext: headerContext as unknown as Context<Header<any, any, any>>,\n    useTableContext,\n    useCellContext,\n    useHeaderContext,\n  }\n}","sourceCodeStart":136,"sourceCodeEnd":172,"githubUrl":"https://github.com/TanStack/table/blob/d01c01bedbab0ff6c2641f18b2fc9a11545d9bf6/packages/react-table/src/createTableHookContexts.tsx#L136-L172","documentation":"`useHeaderContext` in `createTableHookContexts.tsx` reads `headerContext` provided by `<table.AppHeader>` or `<table.AppFooter>`. With no such provider above the caller, the context is undefined and this error is thrown, ensuring header APIs are only used with a real header instance.","triggerScenarios":"Calling `useHeaderContext()` outside AppHeader/AppFooter; rendering through a portal or a second root; duplicate installs of the package with distinct context objects.","commonSituations":"Custom header controls placed in a plain wrapper after refactor; storybook isolation mounts; version skew across workspaces.","solutions":["Wrap the component with `<table.AppHeader header={header}>` or `<table.AppFooter header={header}>`.","Move the component into the provider's children.","Dedupe the table package so the context module identity is shared.","Use `useContext(headerContext)` directly with a null check when the header may be absent."],"exampleFix":"// before\nfunction HeaderLabel() {\n  const header = useHeaderContext()\n  return <span>{header.column.columnDef.header}</span>\n}\n\n// after\n<table.AppHeader header={header}>\n  <HeaderLabel />\n</table.AppHeader>","handlingStrategy":"validation","validationCode":"import { useContext } from 'react'\nimport { headerContext } from '@your-scope/react-table/contexts'\n\nfunction useSafeHeader() {\n  const header = useContext(headerContext)\n  if (!header) {\n    console.error('useHeaderContext requires <table.AppHeader> or <table.AppFooter> above this component')\n  }\n  return header\n}","typeGuard":"function hasHeader<T>(h: T | null | undefined): h is T {\n  return h != null\n}","tryCatchPattern":"try {\n  const header = useHeaderContext()\n  // use header\n} catch (err) {\n  if (err instanceof Error && err.message.includes('useHeaderContext')) {\n    return null\n  }\n  throw err\n}","preventionTips":["Render header consumers inside table.AppHeader/table.AppFooter only.","Pair provider and consumer in a wrapper component.","Dedupe package versions.","Test with provider-aware mounting helpers."],"tags":["react","react-context","missing-provider"],"backgroundTag":"missing-context-provider","analyzedSha":"d01c01bedbab0ff6c2641f18b2fc9a11545d9bf6","analyzedAt":"2026-08-28T21:52:44.679Z","schemaVersion":2},"datasetVersion":"2026-08-29T02:17:18.158Z"}