`useCellContext` must be used within an `AppCell` component.

Error message

`useCellContext` must be used within an `AppCell` component. Make sure your component is wrapped with `<table.AppCell cell={cell}>...</table.AppCell>`.

What it means

Svelte's useCellContext reads the cell from Svelte context set by <table.AppCell cell={cell}>. If context is undefined, the hook is called outside an AppCell wrapper and throws this error.

Source

Thrown at packages/svelte-table/src/createTableHook.svelte.ts:573

      THeaderComponents
    >
  }

  /**
   * Access the cell instance from within an `AppCell` wrapper.
   * Use this in custom `cellComponents` passed to `createTableHook`.
   * TFeatures is already known from the createTableHook call.
   */
  function useCellContext<TValue extends CellData = CellData>(): Cell<
    TFeatures,
    any,
    TValue
  > &
    TCellComponents & { FlexRender: typeof FlexRenderSvelte } {
    const cell = getContext(cellContextKey)

    if (!cell) {
      throw new Error(
        '`useCellContext` must be used within an `AppCell` component. ' +
          'Make sure your component is wrapped with `<table.AppCell cell={cell}>...</table.AppCell>`.',
      )
    }

    // `<table.AppCell>` Object.assign-es `cellComponents` and `FlexRender` onto
    // the same cell instance it puts in context, so this asserts the runtime
    // shape.
    return cell as unknown as Cell<TFeatures, any, TValue> &
      TCellComponents & { FlexRender: typeof FlexRenderSvelte }
  }

  /**
   * Access the header instance from within an `AppHeader` or `AppFooter` wrapper.
   * Use this in custom `headerComponents` passed to `createTableHook`.
   * TFeatures is already known from the createTableHook call.
   */
  function useHeaderContext<TValue extends CellData = CellData>(): Header<

View on GitHub (pinned to d01c01bedb)

Solutions

Render the component inside <table.AppCell cell={cell}>...</table.AppCell>
Pass the cell explicitly as a prop if it must render outside the AppCell subtree
Use the matching hook for the slot (useHeaderContext for headers, useTableContext at table level)

Example fix

<!-- before -->
<script>const cell = useCellContext()</script> <!-- throws -->
<!-- after -->
<table.AppCell cell={cell}>
  <MyCellContent /> <!-- useCellContext() works here -->
</table.AppCell>

Defensive patterns

Strategy: validation

Validate before calling

const cell = getContext(cellContextKey);
if (!cell) throw new Error('useCellContext must be used within <table.AppCell cell={cell}>');

Type guard

function isCell(c: unknown): c is Cell<any, any, any> {
  return !!c && typeof c === 'object' && 'column' in c && 'row' in c;
}

Try / catch

try {
  const cell = useCellContext();
} catch (e) {
  if (e.message.includes('AppCell')) {
    // accept the cell as a prop instead
  } else { throw e; }
}

Prevention

Render cell-consuming components only inside <table.AppCell cell={cell}>
Do not reuse cell components in header/footer slots without the right wrapper
Prefer explicit cell props for portal/modal rendering

When it happens

Trigger: Calling useCellContext() from a component not rendered via <table.AppCell cell={cell}>; reusing a cell component as a header/footer; snippet components instantiated outside the cell subtree.

Common situations: Extracted custom cell components rendered directly in markup; moving cell content into modals/portals without the AppCell wrapper; copy-pasted usage across slots.

Related errors

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