{"record":{"id":"d9253f7c1366f73e","repo":"TanStack/table","slug":"usetablecontext-must-be-used-within-an-apptable-d9253f","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/createTableHook.tsx","lineNumber":801,"sourceCode":"   */\n  function useTableContext<\n    TData extends RowData = RowData,\n    TSelected = TableState<TFeatures>,\n  >(): AppReactTable<\n    TFeatures,\n    TData,\n    TSelected,\n    TTableComponents,\n    TCellComponents,\n    THeaderComponents\n  > {\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 table = useContext(TableContext)\n\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\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    // The value provided by `<table.AppTable>` is the extended table (the App*\n    // wrapper components and `tableComponents` are Object.assign-ed onto the same\n    // instance `useAppTable` returns), so this asserts the runtime shape.\n    return table as unknown as AppReactTable<\n      TFeatures,\n      TData,\n      TSelected,\n      TTableComponents,\n      TCellComponents,\n      THeaderComponents\n    >\n  }\n","sourceCodeStart":783,"sourceCodeEnd":819,"githubUrl":"https://github.com/TanStack/table/blob/d01c01bedbab0ff6c2641f18b2fc9a11545d9bf6/packages/react-table/src/createTableHook.tsx#L783-L819","documentation":"`useTableContext` reads the React table context supplied by the `<table.AppTable>` provider component. When no provider exists above the calling component, the context is undefined and the library throws this error with instructions to wrap the component in `<table.AppTable>...</table.AppTable>`. It guards against using table APIs without an actual table instance.","triggerScenarios":"Calling `useTableContext()` from a component rendered outside `<table.AppTable>`; rendering a consumer through a portal or a separate React root; multiple installed copies of react-table creating divergent contexts.","commonSituations":"A custom row/cell toolbar component using table-level APIs placed outside AppTable; storybook or test harness mounting only the child component; version duplication after dependency bumps.","solutions":["Wrap the consuming component with `<table.AppTable table={table}>...</table.AppTable>` so the context is provided.","Render the component inside AppTable's children instead of beside it.","Dedupe the table package (npm ls, package overrides) to ensure a single context module instance.","For optional usage, read `useContext(TableContext)` directly and handle the undefined case."],"exampleFix":"// before\nfunction RowCount() {\n  const table = useTableContext()\n  return <span>{table.getFilteredRowModel().rows.length}</span>\n}\n\n// after\n<table.AppTable table={table}>\n  <RowCount />\n</table.AppTable>","handlingStrategy":"validation","validationCode":"import { useContext } from 'react'\nimport { TableContext } from '@your-scope/react-table'\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 // not inside <table.AppTable>\n  }\n  throw err\n}","preventionTips":["Render table-consuming components only inside <table.AppTable> children.","Avoid portals or separate ReactDOM roots for table children.","Dedupe react-table versions in the lockfile.","Provide a test helper that wraps subjects in AppTable."],"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"}