`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

In `packages/preact-table/src/createTableHookContexts.tsx`, `useCellContext` reads `cellContext` provided only by AppCell. A null result triggers this throw. It enforces that cell-rendering components are mounted inside `<table.AppCell cell={cell}>`.

Source

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

      )
    }

    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)

    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>`.',
      )
    }

    return cell as unknown as Cell<TFeatures, any, TValue>
  }

  /**
   * Access the header instance from within an `AppHeader` or `AppFooter` wrapper
   * bound to these scoped contexts.
   */
  function useHeaderContext<TValue extends CellData = CellData>(): Header<
    TFeatures,
    any,
    TValue
  > {
    const header = useContext(headerContext)

View on GitHub (pinned to d01c01bedb)

Solutions

Wrap the component with `<table.AppCell cell={cell}>` from the same package.
Use `useHeaderContext`/`useTableContext` if the component lives in a header or table scope.
Pass the cell as an explicit prop when the component renders outside a cell.

Example fix

// before
<CellBody /> // calls useCellContext()
// after
<table.AppCell cell={cell}>
  <CellBody />
</table.AppCell>

Defensive patterns

Strategy: validation

Validate before calling

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

Type guard

function hasCellContext(c: unknown): c is NonNullable<typeof c> {
  return c != null
}

Try / catch

try {
  const cell = useCellContext()
} catch (e) {
  if (e instanceof Error && e.message.includes('useCellContext')) {
    // fallback cell UI or explicit cell prop
  } else throw e
}

Prevention

Match the hook import to the same package whose AppCell you render
Wrap cell components in AppCell slots consistently
Use scope-correct hooks (table vs header vs cell)
Note provider requirements when sharing cell components across apps

When it happens

Trigger: Calling `useCellContext()` (from createTableHookContexts) in a component rendered outside `<table.AppCell cell={cell}>` — e.g. under AppRow directly, in a header slot, or in a component reused outside any table.

Common situations: Extracting cell content into a shared component without the AppCell wrapper; importing the hook from the contexts module while rendering via a different package's AppCell; using the wrong context hook for the current scope.

Related errors

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