`useTableContext` must be used within an `AppTable` componen

Error message

`useTableContext` must be used within an `AppTable` component. Make sure your component is wrapped with `<table.AppTable>...</table.AppTable>`.

What it means

Octane's useTableContext reads the table from React context. If no table was provided, the caller is not rendering inside the <table.AppTable> provider component, so the hook throws this descriptive error rather than returning null.

Source

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

  // intentionally loosely typed (`any` features); the `TFeatures` typing is
  // layered on by the hooks below.
  const tableContext = createContext<OctaneTable<any, any> | null>(null)
  const cellContext = createContext<Cell<any, any, any> | null>(null)
  const headerContext = createContext<Header<any, any, any> | null>(null)

  /**
   * Access the table instance from within an `AppTable` wrapper bound to these
   * scoped contexts. `TFeatures` is known; the registered component maps are
   * not (see {@link createTableHookContexts}).
   */
  function useTableContext<TTableData extends RowData = TData>(): OctaneTable<
    TFeatures,
    TTableData
  > {
    const table = useContext(tableContext)

    if (!table) {
      throw new Error(
        '`useTableContext` must be used within an `AppTable` component. ' +
          'Make sure your component is wrapped with `<table.AppTable>...</table.AppTable>`.',
      )
    }

    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)

View on GitHub (pinned to d01c01bedb)

Solutions

Wrap the consuming component in the provider: <table.AppTable>...</table.AppTable>
Pass the table instance explicitly as a prop instead of relying on context for out-of-tree components
Move the hook call into a component rendered within the AppTable subtree

Example fix

// before
const table = useTableContext(); // throws outside provider
// after
<table.AppTable>
  <MyBody /> // useTableContext() works here
</table.AppTable>

Defensive patterns

Strategy: validation

Validate before calling

// render-time check
if (!isWithinAppTable()) throw new Error('useTableContext requires <table.AppTable>');

Type guard

function isTableContext(t: unknown): t is OctaneTable {
  return !!t && typeof t === 'object' && 'getRowModel' in t;
}

Try / catch

try {
  const table = useTableContext();
} catch (e) {
  if (e.message.includes('AppTable')) {
    // render fallback without context or restructure tree
  } else { throw e; }
}

Prevention

Always place context-consuming components inside <table.AppTable>
Prefer passing the table instance as a prop for out-of-tree components (portals/modals)
Add dev assertions when wrapping components that depend on table context

When it happens

Trigger: Calling the table hook's useTableContext() from a component not nested under <table.AppTable>, or after the AppTable provider was removed/renamed in the component tree.

Common situations: Using table sub-hooks in standalone/portal components; rendering cells outside the table tree (e.g. modals via portals without passing context); copy-pasted hook usage from examples missing the AppTable wrapper.

Related errors

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