TanStack/table · error

`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` reads the cell context provided by `<table.AppCell cell={cell}>`. If no AppCell provider is above the calling component, the context is undefined and this error is thrown. It ensures cell-scoped APIs are only used with a real cell instance.

Source

Thrown at packages/react-table/src/createTableHook.tsx:845

   * function TextCell() {
   *   const cell = useCellContext<string>()
   *   return <span>{cell.getValue()}</span>
   * }
   *
   * function NumberCell({ format }: { format?: Intl.NumberFormatOptions }) {
   *   const cell = useCellContext<number>()
   *   return <span>{cell.getValue().toLocaleString(undefined, format)}</span>
   * }
   * ```
   */
  function useCellContext<TValue extends CellData = CellData>() {
    // `useContext` keeps React 18 support; `use(Context)` is React 19+ only.
    // eslint-disable-next-line @eslint-react/no-use-context -- intentional for React 18
    const cell = useContext(CellContext)

    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
    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>`.',
      )
    }

    // `<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: () => ReactNode }
  }

  /**
   * 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.
   *
   * @example
   * ```tsx

View on GitHub (pinned to d01c01bedb)

Solutions

1. Wrap the component with `<table.AppCell cell={cell}>...</table.AppCell>` passing the cell instance.
2. Move the component into AppCell's children within the column def / cell renderer.
3. Dedupe react-table so the context identity matches (check for duplicate installs).
4. If cell context is optional, use `useContext(CellContext)` directly and null-check.

Example fix

// before
function PriceCell() {
  const cell = useCellContext()
  return <td>{cell.getValue()}</td>
}

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

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

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

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

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

When it happens

Trigger: Calling `useCellContext()` in a component rendered outside `<table.AppCell cell={cell}>`; rendering the component via a portal; two copies of react-table with distinct contexts.

Common situations: Custom cell renderer placed in a wrapper div outside AppCell; refactoring moved the component out of AppCell's children; tests mounting the component in isolation without a provider.

Related errors

• `useTableContext` must be used within an `AppTable` componen
• `useHeaderContext` must be used within an `AppHeader` or `Ap
• `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/02d9c7b390117644. Report an issue: GitHub.