{"record":{"id":"72847691631351c5","repo":"TanStack/table","slug":"useheadercontext-must-be-used-within-an-apphead-728476","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/createTableHookContexts.tsx","lineNumber":149,"sourceCode":"      )\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)\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<PreactTable<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":131,"sourceCodeEnd":167,"githubUrl":"https://github.com/TanStack/table/blob/d01c01bedbab0ff6c2641f18b2fc9a11545d9bf6/packages/preact-table/src/createTableHookContexts.tsx#L131-L167","documentation":"`useHeaderContext` is a Preact context hook that reads the header context provided by `<table.AppHeader>` or `<table.AppFooter>`. The library throws this error when the hook is called and the context value is undefined, i.e. no AppHeader/AppFooter provider is above it in the component tree. This fail-fast behavior prevents operating on a null header and producing confusing downstream errors.","triggerScenarios":"Calling `useHeaderContext()` inside a custom component that is rendered outside of (or as a sibling to) `<table.AppHeader>`/`<table.AppFooter>`, or having a second copy of the preact-table package installed so two different context objects exist.","commonSituations":"Developers build a custom header cell component and render it in a plain element instead of inside AppHeader/AppFooter; or render the component in a portal/other root without the provider; or have duplicate package versions in node_modules breaking context identity.","solutions":["Wrap the component (or its usage site) with `<table.AppHeader>` or `<table.AppFooter>` so the header context is provided above it.","Move the component call site into the render children of AppHeader/AppFooter.","Verify only one copy/version of the table package is installed (npm ls / dedupe) so the context module identity matches.","If the component may run outside a header, fall back gracefully instead: read the raw context with `useContext` and handle null."],"exampleFix":"// before\nfunction MySortIndicator() {\n  const header = useHeaderContext()\n  return <span>{header.column.getIsSorted()}</span>\n}\nrender(<MySortIndicator />, root)\n\n// after\nrender(\n  <table.AppHeader header={header}>\n    <MySortIndicator />\n  </table.AppHeader>,\n  root\n)","handlingStrategy":"validation","validationCode":"import { useContext } from 'preact'\nimport { headerContext } from '@your-scope/preact-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 // render placeholder outside AppHeader/AppFooter\n  }\n  throw err\n}","preventionTips":["Always render context-consuming components as children of table.AppHeader/table.AppFooter.","Create a small wrapper component that pairs provider + consumer and use it everywhere.","Check package.json / lockfile for duplicate table package versions.","In tests, use a mount helper that includes the required providers."],"tags":["preact","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"}