{"record":{"id":"a740b65151eaac49","repo":"TanStack/table","slug":"useheadercontext-must-be-used-within-an-apphead","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/octane-table/src/createTableHookContexts.ts","lineNumber":125,"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`\n   * wrapper 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<OctaneTable<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":107,"sourceCodeEnd":143,"githubUrl":"https://github.com/TanStack/table/blob/d01c01bedbab0ff6c2641f18b2fc9a11545d9bf6/packages/octane-table/src/createTableHookContexts.ts#L107-L143","documentation":"Octane's useHeaderContext reads the header from React context provided by <table.AppHeader> or <table.AppFooter>. If neither provider is above the hook call, the header is undefined and this error is thrown.","triggerScenarios":"Calling useHeaderContext() from a component not wrapped in <table.AppHeader> or <table.AppFooter>; using a header component in a cell or body slot; rendering headers via portals outside the provider subtree.","commonSituations":"Shared header/footer components used outside the table; mistakenly using useHeaderContext in a cell renderer (which provides cell, not header, context).","solutions":["Wrap the consuming component in <table.AppHeader header={header}> or <table.AppFooter footer={footer}>","Use the correct hook for the slot (useCellContext in cells, useTableContext at table level)","Pass the header explicitly as a prop if rendering outside the provider"],"exampleFix":"// before\nconst header = useHeaderContext(); // throws in cell\n// after\n<table.AppHeader header={header}>\n  <MyHeaderContent /> // useHeaderContext() works here\n</table.AppHeader>","handlingStrategy":"validation","validationCode":"const header = useContextSafe(headerContext);\nif (!header) throw new Error('useHeaderContext requires <table.AppHeader> or <table.AppFooter>');","typeGuard":"function isHeader(h: unknown): h is Header<any, any, any> {\n  return !!h && typeof h === 'object' && 'column' in h && 'depth' in h;\n}","tryCatchPattern":"try {\n  const header = useHeaderContext();\n} catch (e) {\n  if (e.message.includes('AppHeader')) {\n    // use header prop or switch to the correct slot hook\n  } else { throw e; }\n}","preventionTips":["Use useHeaderContext only in AppHeader/AppFooter-wrapped components","Use useCellContext in cells — the header hook will throw there","Pass header/footer objects as props for out-of-tree rendering"],"tags":["react","context","missing-provider","octane","header"],"backgroundTag":"missing-provider-context","analyzedSha":"d01c01bedbab0ff6c2641f18b2fc9a11545d9bf6","analyzedAt":"2026-08-28T21:52:44.679Z","schemaVersion":2},"datasetVersion":"2026-08-29T02:17:18.158Z"}