`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

Preact table's `useTableContext` reads `useContext(TableContext)`, which only `<table.AppTable>` provides. A null result means the hook ran outside that provider, so it throws immediately. This makes the missing-provider bug surface at the hook call instead of as a later null dereference.

Source

Thrown at packages/preact-table/src/createTableHook.tsx:801

   * }
   * ```
   */
  function useTableContext<
    TData extends RowData = RowData,
    TSelected = TableState<TFeatures>,
  >(): AppPreactTable<
    TFeatures,
    TData,
    TSelected,
    TTableComponents,
    TCellComponents,
    THeaderComponents
  > {
    const table = useContext(TableContext)

    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
    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 AppPreactTable<
      TFeatures,
      TData,
      TSelected,
      TTableComponents,
      TCellComponents,
      THeaderComponents
    >
  }

View on GitHub (pinned to d01c01bedb)

Solutions

Render the consuming component inside `<table.AppTable>` so TableContext is provided.
Pass the table instance as a prop to components outside the table tree.
If a portal is needed, mount it within the AppTable component subtree so context propagates.

Example fix

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

Defensive patterns

Strategy: validation

Validate before calling

const table = useContext(TableContext)
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
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 fallback or require table prop
  } else throw e
}

Prevention

Wrap all table-dependent Preact components in <table.AppTable>
Pass the table instance as a prop for portals/out-of-tree UI
Keep hooks and AppTable from the same package version
Test extracted components in isolation to catch missing providers early

When it happens

Trigger: Calling `useTableContext()` in a component not rendered inside `<table.AppTable>...</table.AppTable>` — e.g. a toolbar outside the table, a Preact portal mounted elsewhere in the DOM/parent chain, or a helper invoked during module init before any provider renders.

Common situations: Refactoring table children into standalone components without moving them into the AppTable slot; using the table instance in a toast/modal rendered at the app root; version migration to the App* component API leaving old call sites.

Related errors

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