`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

The Vue table's `useCellContext` hook reads a cell object injected by `provide(CellContext)`. That injection only exists inside a `<table.AppCell>` render slot, so when `inject` returns undefined the hook throws instead of returning a mis-typed cell. It fails fast so you learn immediately that your component was rendered outside the provider rather than crashing later on a null cell.

Source

Thrown at packages/vue-table/src/createTableHook.ts:435

    return table as unknown as AppVueTable<
      TFeatures,
      TData,
      TTableComponents,
      TCellComponents,
      THeaderComponents
    >
  }

  function useCellContext<TValue extends CellData = CellData>(): Cell<
    TFeatures,
    any,
    TValue
  > &
    TCellComponents & { FlexRender: Component } {
    const cell = inject(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>`.',
      )
    }

    // `<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: Component }
  }

  function useHeaderContext<TValue extends CellData = CellData>(): Header<
    TFeatures,
    any,
    TValue
  > &
    THeaderComponents & { FlexRender: Component } {
    const header = inject(HeaderContext)

View on GitHub (pinned to d01c01bedb)

Solutions

Wrap the consuming component with `<table.AppCell :cell="cell">` so the CellContext is provided.
If the component is several levels deep, pass the cell down and render it inside AppCell's slot, or provide the cell context yourself.
Replace `useCellContext()` with an explicit `cell` prop if the component must work outside a table.

Example fix

// before
<template><MyCellBody /></template>
const cell = useCellContext()
// after
<table.AppCell :cell="cell">
  <MyCellBody />
</table.AppCell>

Defensive patterns

Strategy: validation

Validate before calling

// Vue: check the provider exists before relying on the hook
import { inject } from 'vue'
const cell = inject(CellContext)
if (!cell) {
  // render fallback or warn instead of calling useCellContext()
  console.warn('Component must be rendered inside <table.AppCell>')
}

Type guard

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

Try / catch

try {
  const cell = useCellContext()
  // use cell
} catch (e) {
  if (e instanceof Error && e.message.includes('useCellContext')) {
    // render non-table fallback
  } else throw e
}

Prevention

Only render components that call useCellContext inside <table.AppCell> slots
Keep cell-scoped components colocated with the AppCell usage
Document the provider requirement on extracted cell components
Avoid teleports/portals that escape the AppCell subtree

When it happens

Trigger: Calling `useCellContext()` inside a component that is not rendered as a direct child of `<table.AppCell :cell="cell">` — e.g. placing the component under `AppRow` directly, inside a teleport, or calling it in `<script setup>` top-level of a component used elsewhere.

Common situations: Extracting the cell body into a standalone component and forgetting to wrap it with `table.AppCell`; reusing a 'CellContent' component in a non-table context; moving JSX/template markup out of the AppCell slot during a refactor.

Related errors

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