{"record":{"id":"d9a1baa6d5f74d36","repo":"TanStack/table","slug":"usecellcontext-must-be-used-within-an-appcell-d9a1ba","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/preact-table/src/createTableHook.tsx","lineNumber":843,"sourceCode":"   * @example\n   * ```tsx\n   * 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    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: () => ComponentChildren }\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":825,"sourceCodeEnd":861,"githubUrl":"https://github.com/TanStack/table/blob/d01c01bedbab0ff6c2641f18b2fc9a11545d9bf6/packages/preact-table/src/createTableHook.tsx#L825-L861","documentation":"Preact table's `useCellContext` reads `useContext(CellContext)`, provided only by `<table.AppCell cell={cell}>`. When the hook runs outside that provider the context is null and it throws. It is a fail-fast guard ensuring cell components are rendered within the AppCell wrapper.","triggerScenarios":"Calling `useCellContext()` in a component rendered outside `<table.AppCell cell={cell}>` — e.g. directly under AppRow, inside AppHeader/Footer, or in a component reused in a sidebar/panel outside the table.","commonSituations":"Extracting a cell renderer into a shared component without the AppCell wrapper; copy-pasting a component that uses the wrong context hook; conditional rendering that moves the component out of the cell slot.","solutions":["Wrap the component with `<table.AppCell cell={cell}>` so CellContext is provided.","Use `useHeaderContext` or `useTableContext` if the component belongs in a header/table scope.","Pass the cell as an explicit prop when rendering outside a cell."],"exampleFix":"// before\n<CellBody /> // calls useCellContext()\n// after\n<table.AppCell cell={cell}>\n  <CellBody />\n</table.AppCell>","handlingStrategy":"validation","validationCode":"const cell = useContext(CellContext)\n// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\nif (!cell) {\n  console.warn('Component must be rendered inside <table.AppCell cell={cell}>')\n}","typeGuard":"function hasCellContext(c: unknown): c is NonNullable<typeof c> {\n  return c != null\n}","tryCatchPattern":"try {\n  const cell = useCellContext()\n} catch (e) {\n  if (e instanceof Error && e.message.includes('useCellContext')) {\n    // fallback cell rendering\n  } else throw e\n}","preventionTips":["Mount cell components only inside AppCell slots","Verify the hook matches the component's scope","Avoid conditional rendering that moves components out of the cell subtree","Document provider requirements on shared cell components"],"tags":["preact","react-table","context","missing-provider"],"backgroundTag":"hook-used-outside-provider","analyzedSha":"d01c01bedbab0ff6c2641f18b2fc9a11545d9bf6","analyzedAt":"2026-08-28T21:52:44.679Z","schemaVersion":2},"datasetVersion":"2026-08-29T02:17:18.158Z"}