{"record":{"id":"bfc0d9c87cfa8ff8","repo":"TanStack/table","slug":"useheadercontext-must-be-used-within-an-apphead-bfc0d9","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/svelte-table/src/createTableHook.svelte.ts","lineNumber":600,"sourceCode":"    return cell as unknown as Cell<TFeatures, any, TValue> &\n      TCellComponents & { FlexRender: typeof FlexRenderSvelte }\n  }\n\n  /**\n   * Access the header instance from within an `AppHeader` or `AppFooter` wrapper.\n   * Use this in custom `headerComponents` passed to `createTableHook`.\n   * TFeatures is already known from the createTableHook call.\n   */\n  function useHeaderContext<TValue extends CellData = CellData>(): Header<\n    TFeatures,\n    any,\n    TValue\n  > &\n    THeaderComponents & { FlexRender: typeof FlexRenderSvelte } {\n    const header = getContext(headerContextKey)\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 put in context.\n    return header as unknown as Header<TFeatures, any, TValue> &\n      THeaderComponents & { FlexRender: typeof FlexRenderSvelte }\n  }\n\n  /**\n   * Enhanced createTable hook that returns a table with App wrapper components\n   * and pre-bound tableComponents attached directly to the table object.\n   *\n   * Default options from createTableHook are automatically merged with\n   * the options passed here. Options passed here take precedence.\n   *\n   * TFeatures is already known from the createTableHook call; TData is inferred from the data prop.","sourceCodeStart":582,"sourceCodeEnd":618,"githubUrl":"https://github.com/TanStack/table/blob/d01c01bedbab0ff6c2641f18b2fc9a11545d9bf6/packages/svelte-table/src/createTableHook.svelte.ts#L582-L618","documentation":"Svelte's useHeaderContext reads the header from Svelte context set by <table.AppHeader> or <table.AppFooter>. If context is undefined, the hook is called outside those providers and throws this error.","triggerScenarios":"Calling useHeaderContext() from a component not nested in <table.AppHeader> or <table.AppFooter>; using it inside a cell or table-level component; snippets rendered outside the header/footer subtree.","commonSituations":"Header components reused in body/cell slots; portals/modals rendering header content outside the provider; wrong hook chosen for the component's slot.","solutions":["Wrap the consuming component in <table.AppHeader header={header}> or <table.AppFooter footer={footer}>","Use useCellContext for cell components and useTableContext for table-level access","Pass the header explicitly as a prop when rendering outside the provider"],"exampleFix":"<!-- before -->\n<script>const header = useHeaderContext()</script> <!-- throws in cell -->\n<!-- after -->\n<table.AppHeader header={header}>\n  <MyHeaderContent /> <!-- useHeaderContext() works here -->\n</table.AppHeader>","handlingStrategy":"validation","validationCode":"const header = getContext(headerContextKey);\nif (!header) throw new Error('useHeaderContext must be used within <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    // pass header as prop or move component into header slot\n  } else { throw e; }\n}","preventionTips":["Use useHeaderContext only within AppHeader/AppFooter components","Use the slot-matching hook (cell hook for cells, table hook at table level)","Pass headers as props when rendering outside the provider subtree"],"tags":["svelte","context","missing-provider","header"],"backgroundTag":"missing-provider-context","analyzedSha":"d01c01bedbab0ff6c2641f18b2fc9a11545d9bf6","analyzedAt":"2026-08-28T21:52:44.679Z","schemaVersion":2},"datasetVersion":"2026-08-29T02:17:18.158Z"}