{"record":{"id":"e479713118baa04a","repo":"TanStack/table","slug":"usetablecontext-must-be-used-within-an-apptable-e47971","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/createTableHookContexts.tsx","lineNumber":107,"sourceCode":"  // intentionally loosely typed (`any` features); the `TFeatures` typing is\n  // layered on by the hooks below.\n  const tableContext = createContext<PreactTable<any, any> | null>(null)\n  const cellContext = createContext<Cell<any, any, any> | null>(null)\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>(): PreactTable<\n    TFeatures,\n    TTableData\n  > {\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 PreactTable<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    const cell = useContext(cellContext)","sourceCodeStart":89,"sourceCodeEnd":125,"githubUrl":"https://github.com/TanStack/table/blob/d01c01bedbab0ff6c2641f18b2fc9a11545d9bf6/packages/preact-table/src/createTableHookContexts.tsx#L89-L125","documentation":"In `packages/preact-table/src/createTableHookContexts.tsx`, `useTableContext` reads a lower-level `tableContext` provided by AppTable. When it is null the hook throws instead of returning an untyped table. Same missing-provider contract as the other context hooks, implemented in the separate contexts module.","triggerScenarios":"Calling `useTableContext()` (from createTableHookContexts) outside `<table.AppTable>` — e.g. in a component rendered as a sibling of the table, in a portal whose Preact parent chain lacks AppTable, or in code importing the contexts-module hook directly while the app uses a different table wrapper.","commonSituations":"Importing `useTableContext` from the wrong internal module whose context key differs from the one the app's AppTable provides; rendering table UI in a modal outside AppTable; forgetting the AppTable wrapper entirely.","solutions":["Render the consuming component inside `<table.AppTable>` from the same package/version.","Verify the `useTableContext` import matches the package whose AppTable you render (contexts module vs createTableHook module share providers, but mixing packages does not).","Pass the table instance as a prop for out-of-tree components."],"exampleFix":"// before\nimport { useTableContext } from '.../createTableHookContexts'\nconst table = useTableContext() // rendered outside AppTable\n// after\n<table.AppTable table={table}>\n  <MyTableUI />\n</table.AppTable>","handlingStrategy":"validation","validationCode":"const table = useContext(tableContext)\nif (!table) {\n  console.warn('Component must be rendered inside <table.AppTable> (matching package)')\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    // fall back to table passed via prop\n  } else throw e\n}","preventionTips":["Import useTableContext and render AppTable from the same package","Confirm the AppTable provider wraps the consuming component","Pass the table as a prop for components outside the table tree","Pin one version of the table package to avoid mismatched context keys"],"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"}