`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 (React-like) table's `useTableContext` reads `useContext(TableContext)`, which only `<table.AppTable>` provides. When the hook runs outside that provider, context is null and the hook throws immediately. This prevents dereferencing an undefined table later.

Source

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

 *   </table.Subscribe>
 * }
 * ```
 */
	function useTableContext<
		TData extends RowData = RowData,
		TSelected = TableState<TFeatures>,
	>(): AppOctaneTable<
		TFeatures,
		TData,
		TSelected,
		TTableComponents,
		TCellComponents,
		THeaderComponents
	> {
		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>`.');
		}

		// The value provided by `<table.AppTable>` is the extended table (the App*
		// wrapper components and `tableComponents` are Object.assign-ed onto the
		// same instance `useAppTable` returns), so this asserts the runtime shape.
		return table as unknown as AppOctaneTable<
			TFeatures,
			TData,
			TSelected,
			TTableComponents,
			TCellComponents,
			THeaderComponents
		>;
	}

	/**
 * Access the cell instance from within an `AppCell` wrapper. Use this in

View on GitHub (pinned to d01c01bedb)

Solutions

Render the calling component within `<table.AppTable>` so TableContext is provided.
Pass the table instance as a prop instead of using context for out-of-tree components.
If using portals, keep the portal inside AppTable's React subtree (React portals keep context only from the React tree, not the DOM tree).

Example fix

// before
export function Toolbar() {
  const table = useTableContext()
}
// after
<table.AppTable table={table}>
  <Toolbar />
</table.AppTable>

Defensive patterns

Strategy: validation

Validate before calling

const table = useContext(TableContext)
if (!table) {
  console.warn('Component must be rendered inside <table.AppTable>')
}

Type guard

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

Try / catch

try {
  const table = useTableContext()
} catch (e) {
  if (e instanceof Error && e.message.includes('useTableContext')) {
    // render placeholder or take table via prop instead
  } else throw e
}

Prevention

Wrap all table-dependent UI inside <table.AppTable>
For toolbars/modals outside the tree, accept the table as a prop
Remember portals keep React context only from the React parent chain
Keep AppTable and hooks from the same package version

When it happens

Trigger: Calling `useTableContext()` in a component not rendered inside `<table.AppTable>...</table.AppTable>` — e.g. in a sibling of the table, in a React portal outside the AppTable subtree, or in a helper called before the table component mounts.

Common situations: Splitting table-related logic into a custom hook used by a component outside the table tree; rendering table children through a portal; forgetting to wrap the app with `<table.AppTable>` during migration to the App* component API.

Related errors

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