{"record":{"id":"a925e5069302283e","repo":"TanStack/table","slug":"usetablecontext-must-be-used-within-an-apptable-a925e5","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/preact-table/src/createTableHook.tsx","lineNumber":801,"sourceCode":"   * }\n   * ```\n   */\n  function useTableContext<\n    TData extends RowData = RowData,\n    TSelected = TableState<TFeatures>,\n  >(): AppPreactTable<\n    TFeatures,\n    TData,\n    TSelected,\n    TTableComponents,\n    TCellComponents,\n    THeaderComponents\n  > {\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 AppPreactTable<\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/preact-table/src/createTableHook.tsx#L783-L819","documentation":"Preact table's `useTableContext` reads `useContext(TableContext)`, which only `<table.AppTable>` provides. A null result means the hook ran outside that provider, so it throws immediately. This makes the missing-provider bug surface at the hook call instead of as a later null dereference.","triggerScenarios":"Calling `useTableContext()` in a component not rendered inside `<table.AppTable>...</table.AppTable>` — e.g. a toolbar outside the table, a Preact portal mounted elsewhere in the DOM/parent chain, or a helper invoked during module init before any provider renders.","commonSituations":"Refactoring table children into standalone components without moving them into the AppTable slot; using the table instance in a toast/modal rendered at the app root; version migration to the App* component API leaving old call sites.","solutions":["Render the consuming component inside `<table.AppTable>` so TableContext is provided.","Pass the table instance as a prop to components outside the table tree.","If a portal is needed, mount it within the AppTable component subtree so context propagates."],"exampleFix":"// before\nexport function Pagination() {\n  const table = useTableContext()\n}\n// after\n<table.AppTable table={table}>\n  <Pagination />\n</table.AppTable>","handlingStrategy":"validation","validationCode":"const table = useContext(TableContext)\n// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\nif (!table) {\n  console.warn('Component must be rendered inside <table.AppTable>')\n}","typeGuard":"function hasTableContext(t: unknown): t is NonNullable<typeof t> {\n  return t != null\n}","tryCatchPattern":"try {\n  const table = useTableContext()\n} catch (e) {\n  if (e instanceof Error && e.message.includes('useTableContext')) {\n    // render fallback or require table prop\n  } else throw e\n}","preventionTips":["Wrap all table-dependent Preact components in <table.AppTable>","Pass the table instance as a prop for portals/out-of-tree UI","Keep hooks and AppTable from the same package version","Test extracted components in isolation to catch missing providers early"],"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"}