`useCellContext` must be used within an `AppCell` component.

Error message

`useCellContext` must be used within an `AppCell` component. Make sure your component is wrapped with `<table.AppCell cell={cell}>...</table.AppCell>`.

What it means

`useCellContext` in `createTableHookContexts.tsx` reads `cellContext` provided by `<table.AppCell cell={cell}>`. If the hook is called with no AppCell provider above it, the context is undefined and this error is thrown, blocking access to cell APIs without a cell instance.

Source

Thrown at packages/react-table/src/createTableHookContexts.tsx:132

    }

    return table as unknown as ReactTable<TFeatures, TTableData>
  }

  /**
   * Access the cell instance from within an `AppCell` wrapper bound to these
   * scoped contexts.
   */
  function useCellContext<TValue extends CellData = CellData>(): Cell<
    TFeatures,
    any,
    TValue
  > {
    // eslint-disable-next-line @eslint-react/no-use-context -- intentional for React 18
    const cell = useContext(cellContext)

    if (!cell) {
      throw new Error(
        '`useCellContext` must be used within an `AppCell` component. ' +
          'Make sure your component is wrapped with `<table.AppCell cell={cell}>...</table.AppCell>`.',
      )
    }

    return cell as unknown as Cell<TFeatures, any, TValue>
  }

  /**
   * Access the header instance from within an `AppHeader` or `AppFooter` wrapper
   * bound to these scoped contexts.
   */
  function useHeaderContext<TValue extends CellData = CellData>(): Header<
    TFeatures,
    any,
    TValue
  > {
    // eslint-disable-next-line @eslint-react/no-use-context -- intentional for React 18

View on GitHub (pinned to d01c01bedb)

Solutions

Wrap the component with `<table.AppCell cell={cell}>...</table.AppCell>`.
Move the component into AppCell's children in the cell renderer.
Dedupe table package versions so the context module is single.
Read `useContext(cellContext)` directly and null-check if the cell is optional.

Example fix

// before
function CellActions() {
  const cell = useCellContext()
  return <button onClick={() => cell.row.toggleSelected()}>Select</button>
}

// after
<table.AppCell cell={cell}>
  <CellActions />
</table.AppCell>

Defensive patterns

Strategy: validation

Validate before calling

import { useContext } from 'react'
import { cellContext } from '@your-scope/react-table/contexts'

function useSafeCell() {
  const cell = useContext(cellContext)
  if (!cell) {
    console.error('useCellContext requires <table.AppCell cell={cell}> above this component')
  }
  return cell
}

Type guard

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

Try / catch

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

Prevention

Wrap cell consumers with table.AppCell at the call site.
Keep provider and consumer in the same component boundary.
Verify single package install.
Use provider-inclusive test wrappers.

When it happens

Trigger: Calling `useCellContext()` in a component outside `<table.AppCell cell={cell}>`; portal or separate-root rendering; multiple installs of the package breaking context identity.

Common situations: Reusable cell widgets moved into a shared library without the provider; isolated component tests; refactors that hoisted the component out of AppCell.

Related errors

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