`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

useTableContext in packages/vue-table reads the table from Vue's inject(TableContext). If no ancestor component provided the context, it throws this error telling you to render the component tree inside <table.AppTable>. The hook only works within the AppTable render scope created by the table instance.

Source

Thrown at packages/vue-table/src/createTableHook.ts:408

    return coreCreateColumnHelper<TFeatures, TData>() as AppColumnHelper<
      TFeatures,
      TData,
      TCellComponents,
      THeaderComponents
    >
  }

  function useTableContext<TData extends RowData = RowData>(): AppVueTable<
    TFeatures,
    TData,
    TTableComponents,
    TCellComponents,
    THeaderComponents
  > {
    const table = inject(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 AppVueTable<
      TFeatures,
      TData,
      TTableComponents,
      TCellComponents,
      THeaderComponents
    >
  }

  function useCellContext<TValue extends CellData = CellData>(): Cell<

View on GitHub (pinned to d01c01bedb)

Solutions

Wrap the consuming component in <table.AppTable>...</table.AppTable> within the provider tree.
Pass the table instance as a prop instead of relying on context for out-of-tree components.
If using Teleport, keep the logical component inside AppTable and only teleport the DOM output, or provide/inject the context manually at the portal root.
Ensure only one table instance is expected, or that the correct table provides the context.

Example fix

<!-- before -->
<my-cell />

<!-- after -->
<table.AppTable>
  <my-cell />
</table.AppTable>

Defensive patterns

Strategy: try-catch

Validate before calling

// in setup, before using the hook's result
const table = inject(TableContext, null)
if (!table) {
  console.warn('useTableContext used outside <table.AppTable>')
}

Type guard

function hasTableContext(v: unknown): v is Table {
  return v != null && typeof v === 'object' && 'AppTable' in (v as object)
}

Try / catch

import { getCurrentInstance } from 'vue'
try {
  const table = useTableContext()
} catch (e) {
  if ((e as Error).message.includes('useTableContext')) {
    // render fallback or require table as a prop
  } else throw e
}

Prevention

Always render consumers inside <table.AppTable>
Prefer passing the table instance as a prop for Teleport/modals rendered outside the tree
Do not call useTableContext in route-level components outside the table
Use inject with a default to fail gracefully in shared components

When it happens

Trigger: Calling useTableContext() in a component that is not a descendant of <table.AppTable> — e.g. a sibling, a portal/Teleport target outside the provider tree, or usage in a route component rendered outside the table.

Common situations: Rendering cell components via Teleport/portals outside the provider; using the hook in a separate component tree (modals mounted to body); forgetting to use table.AppTable instead of plain markup; multiple table instances and the wrong one provides context.

Related errors

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