`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

This is the standalone-contexts variant of the React table hook: `useTableContext` in `createTableHookContexts.tsx` reads `tableContext` provided by `<table.AppTable>`. Without that provider the context is undefined and the error is thrown, preventing use of table APIs with no table instance.

Source

Thrown at packages/react-table/src/createTableHookContexts.tsx:110

  // eslint-disable-next-line @eslint-react/naming-convention-context-name
  const cellContext = createContext<Cell<any, any, any> | null>(null)
  // eslint-disable-next-line @eslint-react/naming-convention-context-name
  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>(): ReactTable<
    TFeatures,
    TTableData
  > {
    // eslint-disable-next-line @eslint-react/no-use-context -- intentional for React 18
    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 ReactTable<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
  > {
    // eslint-disable-next-line @eslint-react/no-use-context -- intentional for React 18

View on GitHub (pinned to d01c01bedb)

Solutions

Wrap the consumer in `<table.AppTable table={table}>...</table.AppTable>`.
Relocate the component inside AppTable's children.
Dedupe the package (npm ls, resolutions) so context identity is shared.
Use `useContext(tableContext)` directly with a null check when the table may legitimately be absent.

Example fix

// before
export function ToolbarInner() {
  const table = useTableContext()
  return <button onClick={() => table.resetSorting()}>Reset</button>
}

// after
export function Toolbar() {
  return (
    <table.AppTable table={table}>
      <ToolbarInner />
    </table.AppTable>
  )
}

Defensive patterns

Strategy: validation

Validate before calling

import { useContext } from 'react'
import { tableContext } from '@your-scope/react-table/contexts'

function useSafeTable() {
  const table = useContext(tableContext)
  if (!table) {
    console.error('useTableContext requires <table.AppTable> above this component')
  }
  return table
}

Type guard

function hasTable<T>(t: T | null | undefined): t is T {
  return t != null
}

Try / catch

try {
  const table = useTableContext()
  // use table
} catch (err) {
  if (err instanceof Error && err.message.includes('useTableContext')) {
    return null
  }
  throw err
}

Prevention

Ensure every table-context consumer sits under <table.AppTable>.
Dedupe package versions across workspaces.
Avoid rendering consumers in second roots.
Add an AppTable-wrapping test utility.

When it happens

Trigger: Calling `useTableContext()` outside `<table.AppTable table={table}>`'s subtree; rendering consumers in another root or portal; duplicate package copies yielding different context objects.

Common situations: Custom components imported into multiple apps where one forgot the AppTable wrapper; monorepo with mixed table package versions; test setups rendering only the consumer.

Related errors

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