`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 the Octane table reads `useContext(CellContext)`, provided only by `<table.AppCell cell={cell}>`. Outside that provider the context is null and the hook throws. It is a fail-fast assertion that the component is used as a cell child.

Source

Thrown at packages/octane-table/src/createTableHook.tsrx:225

	}

	/**
 * Access the cell instance from within an `AppCell` wrapper. Use this in
 * custom `cellComponents` passed to `createTableHook`.
 *
 * @example
 * ```tsx
 * function TextCell() @{
 *   const cell = useCellContext<string>()
 *   <span>{cell.getValue()}</span>
 * }
 * ```
 */
	function useCellContext<TValue extends CellData = CellData>() {
		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>`.');
		}

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

	/**
 * Access the header instance from within an `AppHeader` or `AppFooter`
 * wrapper. Use this in custom `headerComponents` passed to `createTableHook`.
 *
 * @example
 * ```tsx
 * function SortIndicator() @{

View on GitHub (pinned to d01c01bedb)

Solutions

Wrap the component with `<table.AppCell cell={cell}>` so CellContext is provided.
Use `useHeaderContext`/`useTableContext` if the component actually lives in a header or table scope.
Pass the cell explicitly as a prop when the component must render 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)
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')) {
    // render fallback cell UI
  } else throw e
}

Prevention

Only mount cell components inside AppCell slots
Use the correct hook per scope (table/header/cell)
Avoid reusing cell components in non-table layouts without a cell prop
Add a comment documenting the AppCell requirement

When it happens

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

Common situations: Extracting cell content into a shared component and rendering it without the AppCell wrapper; confusing useCellContext with useTableContext; rendering cell components conditionally outside the cell slot.

Related errors

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