From 57041b272bfcd1773625bc76c008dbc0a2bc3002 Mon Sep 17 00:00:00 2001
From: grzdev <grzdev@users.noreply.github.com>
Date: Thu, 8 Oct 2026 20:39:58 +0100
Subject: [PATCH] fix(svelte-table): delegate context setting to App*
 components during initialization

---
 .../fix-svelte-table-app-context-init.md      |  5 +++++
 packages/svelte-table/src/AppCell.svelte      |  9 ++++++--
 packages/svelte-table/src/AppHeader.svelte    |  9 ++++++--
 packages/svelte-table/src/AppTable.svelte     | 10 +++++++--
 .../src/createTableHook.svelte.ts             | 21 ++++++++++---------
 5 files changed, 38 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/fix-svelte-table-app-context-init.md

diff --git a/.changeset/fix-svelte-table-app-context-init.md b/.changeset/fix-svelte-table-app-context-init.md
new file mode 100644
index 0000000000..604dc1b761
--- /dev/null
+++ b/.changeset/fix-svelte-table-app-context-init.md
@@ -0,0 +1,5 @@
+---
+'@tanstack/svelte-table': patch
+---
+
+fix(svelte-table): delegate context setting to App* components during initialization to prevent set_context_after_init
diff --git a/packages/svelte-table/src/AppCell.svelte b/packages/svelte-table/src/AppCell.svelte
index 4818989dbe..584896fe83 100644
--- a/packages/svelte-table/src/AppCell.svelte
+++ b/packages/svelte-table/src/AppCell.svelte
@@ -1,13 +1,18 @@
 <script lang="ts">
-  import type { Snippet } from 'svelte'
+  import { setContext, type Snippet } from 'svelte'
 
   interface Props {
     cell: any
     cellComponents: any
     children: Snippet<[any]>
+    contextKey?: any
   }
 
-  let { children, cell, cellComponents }: Props = $props()
+  let { children, cell, cellComponents, contextKey }: Props = $props()
+
+  if (contextKey) {
+    setContext(contextKey, cell)
+  }
 </script>
 
 {@render children?.(Object.assign(cell, cellComponents))}
diff --git a/packages/svelte-table/src/AppHeader.svelte b/packages/svelte-table/src/AppHeader.svelte
index fd7d091d09..ad5208e2d6 100644
--- a/packages/svelte-table/src/AppHeader.svelte
+++ b/packages/svelte-table/src/AppHeader.svelte
@@ -1,13 +1,18 @@
 <script lang="ts">
-  import type { Snippet } from 'svelte'
+  import { setContext, type Snippet } from 'svelte'
 
   interface Props {
     header: any
     headerComponents: any
     children: Snippet<[any]>
+    contextKey?: any
   }
 
-  let { children, header, headerComponents }: Props = $props()
+  let { children, header, headerComponents, contextKey }: Props = $props()
+
+  if (contextKey) {
+    setContext(contextKey, header)
+  }
 </script>
 
 {@render children?.(Object.assign(header, headerComponents))}
diff --git a/packages/svelte-table/src/AppTable.svelte b/packages/svelte-table/src/AppTable.svelte
index c335d17674..90da424deb 100644
--- a/packages/svelte-table/src/AppTable.svelte
+++ b/packages/svelte-table/src/AppTable.svelte
@@ -1,11 +1,17 @@
 <script lang="ts">
-  import type { Snippet } from 'svelte'
+  import { setContext, type Snippet } from 'svelte'
 
   interface Props {
     children: Snippet
+    contextKey?: any
+    table?: any
   }
 
-  let { children }: Props = $props()
+  let { children, contextKey, table }: Props = $props()
+
+  if (contextKey) {
+    setContext(contextKey, table)
+  }
 </script>
 
 {@render children?.()}
diff --git a/packages/svelte-table/src/createTableHook.svelte.ts b/packages/svelte-table/src/createTableHook.svelte.ts
index a3f282f235..39f472d837 100644
--- a/packages/svelte-table/src/createTableHook.svelte.ts
+++ b/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,20 +647,21 @@ 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.
+    // contextKey is passed to the component, which calls setContext during its
+    // own initialization to avoid calling setContext in the parent's context.
     const AppTable = ((internal: any, props: any) => {
-      setContext(tableContextKey, table)
-      return AppTableSvelte(internal, { ...props })
+      return AppTableSvelte(internal, {
+        ...props,
+        contextKey: tableContextKey,
+        table,
+      })
     }) as Component<{ children: Snippet }>
 
     const AppCell = ((internal: any, { children, cell }: any) => {
-      setContext(cellContextKey, cell)
       return AppCellSvelte(internal, {
         cell,
         cellComponents: cellComponentsWithFlexRender,
+        contextKey: cellContextKey,
         children,
       })
     }) as Component<{
@@ -669,10 +670,10 @@ export function createTableHook<
     }>
 
     const AppHeader = ((internal: any, { children, header }: any) => {
-      setContext(headerContextKey, header)
       return AppHeaderSvelte(internal, {
         header,
         headerComponents: headerComponentsWithFlexRender,
+        contextKey: headerContextKey,
         children,
       })
     }) as Component<{
@@ -682,10 +683,10 @@ 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,
+        contextKey: headerContextKey,
         children,
       })
     }) as Component<{