fix(svelte-table): set App* contexts in their own components (#6618)

Co-authored-by: Kevin Van Cott <kevinvandy656@gmail.com>

Author: india3Eth

.changeset/svelte-app-wrapper-context.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/svelte-table': patch
+---
+
+fix(svelte-table): set the `AppTable`/`AppCell`/`AppHeader`/`AppFooter` contexts in their own components, so cells created later (e.g. when showing a column) no longer throw `set_context_after_init` in async mode

packages/svelte-table/src/AppCell.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { setContext, untrack } from 'svelte'
+  import { cellContextKey } from './context-keys'
   import type { Snippet } from 'svelte'
 
   interface Props {
@@ -8,6 +10,11 @@
   }
 
   let { children, cell, cellComponents }: Props = $props()
+
+  setContext(
+    cellContextKey,
+    untrack(() => cell),
+  )
 </script>
 
 {@render children?.(Object.assign(cell, cellComponents))}

packages/svelte-table/src/AppHeader.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { setContext, untrack } from 'svelte'
+  import { headerContextKey } from './context-keys'
   import type { Snippet } from 'svelte'
 
   interface Props {
@@ -8,6 +10,11 @@
   }
 
   let { children, header, headerComponents }: Props = $props()
+
+  setContext(
+    headerContextKey,
+    untrack(() => header),
+  )
 </script>
 
 {@render children?.(Object.assign(header, headerComponents))}

packages/svelte-table/src/AppTable.svelte

@@ -1,11 +1,19 @@
 <script lang="ts">
+  import { setContext, untrack } from 'svelte'
+  import { tableContextKey } from './context-keys'
   import type { Snippet } from 'svelte'
 
   interface Props {
+    table: any
     children: Snippet
   }
 
-  let { children }: Props = $props()
+  let { children, table }: Props = $props()
+
+  setContext(
+    tableContextKey,
+    untrack(() => table),
+  )
 </script>
 
 {@render children?.()}

packages/svelte-table/src/createTableHook.svelte.ts

@@ -1,4 +1,4 @@
-import { getContext, setContext } from 'svelte'
+import { getContext } from 'svelte'
 import { createColumnHelper as coreCreateColumnHelper } from '@tanstack/table-core'
 import { createTable } from './createTable.svelte'
 import { mergeObjects } from './merge-objects'
@@ -647,17 +647,14 @@ export function createTableHook<
     }
 
     // Create wrapper components using the svelte-form (internal, props) => pattern.
-    // setContext is called in the closure — this runs during component
-    // initialization, so Svelte's context API works correctly.
-    // With keyed {#each} blocks, components are recreated on reorder,
-    // so context is always fresh.
+    // They only add props: each App*Svelte component sets its own context while
+    // it initializes. Calling setContext here would run before that component
+    // exists and write into the context of the component rendering it.
     const AppTable = ((internal: any, props: any) => {
-      setContext(tableContextKey, table)
-      return AppTableSvelte(internal, { ...props })
+      return AppTableSvelte(internal, { ...props, table })
     }) as Component<{ children: Snippet }>
 
     const AppCell = ((internal: any, { children, cell }: any) => {
-      setContext(cellContextKey, cell)
       return AppCellSvelte(internal, {
         cell,
         cellComponents: cellComponentsWithFlexRender,
@@ -669,7 +666,6 @@ export function createTableHook<
     }>
 
     const AppHeader = ((internal: any, { children, header }: any) => {
-      setContext(headerContextKey, header)
       return AppHeaderSvelte(internal, {
         header,
         headerComponents: headerComponentsWithFlexRender,
@@ -682,7 +678,6 @@ export function createTableHook<
 
     // AppFooter reuses AppHeaderSvelte (footers use Header type in table-core)
     const AppFooter = ((internal: any, { children, header }: any) => {
-      setContext(headerContextKey, header)
       return AppHeaderSvelte(internal, {
         header,
         headerComponents: headerComponentsWithFlexRender,

packages/svelte-table/tests/fixtures/HookContextProbe.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { getContext } from 'svelte'
+  import {
+    cellContextKey,
+    headerContextKey,
+    tableContextKey,
+  } from '../../src/context-keys'
+
+  const visible = [tableContextKey, cellContextKey, headerContextKey].filter(
+    (key) => getContext(key) !== undefined,
+  )
+</script>
+
+<output aria-label="Contexts outside the wrappers">{visible.join(',')}</output>

packages/svelte-table/tests/fixtures/HookContextScope.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import HookContextProbe from './HookContextProbe.svelte'
+  import { hook } from './hook-fixture'
+  import type { HookData } from './hook-fixture'
+
+  const columnHelper = hook.createAppColumnHelper<HookData>()
+  const table = hook.createAppTable({
+    data: [{ id: '1', title: 'First' }],
+    columns: columnHelper.columns([
+      columnHelper.accessor('title', { header: 'Title', footer: 'Title' }),
+    ]),
+  })
+  const cell = $derived(table.getRowModel().rows[0]!.getAllCells()[0]!)
+  const header = $derived(table.getHeaderGroups()[0]!.headers[0]!)
+  const footer = $derived(table.getFooterGroups()[0]!.headers[0]!)
+</script>
+
+<table.AppTable>
+  <table.TableBadge />
+</table.AppTable>
+
+<table.AppCell {cell}>
+  {#snippet children(value)}
+    <value.CellBadge />
+  {/snippet}
+</table.AppCell>
+
+<table.AppHeader {header}>
+  {#snippet children(value)}
+    <value.HeaderBadge />
+  {/snippet}
+</table.AppHeader>
+
+<table.AppFooter header={footer}>
+  {#snippet children(value)}
+    <value.HeaderBadge />
+  {/snippet}
+</table.AppFooter>
+
+<HookContextProbe />

packages/svelte-table/tests/rendering.test.ts

@@ -6,6 +6,7 @@ import { stockFeatures } from '@tanstack/table-core'
 import { renderComponent } from '../src/render-component'
 import ContextFailure from './fixtures/ContextFailure.svelte'
 import FlexRenderHarness from './fixtures/FlexRenderHarness.svelte'
+import HookContextScope from './fixtures/HookContextScope.svelte'
 import HookHarness from './fixtures/HookHarness.svelte'
 import RenderBadge from './fixtures/RenderBadge.svelte'
 import { hook } from './fixtures/hook-fixture'
@@ -209,6 +210,16 @@ describe('createTableHook', () => {
     expect(outputText('Hook footer')).toBe('footer:title')
   })
 
+  // https://github.com/TanStack/table/issues/6614
+  test('wrapper contexts stay inside the wrappers', () => {
+    render(HookContextScope)
+
+    expect(screen.getByText('table-component:row-1')).toBeTruthy()
+    expect(screen.getByText('cell-component:First')).toBeTruthy()
+    expect(screen.getAllByText('header-component:title')).toHaveLength(2)
+    expect(outputText('Contexts outside the wrappers')).toBe('')
+  })
+
   test.each([
     ['useTableContext', () => hook.useTableContext()],
     ['useCellContext', () => hook.useCellContext()],