{"record":{"id":"d314fae68642cbf2","repo":"TanStack/table","slug":"usetablecontext-must-be-used-within-an-apptable-d314fa","errorCode":null,"errorMessage":"`useTableContext` must be used within an `AppTable` component. Make sure your component is wrapped with `<table.AppTable>...</table.AppTable>`.","messagePattern":"`useTableContext` must be used within an `AppTable` component\\. Make sure your component is wrapped with `<table\\.AppTable>\\.\\.\\.</table\\.AppTable>`\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/react-table/src/createTableHookContexts.tsx","lineNumber":110,"sourceCode":"  // eslint-disable-next-line @eslint-react/naming-convention-context-name\n  const cellContext = createContext<Cell<any, any, any> | null>(null)\n  // eslint-disable-next-line @eslint-react/naming-convention-context-name\n  const headerContext = createContext<Header<any, any, any> | null>(null)\n\n  /**\n   * Access the table instance from within an `AppTable` wrapper bound to these\n   * scoped contexts. `TFeatures` is known; the registered component maps are not\n   * (see {@link createTableHookContexts}).\n   */\n  function useTableContext<TTableData extends RowData = TData>(): ReactTable<\n    TFeatures,\n    TTableData\n  > {\n    // eslint-disable-next-line @eslint-react/no-use-context -- intentional for React 18\n    const table = useContext(tableContext)\n\n    if (!table) {\n      throw new Error(\n        '`useTableContext` must be used within an `AppTable` component. ' +\n          'Make sure your component is wrapped with `<table.AppTable>...</table.AppTable>`.',\n      )\n    }\n\n    return table as unknown as ReactTable<TFeatures, TTableData>\n  }\n\n  /**\n   * Access the cell instance from within an `AppCell` wrapper bound to these\n   * scoped contexts.\n   */\n  function useCellContext<TValue extends CellData = CellData>(): Cell<\n    TFeatures,\n    any,\n    TValue\n  > {\n    // eslint-disable-next-line @eslint-react/no-use-context -- intentional for React 18","sourceCodeStart":92,"sourceCodeEnd":128,"githubUrl":"https://github.com/TanStack/table/blob/d01c01bedbab0ff6c2641f18b2fc9a11545d9bf6/packages/react-table/src/createTableHookContexts.tsx#L92-L128","documentation":"This is the standalone-contexts variant of the React table hook: `useTableContext` in `createTableHookContexts.tsx` reads `tableContext` provided by `<table.AppTable>`. Without that provider the context is undefined and the error is thrown, preventing use of table APIs with no table instance.","triggerScenarios":"Calling `useTableContext()` outside `<table.AppTable table={table}>`'s subtree; rendering consumers in another root or portal; duplicate package copies yielding different context objects.","commonSituations":"Custom components imported into multiple apps where one forgot the AppTable wrapper; monorepo with mixed table package versions; test setups rendering only the consumer.","solutions":["Wrap the consumer in `<table.AppTable table={table}>...</table.AppTable>`.","Relocate the component inside AppTable's children.","Dedupe the package (npm ls, resolutions) so context identity is shared.","Use `useContext(tableContext)` directly with a null check when the table may legitimately be absent."],"exampleFix":"// before\nexport function ToolbarInner() {\n  const table = useTableContext()\n  return <button onClick={() => table.resetSorting()}>Reset</button>\n}\n\n// after\nexport function Toolbar() {\n  return (\n    <table.AppTable table={table}>\n      <ToolbarInner />\n    </table.AppTable>\n  )\n}","handlingStrategy":"validation","validationCode":"import { useContext } from 'react'\nimport { tableContext } from '@your-scope/react-table/contexts'\n\nfunction useSafeTable() {\n  const table = useContext(tableContext)\n  if (!table) {\n    console.error('useTableContext requires <table.AppTable> above this component')\n  }\n  return table\n}","typeGuard":"function hasTable<T>(t: T | null | undefined): t is T {\n  return t != null\n}","tryCatchPattern":"try {\n  const table = useTableContext()\n  // use table\n} catch (err) {\n  if (err instanceof Error && err.message.includes('useTableContext')) {\n    return null\n  }\n  throw err\n}","preventionTips":["Ensure every table-context consumer sits under <table.AppTable>.","Dedupe package versions across workspaces.","Avoid rendering consumers in second roots.","Add an AppTable-wrapping test utility."],"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"}