{"record":{"id":"c6bde9fde81cbd9d","repo":"TanStack/table","slug":"useheadercontext-must-be-used-within-an-apphead-c6bde9","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/createTableHook.tsrx","lineNumber":253,"sourceCode":"\t}\n\n\t/**\n * Access the header instance from within an `AppHeader` or `AppFooter`\n * wrapper. Use this in custom `headerComponents` passed to `createTableHook`.\n *\n * @example\n * ```tsx\n * function SortIndicator() @{\n *   const header = useHeaderContext()\n *   <span>{(header.column.getIsSorted() || '') as string}</span>\n * }\n * ```\n */\n\tfunction useHeaderContext<TValue extends CellData = CellData>() {\n\t\tconst header = useContext(HeaderContext);\n\n\t\tif (!header) {\n\t\t\tthrow new Error('`useHeaderContext` must be used within an `AppHeader` or `AppFooter` component.');\n\t\t}\n\n\t\t// `<table.AppHeader>` / `<table.AppFooter>` Object.assign `headerComponents`\n\t\t// and `FlexRender` onto the same header instance they provide.\n\t\treturn header as unknown as\n\t\t\tHeader<TFeatures, any, TValue> & THeaderComponents & {\n\t\t\t\tFlexRender: () => OctaneNode;\n\t\t\t};\n\t}\n\n\t/** Context-aware FlexRender for cells — reads the cell from context. */\n\tfunction CellFlexRender() {\n\t\tconst cell = useCellContext();\n\t\treturn <FlexRender cell={cell} />;\n\t}\n\n\t/** Context-aware FlexRender for headers — reads the header from context. */\n\tfunction HeaderFlexRender() {","sourceCodeStart":235,"sourceCodeEnd":271,"githubUrl":"https://github.com/TanStack/table/blob/d01c01bedbab0ff6c2641f18b2fc9a11545d9bf6/packages/octane-table/src/createTableHook.tsrx#L235-L271","documentation":"`useHeaderContext` in the Octane table injects the header context provided only by `<table.AppHeader>` or `<table.AppFooter>`. If absent, the hook throws rather than returning a null header. This catches header components rendered outside their required provider at the point of use.","triggerScenarios":"Calling `useHeaderContext()` in a component not rendered inside `<table.AppHeader>`/`<table.AppFooter>` — e.g. under AppTable directly, inside AppCell, or in a portal escaping the header subtree.","commonSituations":"Extracting header/footer markup into a separate component without the AppHeader wrapper; using the wrong hook (this instead of useCellContext); migrating from a props-based header API and leaving the hook in place.","solutions":["Render the component inside `<table.AppHeader>` or `<table.AppFooter>`.","Switch to `useCellContext` if the component is a cell child.","Pass the header as a prop instead of reading 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)\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":["Render header/footer components only within AppHeader/AppFooter","Match hook to scope: useCellContext in cells, useHeaderContext in headers","Pass header as prop when the component must render outside the table","Keep extracted components close to their provider usage"],"tags":["react","octane-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"}