`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

Preact table's `useCellContext` reads `useContext(CellContext)`, provided only by `<table.AppCell cell={cell}>`. When the hook runs outside that provider the context is null and it throws. It is a fail-fast guard ensuring cell components are rendered within the AppCell wrapper.

Source

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

   * @example
   * ```tsx
   * 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>() {
    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: () => ComponentChildren }
  }

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

Wrap the component with `<table.AppCell cell={cell}>` so CellContext is provided.
Use `useHeaderContext` or `useTableContext` if the component belongs in a header/table scope.
Pass the cell as an explicit prop when rendering outside a cell.

Example fix

// before
<CellBody /> // calls useCellContext()
// after
<table.AppCell cell={cell}>
  <CellBody />
</table.AppCell>

Defensive patterns

Strategy: validation

Validate before calling

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

Type guard

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

Try / catch

try {
  const cell = useCellContext()
} catch (e) {
  if (e instanceof Error && e.message.includes('useCellContext')) {
    // fallback cell rendering
  } else throw e
}

Prevention

Mount cell components only inside AppCell slots
Verify the hook matches the component's scope
Avoid conditional rendering that moves components out of the cell subtree
Document provider requirements on shared cell components

When it happens

Trigger: Calling `useCellContext()` in a component rendered outside `<table.AppCell cell={cell}>` — e.g. directly under AppRow, inside AppHeader/Footer, or in a component reused in a sidebar/panel outside the table.

Common situations: Extracting a cell renderer into a shared component without the AppCell wrapper; copy-pasting a component that uses the wrong context hook; conditional rendering that moves the component out of the cell slot.

Related errors

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