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

Error message

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

What it means

`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.

Source

Thrown at packages/vue-table/src/createTableHook.ts:456

      )
    }

    // `<table.AppCell>` Object.assign-es `cellComponents` and `FlexRender` onto
    // the same cell instance it provides, so this asserts the runtime shape.
    return cell as unknown as Cell<TFeatures, any, TValue> &
      TCellComponents & { FlexRender: Component }
  }

  function useHeaderContext<TValue extends CellData = CellData>(): Header<
    TFeatures,
    any,
    TValue
  > &
    THeaderComponents & { FlexRender: Component } {
    const header = inject(HeaderContext)

    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 provide.
    return header as unknown as Header<TFeatures, any, TValue> &
      THeaderComponents & { FlexRender: Component }
  }

  const CellFlexRender = defineComponent({
    name: 'AppCellFlexRender',
    setup() {
      const cell = useCellContext()
      return () => h(AppFlexRender, { cell })
    },
  })

View on GitHub (pinned to d01c01bedb)

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.

Example fix

// before
<template><MyHeaderBody /></template>
const header = useHeaderContext()
// after
<table.AppHeader :header="header">
  <MyHeaderBody />
</table.AppHeader>

Defensive patterns

Strategy: validation

Validate before calling

const header = inject(HeaderContext)
if (!header) {
  console.warn('Component must be rendered inside <table.AppHeader> or <table.AppFooter>')
}

Type guard

function hasHeaderContext(v: unknown): v is NonNullable<typeof v> {
  return v != null
}

Try / catch

try {
  const header = useHeaderContext()
} catch (e) {
  if (e instanceof Error && e.message.includes('useHeaderContext')) {
    // fallback header UI
  } else throw e
}

Prevention

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

When it happens

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

Common situations: 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.

Related errors

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