{"record":{"id":"7be410e8c1d5ca14","repo":"TanStack/table","slug":"useheadercontext-must-be-used-within-an-apphead-7be410","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/vue-table/src/createTableHook.ts","lineNumber":456,"sourceCode":"      )\n    }\n\n    // `<table.AppCell>` Object.assign-es `cellComponents` and `FlexRender` onto\n    // the same cell instance it provides, so this asserts the runtime shape.\n    return cell as unknown as Cell<TFeatures, any, TValue> &\n      TCellComponents & { FlexRender: Component }\n  }\n\n  function useHeaderContext<TValue extends CellData = CellData>(): Header<\n    TFeatures,\n    any,\n    TValue\n  > &\n    THeaderComponents & { FlexRender: Component } {\n    const header = inject(HeaderContext)\n\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: Component }\n  }\n\n  const CellFlexRender = defineComponent({\n    name: 'AppCellFlexRender',\n    setup() {\n      const cell = useCellContext()\n      return () => h(AppFlexRender, { cell })\n    },\n  })\n","sourceCodeStart":438,"sourceCodeEnd":474,"githubUrl":"https://github.com/TanStack/table/blob/d01c01bedbab0ff6c2641f18b2fc9a11545d9bf6/packages/vue-table/src/createTableHook.ts#L438-L474","documentation":"`useHeaderContext` injects the header object provided only by `<table.AppHeader>` / `<table.AppFooter>`. If no such provider is above the calling component, `inject(HeaderContext)` returns undefined and the hook throws. This guards against rendering header-consuming components outside a header/footer slot.","triggerScenarios":"Calling `useHeaderContext()` in a component rendered outside `<table.AppHeader>`/`<table.AppFooter>` — e.g. directly under AppTable, inside AppCell, or in a modal/teleport that escapes the header subtree.","commonSituations":"Extracting header markup into its own component and forgetting the AppHeader wrapper; reusing a HeaderContent component in a plain div; using the hook inside AppCell by mistake instead of useCellContext.","solutions":["Render the component inside `<table.AppHeader>` (or AppFooter) so the HeaderContext is provided.","Use `useCellContext` instead if the component actually lives in a cell slot.","Pass the header as an explicit prop instead of relying on context."],"exampleFix":"// before\n<template><MyHeaderBody /></template>\nconst header = useHeaderContext()\n// after\n<table.AppHeader :header=\"header\">\n  <MyHeaderBody />\n</table.AppHeader>","handlingStrategy":"validation","validationCode":"const header = inject(HeaderContext)\nif (!header) {\n  console.warn('Component must be rendered inside <table.AppHeader> or <table.AppFooter>')\n}","typeGuard":"function hasHeaderContext(v: unknown): v is NonNullable<typeof v> {\n  return v != null\n}","tryCatchPattern":"try {\n  const header = useHeaderContext()\n} catch (e) {\n  if (e instanceof Error && e.message.includes('useHeaderContext')) {\n    // fallback header UI\n  } else throw e\n}","preventionTips":["Render header-consuming components only within AppHeader/AppFooter slots","Use useCellContext for cell children, not useHeaderContext","Note the provider requirement when extracting header components","Pass header as a prop for components that must work outside the table"],"tags":["vue","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"}