{"record":{"id":"02d9c7b390117644","repo":"TanStack/table","slug":"usecellcontext-must-be-used-within-an-appcell-02d9c7","errorCode":null,"errorMessage":"`useCellContext` must be used within an `AppCell` component. Make sure your component is wrapped with `<table.AppCell cell={cell}>...</table.AppCell>`.","messagePattern":"`useCellContext` must be used within an `AppCell` component\\. Make sure your component is wrapped with `<table\\.AppCell cell=(.+?)>\\.\\.\\.</table\\.AppCell>`\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/react-table/src/createTableHook.tsx","lineNumber":845,"sourceCode":"   * function TextCell() {\n   *   const cell = useCellContext<string>()\n   *   return <span>{cell.getValue()}</span>\n   * }\n   *\n   * function NumberCell({ format }: { format?: Intl.NumberFormatOptions }) {\n   *   const cell = useCellContext<number>()\n   *   return <span>{cell.getValue().toLocaleString(undefined, format)}</span>\n   * }\n   * ```\n   */\n  function useCellContext<TValue extends CellData = CellData>() {\n    // `useContext` keeps React 18 support; `use(Context)` is React 19+ only.\n    // eslint-disable-next-line @eslint-react/no-use-context -- intentional for React 18\n    const cell = useContext(CellContext)\n\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n    if (!cell) {\n      throw new Error(\n        '`useCellContext` must be used within an `AppCell` component. ' +\n          'Make sure your component is wrapped with `<table.AppCell cell={cell}>...</table.AppCell>`.',\n      )\n    }\n\n    // `<table.AppCell>` Object.assign-es `cellComponents` and `FlexRender` onto\n    // the same cell instance it provides, so this asserts the runtime shape.\n    return cell as unknown as Cell<TFeatures, any, TValue> &\n      TCellComponents & { FlexRender: () => ReactNode }\n  }\n\n  /**\n   * Access the header instance from within an `AppHeader` or `AppFooter` wrapper.\n   * Use this in custom `headerComponents` passed to `createTableHook`.\n   * TFeatures is already known from the createTableHook call.\n   *\n   * @example\n   * ```tsx","sourceCodeStart":827,"sourceCodeEnd":863,"githubUrl":"https://github.com/TanStack/table/blob/d01c01bedbab0ff6c2641f18b2fc9a11545d9bf6/packages/react-table/src/createTableHook.tsx#L827-L863","documentation":"`useCellContext` reads the cell context provided by `<table.AppCell cell={cell}>`. If no AppCell provider is above the calling component, the context is undefined and this error is thrown. It ensures cell-scoped APIs are only used with a real cell instance.","triggerScenarios":"Calling `useCellContext()` in a component rendered outside `<table.AppCell cell={cell}>`; rendering the component via a portal; two copies of react-table with distinct contexts.","commonSituations":"Custom cell renderer placed in a wrapper div outside AppCell; refactoring moved the component out of AppCell's children; tests mounting the component in isolation without a provider.","solutions":["Wrap the component with `<table.AppCell cell={cell}>...</table.AppCell>` passing the cell instance.","Move the component into AppCell's children within the column def / cell renderer.","Dedupe react-table so the context identity matches (check for duplicate installs).","If cell context is optional, use `useContext(CellContext)` directly and null-check."],"exampleFix":"// before\nfunction PriceCell() {\n  const cell = useCellContext()\n  return <td>{cell.getValue()}</td>\n}\n\n// after\n<table.AppCell cell={cell}>\n  <PriceCell />\n</table.AppCell>","handlingStrategy":"validation","validationCode":"import { useContext } from 'react'\nimport { CellContext } from '@your-scope/react-table'\n\nfunction useSafeCell() {\n  const cell = useContext(CellContext)\n  if (!cell) {\n    console.error('useCellContext requires <table.AppCell cell={cell}> above this component')\n  }\n  return cell\n}","typeGuard":"function hasCell<T>(c: T | null | undefined): c is T {\n  return c != null\n}","tryCatchPattern":"try {\n  const cell = useCellContext()\n  // use cell\n} catch (err) {\n  if (err instanceof Error && err.message.includes('useCellContext')) {\n    return null // not inside <table.AppCell>\n  }\n  throw err\n}","preventionTips":["Wrap custom cell widgets in <table.AppCell cell={cell}> at the renderer site.","Keep cell consumers co-located with the AppCell provider.","Watch for duplicate react-table installs.","Mount test subjects inside AppCell via a shared test wrapper."],"tags":["react","react-context","missing-provider"],"backgroundTag":"missing-context-provider","analyzedSha":"d01c01bedbab0ff6c2641f18b2fc9a11545d9bf6","analyzedAt":"2026-08-28T21:52:44.679Z","schemaVersion":2},"datasetVersion":"2026-08-29T02:17:18.158Z"}