`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

Octane's useCellContext reads the cell from React context provided by <table.AppCell cell={cell}>. If no cell is in context, the hook is called outside an AppCell wrapper and throws this error.

Source

Thrown at packages/octane-table/src/createTableHookContexts.ts:104

      )
    }

    return table as unknown as OctaneTable<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
  > {
    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
  > {
    const header = useContext(headerContext)

View on GitHub (pinned to d01c01bedb)

Solutions

Render the consuming component inside <table.AppCell cell={cell}>...</table.AppCell>
Pass the cell object explicitly as a prop instead of using useCellContext
Verify the component is used as a cell renderer, not a header or table-level component

Example fix

// before
const cell = useCellContext(); // throws
// after
<table.AppCell cell={cell}>
  <MyCellContent /> // useCellContext() works here
</table.AppCell>

Defensive patterns

Strategy: validation

Validate before calling

// only call inside AppCell-rendered components
const cell = useContextSafe(cellContext);
if (!cell) throw new Error('useCellContext requires <table.AppCell cell={cell}>');

Type guard

function isCell(c: unknown): c is Cell<any, any, any> {
  return !!c && typeof c === 'object' && 'column' in c && 'row' in c;
}

Try / catch

try {
  const cell = useCellContext();
} catch (e) {
  if (e.message.includes('AppCell')) {
    // accept cell as prop instead
  } else { throw e; }
}

Prevention

Render cell-consuming components only within <table.AppCell cell={cell}>
Pass cells as props when components are shared across table regions
Match the hook to the slot: cell hook in cells, header hook in headers

When it happens

Trigger: Calling useCellContext() from a component not rendered via <table.AppCell cell={cell}>; rendering cell markup in a plain component without the AppCell wrapper; portal/modal rendering outside the cell subtree.

Common situations: Custom cell renderers extracted to files and used without the AppCell wrapper; reusing cell components in a different table area (header/footer) that doesn't provide cell context.

Related errors

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