{"record":{"id":"5819d0bcff5e0225","repo":"TanStack/table","slug":"useheadercontext-must-be-used-within-an-apphead-5819d0","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/preact-table/src/createTableHook.tsx","lineNumber":886,"sourceCode":"   * function ColumnFilter() {\n   *   const header = useHeaderContext()\n   *   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    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: () => ComponentChildren }\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":868,"sourceCodeEnd":904,"githubUrl":"https://github.com/TanStack/table/blob/d01c01bedbab0ff6c2641f18b2fc9a11545d9bf6/packages/preact-table/src/createTableHook.tsx#L868-L904","documentation":"Preact table's `useHeaderContext` injects the header context provided only by `<table.AppHeader>`/`<table.AppFooter>`. If no provider is present it throws rather than returning null. This catches header/footer components used outside their required wrapper at the hook call site.","triggerScenarios":"Calling `useHeaderContext()` in a component not rendered inside `<table.AppHeader>`/`<table.AppFooter>` — e.g. directly under AppTable, inside AppCell, or in a portal outside the header subtree.","commonSituations":"Extracting header/footer markup into a standalone component without the wrapper; mistakenly using this hook in a cell component; migration from a props-based header API.","solutions":["Render the component inside `<table.AppHeader>` or `<table.AppFooter>`.","Switch to `useCellContext` if the component is a cell child.","Pass the header explicitly as a prop instead of context."],"exampleFix":"// before\n<HeaderBody /> // calls useHeaderContext()\n// after\n<table.AppHeader header={header}>\n  <HeaderBody />\n</table.AppHeader>","handlingStrategy":"validation","validationCode":"const header = useContext(HeaderContext)\n// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\nif (!header) {\n  console.warn('Component must be rendered inside <table.AppHeader> or <table.AppFooter>')\n}","typeGuard":"function hasHeaderContext(h: unknown): h is NonNullable<typeof h> {\n  return h != null\n}","tryCatchPattern":"try {\n  const header = useHeaderContext()\n} catch (e) {\n  if (e instanceof Error && e.message.includes('useHeaderContext')) {\n    // fallback UI\n  } else throw e\n}","preventionTips":["Use AppHeader/AppFooter wrappers for header-consuming components","Use useCellContext for cell children instead","Pass header as prop for out-of-table usage","Review refactors that extract header markup for lost providers"],"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"}