TanStack/table · error · Error

`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` in the Solid adapter reads the header context provided by `<table.AppHeader>` or `<table.AppFooter>`. When called with no such provider above it, the context is undefined and this error is thrown. AppHeader/AppFooter also Object.assign `headerComponents` and `FlexRender` onto the header instance, which are unavailable outside them.

Source

Thrown at packages/solid-table/src/createTableHook.tsx:761

   *     <input
   *       value={(header.column.getFilterValue() ?? '') as string}
   *       onChange={(e) => header.column.setFilterValue(e.target.value)}
   *       placeholder="Filter..."
   *     />
   *   )
   * }
   * ```
   */
  function useHeaderContext<TValue extends CellData = CellData>(): Header<
    TFeatures,
    any,
    TValue
  > &
    THeaderComponents & { FlexRender: () => JSXElement } {
    const header = useContext(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: () => JSXElement }
  }

  /**
   * 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

1. Wrap the component with `<table.AppHeader header={header}>` (or AppFooter).
2. Move the component into the provider's children in the same reactive root.
3. Dedupe solid-table versions so the context module identity matches.
4. Read `useContext(HeaderContext)` directly and null-check if header access is optional.

Example fix

// before
function SortToggle() {
  const header = useHeaderContext()
  return <button onClick={() => header.column.toggleSorting()}>Sort</button>
}

// after
<table.AppHeader header={header}>
  <SortToggle />
</table.AppHeader>

import { useContext } from 'solid-js'
import { HeaderContext } from '@your-scope/solid-table'

function useSafeHeader() {
  const header = useContext(HeaderContext)
  if (!header) {
    console.error('useHeaderContext requires <table.AppHeader> or <table.AppFooter> above this component')
  }
  return header
}

function hasHeader<T>(h: T | null | undefined): h is T {
  return h != null
}

try {
  const header = useHeaderContext()
  // use header
} catch (err) {
  if (err instanceof Error && err.message.includes('useHeaderContext')) {
    return null
  }
  throw err
}

When it happens

Trigger: Calling `useHeaderContext()` outside `<table.AppHeader header={header}>`/`<table.AppFooter header={header}>`; portal-rendered consumers; duplicate solid-table installs producing separate context objects.

Common situations: Custom sort/resize controls placed outside the header wrapper after refactor; isolated storybook/test mounts; mixed package versions across a workspace.

Related errors

• `useTableContext` must be used within an `AppTable` componen
• `useCellContext` must be used within an `AppCell` component.
• `useTableContext` must be used within an `AppTable` componen
• `useCellContext` must be used within an `AppCell` component.
• `useHeaderContext` must be used within an `AppHeader` or `Ap

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