{"record":{"id":"01225c4ab97d978f","repo":"TanStack/table","slug":"useheadercontext-must-be-used-within-an-apphead-01225c","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/createTableHook.tsx","lineNumber":890,"sourceCode":"   *   if (!header.column.getCanFilter()) return null\n   *   return (\n   *     <input\n   *       value={(header.column.getFilterValue() ?? '') as string}\n   *       onChange={(e) => header.column.setFilterValue(e.target.value)}\n   *       placeholder=\"Filter...\"\n   *     />\n   *   )\n   * }\n   * ```\n   */\n  function useHeaderContext<TValue extends CellData = CellData>() {\n    // `useContext` keeps React 18 support; `use(Context)` is React 19+ only.\n    // eslint-disable-next-line @eslint-react/no-use-context -- intentional for React 18\n    const header = useContext(HeaderContext)\n\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n    if (!header) {\n      throw new Error(\n        '`useHeaderContext` must be used within an `AppHeader` or `AppFooter` component.',\n      )\n    }\n\n    // `<table.AppHeader>` / `<table.AppFooter>` Object.assign `headerComponents`\n    // and `FlexRender` onto the same header instance they provide.\n    return header as unknown as Header<TFeatures, any, TValue> &\n      THeaderComponents & { FlexRender: () => ReactNode }\n  }\n\n  /**\n   * Context-aware FlexRender component for cells.\n   * Uses the cell from context, so no need to pass cell prop.\n   */\n  function CellFlexRender() {\n    const cell = useCellContext()\n    return <FlexRender cell={cell} />\n  }","sourceCodeStart":872,"sourceCodeEnd":908,"githubUrl":"https://github.com/TanStack/table/blob/d01c01bedbab0ff6c2641f18b2fc9a11545d9bf6/packages/react-table/src/createTableHook.tsx#L872-L908","documentation":"`useHeaderContext` reads the React header context provided by `<table.AppHeader>` or `<table.AppFooter>`. When the hook runs without such a provider above it, the context is undefined and the library throws. AppHeader/AppFooter also attach `headerComponents` and `FlexRender` onto the header instance, so using the hook outside them means those APIs are unavailable too.","triggerScenarios":"Calling `useHeaderContext()` from a component not rendered inside `<table.AppHeader header={header}>` or `<table.AppFooter header={header}>`; portal-rendered consumers; duplicated package installs splitting context identity.","commonSituations":"Custom sort/resize handles placed outside the header wrapper; a shared header component used in a plain div during refactor; isolated test mounts without the provider.","solutions":["Wrap the component with `<table.AppHeader header={header}>` (or AppFooter) at the usage site.","Move the component into the children of AppHeader/AppFooter.","Dedupe the table package versions so all code shares one context module.","Read the raw context via `useContext(HeaderContext)` and handle null if usage is optional."],"exampleFix":"// before\nfunction SortButton() {\n  const header = useHeaderContext()\n  return <button onClick={() => header.column.toggleSorting()}>Sort</button>\n}\n\n// after\n<table.AppHeader header={header}>\n  <SortButton />\n</table.AppHeader>","handlingStrategy":"validation","validationCode":"import { useContext } from 'react'\nimport { HeaderContext } from '@your-scope/react-table'\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 // not inside AppHeader/AppFooter\n  }\n  throw err\n}","preventionTips":["Render header consumers as children of table.AppHeader/table.AppFooter only.","Pair provider and consumer in one wrapper component.","Check for duplicate package versions.","Use a provider-aware test mount helper."],"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"}