`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

In `packages/preact-table/src/createTableHookContexts.tsx`, `useTableContext` reads a lower-level `tableContext` provided by AppTable. When it is null the hook throws instead of returning an untyped table. Same missing-provider contract as the other context hooks, implemented in the separate contexts module.

Source

Thrown at packages/preact-table/src/createTableHookContexts.tsx:107

  // intentionally loosely typed (`any` features); the `TFeatures` typing is
  // layered on by the hooks below.
  const tableContext = createContext<PreactTable<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>(): PreactTable<
    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 PreactTable<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

Render the consuming component inside `<table.AppTable>` from the same package/version.
Verify the `useTableContext` import matches the package whose AppTable you render (contexts module vs createTableHook module share providers, but mixing packages does not).
Pass the table instance as a prop for out-of-tree components.

Example fix

// before
import { useTableContext } from '.../createTableHookContexts'
const table = useTableContext() // rendered outside AppTable
// after
<table.AppTable table={table}>
  <MyTableUI />
</table.AppTable>

Defensive patterns

Strategy: validation

Validate before calling

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

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')) {
    // fall back to table passed via prop
  } else throw e
}

Prevention

Import useTableContext and render AppTable from the same package
Confirm the AppTable provider wraps the consuming component
Pass the table as a prop for components outside the table tree
Pin one version of the table package to avoid mismatched context keys

When it happens

Trigger: Calling `useTableContext()` (from createTableHookContexts) outside `<table.AppTable>` — e.g. in a component rendered as a sibling of the table, in a portal whose Preact parent chain lacks AppTable, or in code importing the contexts-module hook directly while the app uses a different table wrapper.

Common situations: Importing `useTableContext` from the wrong internal module whose context key differs from the one the app's AppTable provides; rendering table UI in a modal outside AppTable; forgetting the AppTable wrapper entirely.

Related errors

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