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

Error message

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

What it means

Preact table's `useHeaderContext` injects the header context provided only by `<table.AppHeader>`/`<table.AppFooter>`. If no provider is present it throws rather than returning null. This catches header/footer components used outside their required wrapper at the hook call site.

Source

Thrown at packages/preact-table/src/createTableHook.tsx:886

   * function ColumnFilter() {
   *   const header = useHeaderContext()
   *   if (!header.column.getCanFilter()) return null
   *   return (
   *     <input
   *       value={(header.column.getFilterValue() ?? '') as string}
   *       onChange={(e) => header.column.setFilterValue(e.target.value)}
   *       placeholder="Filter..."
   *     />
   *   )
   * }
   * ```
   */
  function useHeaderContext<TValue extends CellData = CellData>() {
    const header = useContext(HeaderContext)

    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
    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: () => ComponentChildren }
  }

  /**
   * Context-aware FlexRender component for cells.
   * Uses the cell from context, so no need to pass cell prop.
   */
  function CellFlexRender() {
    const cell = useCellContext()
    return <FlexRender cell={cell} />
  }

View on GitHub (pinned to d01c01bedb)

Solutions

Render the component inside `<table.AppHeader>` or `<table.AppFooter>`.
Switch to `useCellContext` if the component is a cell child.
Pass the header explicitly as a prop instead of context.

Example fix

// before
<HeaderBody /> // calls useHeaderContext()
// after
<table.AppHeader header={header}>
  <HeaderBody />
</table.AppHeader>

Defensive patterns

Strategy: validation

Validate before calling

const header = useContext(HeaderContext)
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
if (!header) {
  console.warn('Component must be rendered inside <table.AppHeader> or <table.AppFooter>')
}

Type guard

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

Try / catch

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

Prevention

Use AppHeader/AppFooter wrappers for header-consuming components
Use useCellContext for cell children instead
Pass header as prop for out-of-table usage
Review refactors that extract header markup for lost providers

When it happens

Trigger: Calling `useHeaderContext()` in a component not rendered inside `<table.AppHeader>`/`<table.AppFooter>` — e.g. directly under AppTable, inside AppCell, or in a portal outside the header subtree.

Common situations: Extracting header/footer markup into a standalone component without the wrapper; mistakenly using this hook in a cell component; migration from a props-based header API.

Related errors

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