`useHeaderContext` must be used within an `AppHeader` or `Ap

Error message

`useHeaderContext` must be used within an `AppHeader` or `AppFooter` component.

What it means

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.

Source

Thrown at packages/svelte-table/src/createTableHook.svelte.ts:600

    return cell as unknown as Cell<TFeatures, any, TValue> &
      TCellComponents & { FlexRender: typeof FlexRenderSvelte }
  }

  /**
   * Access the header instance from within an `AppHeader` or `AppFooter` wrapper.
   * Use this in custom `headerComponents` passed to `createTableHook`.
   * TFeatures is already known from the createTableHook call.
   */
  function useHeaderContext<TValue extends CellData = CellData>(): Header<
    TFeatures,
    any,
    TValue
  > &
    THeaderComponents & { FlexRender: typeof FlexRenderSvelte } {
    const header = getContext(headerContextKey)

    if (!header) {
      throw new Error(
        '`useHeaderContext` must be used within an `AppHeader` or `AppFooter` component.',
      )
    }

    // `<table.AppHeader>` / `<table.AppFooter>` Object.assign `headerComponents`
    // and `FlexRender` onto the same header instance they put in context.
    return header as unknown as Header<TFeatures, any, TValue> &
      THeaderComponents & { FlexRender: typeof FlexRenderSvelte }
  }

  /**
   * Enhanced createTable hook that returns a table with App wrapper components
   * and pre-bound tableComponents attached directly to the table object.
   *
   * Default options from createTableHook are automatically merged with
   * the options passed here. Options passed here take precedence.
   *
   * TFeatures is already known from the createTableHook call; TData is inferred from the data prop.

View on GitHub (pinned to d01c01bedb)

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

Example fix

<!-- before -->
<script>const header = useHeaderContext()</script> <!-- throws in cell -->
<!-- after -->
<table.AppHeader header={header}>
  <MyHeaderContent /> <!-- useHeaderContext() works here -->
</table.AppHeader>

Defensive patterns

Strategy: validation

Validate before calling

const header = getContext(headerContextKey);
if (!header) throw new Error('useHeaderContext must be used within <table.AppHeader> or <table.AppFooter>');

Type guard

function isHeader(h: unknown): h is Header<any, any, any> {
  return !!h && typeof h === 'object' && 'column' in h && 'depth' in h;
}

Try / catch

try {
  const header = useHeaderContext();
} catch (e) {
  if (e.message.includes('AppHeader')) {
    // pass header as prop or move component into header slot
  } else { throw e; }
}

Prevention

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

When it happens

Trigger: 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.

Common situations: Header components reused in body/cell slots; portals/modals rendering header content outside the provider; wrong hook chosen for the component's slot.

Related errors

AI-assisted analysis of TanStack/table@d01c01bedb (2026-08-28). Data as JSON: /api/errors/bfc0d9c87cfa8ff8. Report an issue: GitHub.