{"prompt":"You are comparing an AI-suggested code fix with actual changes made in a commit.\n\nYour task: Determine if the commit contains the essence of the AI fix and provide a confidence level.\n\n## AI-Suggested Fix\n\n**What it fixes:** tanstack-svelte-table-example-composable-tables:test:types, tanstack-svelte-table-example-with-tanstack-form:test:types\n\n**Description:** fix(svelte-table): allow any props on BoundFlexRenderComponent\n\n**Reasoning:** The PR introduced `BoundFlexRenderComponent = Component>` as a new type alias for pre-bound Svelte components (where the cell/header data is already injected at construction time).\n\nHowever, `Record` is semantically incorrect for this use case. In TypeScript, `never` is the bottom type — no value is assignable to it. So `Record` means \"an object where every property value must be `never`\", which is an impossible constraint in practice.\n\nThe exa\n\n**Suggested Changes (diff):**\n```diff\ndiff --git a/packages/svelte-table/src/createTableHook.svelte.ts b/packages/svelte-table/src/createTableHook.svelte.ts\nindex afe06809..c25799d2 100644\n--- a/packages/svelte-table/src/createTableHook.svelte.ts\n+++ b/packages/svelte-table/src/createTableHook.svelte.ts\n@@ -38,7 +38,7 @@ import type {\n } from '@tanstack/table-core'\n \n export type ComponentType> = Component\n-export type BoundFlexRenderComponent = Component>\n+export type BoundFlexRenderComponent = Component>\n \n function createLiveView(\n getCurrent: () => TCurrent,\n\n```\n\n## Actual Commit Changes\n\n**Commit Diff:**\n```diff\ndiff --git a/knip.json b/knip.json\nindex a7f3dfc986..69199651ff 100644\n--- a/knip.json\n+++ b/knip.json\n@@ -20,6 +20,7 @@\n \"tests/test-helper.ts\"\n ],\n \"ignoreDependencies\": [\n+ \"@ember/destroyable\",\n \"@ember/library-tsconfig\",\n \"@ember/routing\",\n \"@embroider/shared-internals\",\ndiff --git a/packages/alpine-table/package.json b/packages/alpine-table/package.json\nindex f432d93537..835528ffbb 100644\n--- a/packages/alpine-table/package.json\n+++ b/packages/alpine-table/package.json\n@@ -41,6 +41,8 @@\n \"scripts\": {\n \"clean\": \"rimraf ./build && rimraf ./dist\",\n \"test:eslint\": \"eslint ./src\",\n+ \"test:lib\": \"vitest --passWithNoTests\",\n+ \"test:lib:dev\": \"pnpm test:lib --watch\",\n \"test:types\": \"tsc\",\n \"test:build\": \"publint --strict\",\n \"build\": \"tsdown\"\n@@ -50,6 +52,7 @@\n \"@tanstack/table-core\": \"workspace:*\"\n },\n \"devDependencies\": {\n+ \"@testing-library/dom\": \"^10.4.1\",\n \"@types/alpinejs\": \"^3.13.11\",\n \"alpinejs\": \"^3.15.12\"\n },\ndiff --git a/packages/alpine-table/src/flexRender.ts b/packages/alpine-table/src/flexRender.ts\nindex 095bf9fcb7..f113a6ba9f 100644\n--- a/packages/alpine-table/src/flexRender.ts\n+++ b/packages/alpine-table/src/flexRender.ts\n@@ -79,7 +79,28 @@ export function FlexRender<\n TValue extends CellData = CellData,\n >(props: FlexRenderProps): any {\n if ('cell' in props && props.cell) {\n- return flexRender(props.cell.column.columnDef.cell, props.cell.getContext())\n+ const cell = props.cell\n+ const definition = cell.column.columnDef\n+ const groupingCell = cell as typeof cell & {\n+ getIsAggregated?: () => boolean\n+ getIsPlaceholder?: () => boolean\n+ }\n+ const groupingDefinition = definition as typeof definition & {\n+ aggregatedCell?: typeof definition.cell\n+ }\n+\n+ if (groupingCell.getIsAggregated?.()) {\n+ return flexRender(\n+ groupingDefinition.aggregatedCell ?? definition.cell,\n+ cell.getContext(),\n+ )\n+ }\n+\n+ if (groupingCell.getIsPlaceholder?.()) {\n+ return null\n+ }\n+\n+ return flexRender(definition.cell, cell.getContext())\n }\n \n if ('header' in props && props.header) {\ndiff --git a/packages/alpine-table/tests/unit/adapterCoverage.test.ts b/packages/alpine-table/tests/unit/adapterCoverage.test.ts\nnew file mode 100644\nindex 0000000000..a60d460bb1\n--- /dev/null\n+++ b/packages/alpine-table/tests/unit/adapterCoverage.test.ts\n@@ -0,0 +1,412 @@\n+// @vitest-environment jsdom\n+import Alpine from 'alpinejs'\n+import { afterEach, describe, expect, test, vi } from 'vitest'\n+import { screen } from '@testing-library/dom'\n+import { createAtom } from '@tanstack/store'\n+import { stockFeatures } from '@tanstack/table-core'\n+import { createTable } from '../../src/createTable'\n+import { createTableHook } from '../../src/createTableHook'\n+import type { Cell, ColumnDef, RowSelectionState } from '@tanstack/table-core'\n+\n+type Data = { id: string; title: string }\n+\n+const idColumn: ColumnDef = {\n+ id: 'id',\n+ accessorKey: 'id',\n+ header: 'Identifier',\n+ footer: 'Identifier footer',\n+ cell: (context) => `${context.getValue()}`,\n+ aggregatedCell: (context) => `Aggregate ${context.getValue()}`,\n+}\n+\n+const titleColumn: ColumnDef = {\n+ id: 'title',\n+ accessorKey: 'title',\n+}\n+\n+const mountedRoots: Array<{\n+ root: HTMLElement\n+ removeScope: () => void\n+}> = []\n+\n+function flushEffects() {\n+ return new Promise((resolve) => {\n+ setTimeout(resolve, 0)\n+ })\n+}\n+\n+function mountAlpine(\n+ markup: string,\n+ scope: Record,\n+): HTMLElement {\n+ const template = document.createElement('template')\n+ template.innerHTML = markup.trim()\n+ const root = template.content.firstElementChild as HTMLElement\n+ document.body.append(root)\n+\n+ const removeScope = Alpine.addScopeToNode(root, scope)\n+ mountedRoots.push({ root, removeScope })\n+ Alpine.initTree(root)\n+\n+ return root\n+}\n+\n+function destroyRoot(root: HTMLElement, remove = true) {\n+ const mounted = mountedRoots.find((entry) => entry.root === root)\n+ if (!mounted) return\n+\n+ Alpine.destroyTree(root)\n+ mounted.removeScope()\n+ if (remove) root.remove()\n+ mountedRoots.splice(mountedRoots.indexOf(mounted), 1)\n+}\n+\n+afterEach(() => {\n+ for (const { root } of [...mountedRoots]) {\n+ destroyRoot(root)\n+ }\n+ document.body.replaceChildren()\n+ vi.restoreAllMocks()\n+})\n+\n+describe('Alpine adapter reactivity', () => {\n+ test('releases and reacquires controlled ownership one state slice at a time', async () => {\n+ const options = Alpine.reactive<{\n+ state: { rowSelection?: RowSelectionState }\n+ }>({\n+ state: { rowSelection: { 1: true } },\n+ })\n+ const table = createTable({\n+ data: [{ id: '1', title: 'First' }],\n+ columns: [idColumn, titleColumn],\n+ features: stockFeatures,\n+ getRowId: (row) => row.id,\n+ get state() {\n+ return options.state\n+ },\n+ })\n+\n+ expect(table.atoms.rowSelection.get()).toEqual({ 1: true })\n+\n+ table.toggleAllRowsSelected(false)\n+ expect(table.atoms.rowSelection.get()).toEqual({ 1: true })\n+\n+ options.state = {}\n+ await flushEffects()\n+ expect(table.atoms.rowSelection.get()).toEqual({})\n+\n+ table.toggleAllRowsSelected(true)\n+ expect(table.atoms.rowSelection.get()).toEqual({ 1: true })\n+\n+ options.state = { rowSelection: {} }\n+ await flushEffects()\n+ expect(table.atoms.rowSelection.get()).toEqual({})\n+ })\n+\n+ test('gives an external atom precedence and routes table writes back to it', async () => {\n+ const options = Alpine.reactive<{ rowSelection: RowSelectionState }>({\n+ rowSelection: { 2: true },\n+ })\n+ const externalSelection = createAtom({ 1: true })\n+ const table = createTable({\n+ data: [\n+ { id: '1', title: 'First' },\n+ { id: '2', title: 'Second' },\n+ ],\n+ columns: [idColumn, titleColumn],\n+ features: stockFeatures,\n+ getRowId: (row) => row.id,\n+ state: {\n+ get rowSelection() {\n+ return options.rowSelection\n+ },\n+ },\n+ atoms: {\n+ rowSelection: externalSelection,\n+ },\n+ })\n+\n+ expect(table.atoms.rowSelection.get()).toEqual({ 1: true })\n+\n+ options.rowSelection = { 1: true, 2: true }\n+ await flushEffects()\n+ expect(table.atoms.rowSelection.get()).toEqual({ 1: true })\n+\n+ externalSelection.set({ 2: true })\n+ expect(table.getRow('1').getIsSelected()).toBe(false)\n+ expect(table.getRow('2').getIsSelected()).toBe(true)\n+\n+ table.toggleAllRowsSelected(true)\n+ expect(externalSelection.get()).toEqual({ 1: true, 2: true })\n+ })\n+\n+ test('never exposes partial snapshots during rapid option changes', async () => {\n+ const options = Alpine.reactive<{\n+ columns: Array>\n+ data: Array\n+ enableRowSelection: boolean\n+ }>({\n+ columns: [idColumn],\n+ data: [{ id: '1', title: 'Initial' }],\n+ enableRowSelection: true,\n+ })\n+ const table = createTable({\n+ features: stockFeatures,\n+ get columns() {\n+ return options.columns\n+ },\n+ get data() {\n+ return options.data\n+ },\n+ get enableRowSelection() {\n+ return options.enableRowSelection\n+ },\n+ getRowId: (row) => row.id,\n+ })\n+ const snapshotCaptor =\n+ vi.fn<\n+ (snapshot: {\n+ canSelect: boolean\n+ columnIds: Array\n+ values: Array\n+ }) => void\n+ >()\n+\n+ Alpine.effect(() => {\n+ const row = table.getRowModel().rows[0]!\n+ snapshotCaptor({\n+ canSelect: row.getCanSelect(),\n+ columnIds: table.getAllLeafColumns().map((column) => column.id),\n+ values: row.getAllCells().map((cell) => cell.getValue()),\n+ })\n+ })\n+\n+ options.data = [{ id: '2', title: 'Intermediate' }]\n+ options.columns = [idColumn, titleColumn]\n+ options.enableRowSelection = false\n+ options.data = [{ id: '3', title: 'Final' }]\n+ options.columns = [titleColumn]\n+ await flushEffects()\n+\n+ expect(snapshotCaptor.mock.calls[0]).toEqual([\n+ {\n+ canSelect: true,\n+ columnIds: ['id'],\n+ values: ['1'],\n+ },\n+ ])\n+ expect(snapshotCaptor.mock.calls.slice(1)).not.toHaveLength(0)\n+ expect(\n+ snapshotCaptor.mock.calls.slice(1).every(([snapshot]) => {\n+ return (\n+ snapshot.canSelect === false &&\n+ snapshot.columnIds.length === 1 &&\n+ snapshot.columnIds[0] === 'title' &&\n+ snapshot.values.length === 1 &&\n+ snapshot.values[0] === 'Final'\n+ )\n+ }),\n+ ).toBe(true)\n+ })\n+\n+ test('uses the latest reactive option callback', async () => {\n+ const firstHandler = vi.fn()\n+ const secondHandler = vi.fn()\n+ const options = Alpine.reactive({\n+ onRowSelectionChange: firstHandler,\n+ })\n+ const table = createTable({\n+ data: [{ id: '1', title: 'First' }],\n+ columns: [idColumn],\n+ features: stockFeatures,\n+ getRowId: (row) => row.id,\n+ get onRowSelectionChange() {\n+ return options.onRowSelectionChange\n+ },\n+ })\n+\n+ table.toggleAllRowsSelected(true)\n+ expect(firstHandler).toHaveBeenCalledTimes(1)\n+\n+ options.onRowSelectionChange = secondHandler\n+ await flushEffects()\n+ table.toggleAllRowsSelected(false)\n+\n+ expect(firstHandler).toHaveBeenCalledTimes(1)\n+ expect(secondHandler).toHaveBeenCalledTimes(1)\n+ })\n+\n+ test('stops Alpine DOM bindings when their tree is destroyed', async () => {\n+ const table = createTable({\n+ data: [{ id: '1', title: 'First' }],\n+ columns: [idColumn],\n+ features: stockFeatures,\n+ getRowId: (row) => row.id,\n+ })\n+ const root = mountAlpine(\n+ `

`,\n+ { table },\n+ )\n+\n+ expect(screen.getByRole('status', { name: 'selection' }).textContent).toBe(\n+ 'clear',\n+ )\n+\n+ destroyRoot(root, false)\n+ table.setRowSelection({ 1: true })\n+ await flushEffects()\n+\n+ expect(screen.getByRole('status', { name: 'selection' }).textContent).toBe(\n+ 'clear',\n+ )\n+ })\n+})\n+\n+describe('Alpine rendering and application hook', () => {\n+ function createCell() {\n+ const table = createTable({\n+ data: [{ id: '1', title: 'First' }],\n+ columns: [idColumn],\n+ features: stockFeatures,\n+ getRowId: (row) => row.id,\n+ })\n+ return table.getRowModel().rows[0]!.getAllCells()[0]!\n+ }\n+\n+ function setCellMode(\n+ cell: Cell,\n+ mode: 'normal' | 'aggregate' | 'placeholder',\n+ ) {\n+ vi.spyOn(cell, 'getIsAggregated').mockReturnValue(mode === 'aggregate')\n+ vi.spyOn(cell, 'getIsPlaceholder').mockReturnValue(mode === 'placeholder')\n+ }\n+\n+ test('renders normal, aggregate, placeholder, header, and footer content', () => {\n+ const normalCell = createCell()\n+ const aggregateCell = createCell()\n+ const placeholderCell = createCell()\n+ setCellMode(normalCell, 'normal')\n+ setCellMode(aggregateCell, 'aggregate')\n+ setCellMode(placeholderCell, 'placeholder')\n+\n+ const table = createTable({\n+ data: [{ id: '1', title: 'First' }],\n+ columns: [idColumn],\n+ features: stockFeatures,\n+ getRowId: (row) => row.id,\n+ })\n+ const header = table.getHeaderGroups()[0]!.headers[0]!\n+\n+ mountAlpine(\n+ `

\n+

`,\n+ {\n+ aggregateCell,\n+ header,\n+ normalCell,\n+ placeholderCell,\n+ table,\n+ },\n+ )\n+\n+ expect(screen.getByRole('status', { name: 'normal' }).textContent).toBe('1')\n+ expect(screen.getByRole('status', { name: 'aggregate' }).textContent).toBe(\n+ 'Aggregate 1',\n+ )\n+ expect(\n+ screen.getByRole('status', { name: 'placeholder' }).textContent,\n+ ).toBe('')\n+ expect(screen.getByRole('status', { name: 'header' }).textContent).toBe(\n+ 'Identifier',\n+ )\n+ expect(screen.getByRole('status', { name: 'footer' }).textContent).toBe(\n+ 'Identifier footer',\n+ )\n+ })\n+\n+ test('updates rendered cell content when reactive data replaces its cell', async () => {\n+ const options = Alpine.reactive({\n+ data: [{ id: '1', title: 'First' }],\n+ })\n+ const table = createTable({\n+ get data() {\n+ return options.data\n+ },\n+ columns: [titleColumn],\n+ features: stockFeatures,\n+ getRowId: (row) => row.id,\n+ })\n+\n+ mountAlpine(\n+ '

',\n+ { table },\n+ )\n+ expect(screen.getByRole('status', { name: 'cell value' }).textContent).toBe(\n+ 'First',\n+ )\n+\n+ options.data = [{ id: '2', title: 'Second' }]\n+ await flushEffects()\n+\n+ expect(screen.getByRole('status', { name: 'cell value' }).textContent).toBe(\n+ 'Second',\n+ )\n+ })\n+\n+ test('updates mounted renderer content for the atom read by the cell', async () => {\n+ const selectionColumn: ColumnDef = {\n+ id: 'selection',\n+ cell: (context) =>\n+ context.table.atoms.rowSelection.get()['1'] ? 'selected' : 'clear',\n+ }\n+ const table = createTable({\n+ data: [{ id: '1', title: 'First' }],\n+ columns: [selectionColumn],\n+ features: stockFeatures,\n+ getRowId: (row) => row.id,\n+ })\n+\n+ mountAlpine(\n+ '

',\n+ { table },\n+ )\n+ expect(\n+ screen.getByRole('status', { name: 'selection renderer' }).textContent,\n+ ).toBe('clear')\n+\n+ table.setRowSelection({ 1: true })\n+ await flushEffects()\n+\n+ expect(\n+ screen.getByRole('status', { name: 'selection renderer' }).textContent,\n+ ).toBe('selected')\n+ })\n+\n+ test('binds hook features, defaults, column helpers, and render helpers', () => {\n+ const hook = createTableHook({\n+ features: stockFeatures,\n+ enableRowSelection: false,\n+ })\n+ const columnHelper = hook.createAppColumnHelper()\n+ const appColumns = columnHelper.columns([\n+ columnHelper.accessor('title', {}),\n+ ])\n+ const table = hook.createAppTable({\n+ data: [{ id: '1', title: 'First' }],\n+ columns: appColumns,\n+ enableRowSelection: true,\n+ getRowId: (row) => row.id,\n+ })\n+\n+ expect(hook.appFeatures).toBe(stockFeatures)\n+ expect(table.getRow('1').getCanSelect()).toBe(true)\n+ expect(table.getRow('1').getValue('title')).toBe('First')\n+ expect(table.FlexRender).toBeDefined()\n+ expect(table.flexRender).toBeDefined()\n+ })\n+})\ndiff --git a/packages/alpine-table/tsconfig.json b/packages/alpine-table/tsconfig.json\nindex eb63835950..d69d19f8e1 100644\n--- a/packages/alpine-table/tsconfig.json\n+++ b/packages/alpine-table/tsconfig.json\n@@ -1,4 +1,4 @@\n {\n \"extends\": \"../../tsconfig.json\",\n- \"include\": [\"src\", \"eslint.config.js\", \"vite.config.ts\"]\n+ \"include\": [\"src\", \"tests\", \"eslint.config.js\", \"vite.config.ts\"]\n }\ndiff --git a/packages/ember-table/src/FlexRender.gts b/packages/ember-table/src/FlexRender.gts\nindex 98215dd829..a8168139d3 100644\n--- a/packages/ember-table/src/FlexRender.gts\n+++ b/packages/ember-table/src/FlexRender.gts\n@@ -78,10 +78,31 @@ export class FlexRenderCell<\n @cached\n get result(): CellRenderResult {\n const cell = this.args.cell\n- return flexRender(\n- cell.column.columnDef.cell,\n- cell.getContext(),\n- ) as CellRenderResult\n+ const definition = cell.column.columnDef\n+ const groupingCell = cell as typeof cell & {\n+ getIsAggregated?: () => boolean\n+ getIsPlaceholder?: () => boolean\n+ }\n+ const groupingDefinition = definition as typeof definition & {\n+ aggregatedCell?: typeof definition.cell\n+ }\n+\n+ if (groupingCell.getIsAggregated?.()) {\n+ return flexRender(\n+ groupingDefinition.aggregatedCell ?? definition.cell,\n+ cell.getContext(),\n+ ) as CellRenderResult\n+ }\n+\n+ if (groupingCell.getIsPlaceholder?.()) {\n+ return null\n+ }\n+\n+ return flexRender(definition.cell, cell.getContext()) as CellRenderResult<\n+ TFeatures,\n+ TData,\n+ TValue\n+ >\n }\n \n get resolvedContext(): CellContext {\ndiff --git a/packages/ember-table/src/create-table-hook.ts b/packages/ember-table/src/create-table-hook.ts\nindex a3a2ec894a..bc6d91da2b 100644\n--- a/packages/ember-table/src/create-table-hook.ts\n+++ b/packages/ember-table/src/create-table-hook.ts\n@@ -45,8 +45,8 @@ export type AppColumnHelper<\n * const columnHelper = createAppColumnHelper()\n * const columns = columnHelper.columns([...])\n *\n- * // inside a Glimmer component; options stay a thunk so tracked reads are reactive\n- * table = createAppTable(() => ({ columns, data: this.data }))\n+ * // inside a Glimmer component; passing `this` binds cleanup to its lifecycle\n+ * table = createAppTable(this, () => ({ columns, data: this.data }))\n * ```\n */\n export function createTableHook({\n@@ -60,19 +60,40 @@ export function createTableHook({\n }\n \n function createAppTable(\n+ owner: object,\n getTableOptions: () => Omit, 'features'>,\n+ ): AppEmberTable\n+ function createAppTable(\n+ getTableOptions: () => Omit, 'features'>,\n+ ): AppEmberTable\n+ function createAppTable(\n+ ownerOrGetTableOptions:\n+ | object\n+ | (() => Omit, 'features'>),\n+ maybeGetTableOptions?: () => Omit<\n+ TableOptions,\n+ 'features'\n+ >,\n ): AppEmberTable {\n+ const hasOwner = maybeGetTableOptions !== undefined\n+ const owner = hasOwner ? ownerOrGetTableOptions : undefined\n+ const getTableOptions = (\n+ hasOwner ? maybeGetTableOptions : ownerOrGetTableOptions\n+ ) as () => Omit, 'features'>\n+\n // Keep options a thunk: the merge runs inside `useTable`'s options thunk,\n // so tracked properties read in `getTableOptions` stay reactive. Per-table\n // options take precedence over the shared defaults (except `features`,\n // which only the hook provides).\n- return useTable(\n- () =>\n- ({\n- ...defaultTableOptions,\n- ...getTableOptions(),\n- }) as TableOptions,\n- )\n+ const getMergedOptions = () =>\n+ ({\n+ ...defaultTableOptions,\n+ ...getTableOptions(),\n+ }) as TableOptions\n+\n+ return owner\n+ ? useTable(owner, getMergedOptions)\n+ : useTable(getMergedOptions)\n }\n \n return {\ndiff --git a/packages/ember-table/src/use-table.ts b/packages/ember-table/src/use-table.ts\nindex 2c444447b9..6630fd29a6 100644\n--- a/packages/ember-table/src/use-table.ts\n+++ b/packages/ember-table/src/use-table.ts\n@@ -1,4 +1,5 @@\n import { constructTable } from '@tanstack/table-core'\n+import { registerDestructor } from '@ember/destroyable'\n import { untrack } from '@glimmer/validator'\n import { emberReactivity } from './reactivity.ts'\n import { computed, subscribeNoEffect } from './signal.ts'\n@@ -22,14 +23,47 @@ interface TableInternals<\n get(): TableOptions\n set(value: () => TableOptions): void\n }\n- baseAtoms: Record\n+ baseAtoms: Record<\n+ string,\n+ {\n+ get(): unknown\n+ set(value: unknown): void\n+ }\n+ >\n atoms: Record\n }\n \n+/**\n+ * Creates an Ember-reactive table.\n+ *\n+ * Pass the containing component (or another Ember destroyable) as the first\n+ * argument to tie external-atom subscriptions to its lifecycle. The one-arg\n+ * form remains available for standalone tables that do not have an Ember\n+ * owner.\n+ */\n+export function useTable<\n+ TFeatures extends TableFeatures,\n+ TData extends RowData,\n+>(\n+ owner: object,\n+ getOptions: () => TableOptions,\n+): Table\n export function useTable<\n TFeatures extends TableFeatures,\n TData extends RowData,\n->(getOptions: () => TableOptions): Table {\n+>(getOptions: () => TableOptions): Table\n+export function useTable<\n+ TFeatures extends TableFeatures,\n+ TData extends RowData,\n+>(\n+ ownerOrGetOptions: object | (() => TableOptions),\n+ maybeGetOptions?: () => TableOptions,\n+): Table {\n+ const hasOwner = maybeGetOptions !== undefined\n+ const owner = hasOwner ? ownerOrGetOptions : undefined\n+ const getOptions = (\n+ hasOwner ? maybeGetOptions : ownerOrGetOptions\n+ ) as () => TableOptions\n const reactivity = emberReactivity()\n \n // Creates reactive read only signal for options\n@@ -68,6 +102,30 @@ export function useTable<\n }\n })\n \n+ const getLiveOptions = () => {\n+ const options = liveOptions.get()\n+ const controlledState = options.state as Record | undefined\n+\n+ // Keep the writable fallback aligned with every controlled value that has\n+ // been observed. This makes a later ownership release expose the latest\n+ // controlled snapshot and makes functional table updaters start from that\n+ // snapshot after control is reacquired.\n+ if (controlledState) {\n+ untrack(() => {\n+ for (const key in controlledState) {\n+ const baseAtom = table.baseAtoms[key]\n+ const controlledValue = controlledState[key]\n+\n+ if (baseAtom && baseAtom.get() !== controlledValue) {\n+ baseAtom.set(() => controlledValue)\n+ }\n+ }\n+ })\n+ }\n+\n+ return options\n+ }\n+\n /**\n * This is to get around core table not using lazy access so we need to re-wrap\n *\n@@ -76,7 +134,7 @@ export function useTable<\n Object.defineProperty(table, 'options', {\n configurable: true,\n enumerable: true,\n- get: () => liveOptions.get(),\n+ get: getLiveOptions,\n set: (value: TableOptions) => {\n optionsStore.set(() => value)\n },\n@@ -150,5 +208,9 @@ export function useTable<\n subscribe: subscribeNoEffect,\n }\n \n+ if (owner) {\n+ registerDestructor(owner, () => reactivity.unmount?.())\n+ }\n+\n return table\n }\ndiff --git a/packages/ember-table/tests/integration/create-table-hook.test.gts b/packages/ember-table/tests/integration/create-table-hook.test.gts\nindex ae8014c279..dfc9bf10d9 100644\n--- a/packages/ember-table/tests/integration/create-table-hook.test.gts\n+++ b/packages/ember-table/tests/integration/create-table-hook.test.gts\n@@ -69,7 +69,7 @@ module('Integration | createTableHook', function (hooks) {\n )\n \n // No `features` here: the hook supplies them.\n- table = createAppTable(() => ({\n+ table = createAppTable(this, () => ({\n columns,\n data: this.data,\n }))\ndiff --git a/packages/ember-table/tests/integration/external-state.test.gts b/packages/ember-table/tests/integration/external-state.test.gts\nindex cce57910ca..ed8a50f102 100644\n--- a/packages/ember-table/tests/integration/external-state.test.gts\n+++ b/packages/ember-table/tests/integration/external-state.test.gts\n@@ -1,5 +1,5 @@\n import { module, test } from 'qunit'\n-import { render, click } from '@ember/test-helpers'\n+import { click, render, settled } from '@ember/test-helpers'\n import { setupRenderingTest } from 'ember-qunit'\n import Component from '@glimmer/component'\n import { tracked } from '@glimmer/tracking'\n@@ -20,6 +20,7 @@ import {\n type Cell,\n type SortingState,\n type PaginationState,\n+ type Table,\n } from '#src/index.ts'\n \n // --- Shared fixture ---\n@@ -224,6 +225,102 @@ module('Integration | external state (controlled)', function (hooks) {\n .exists({ count: 3 }, 'row model recomputed from the external mutation')\n })\n \n+ test('releases and reacquires ownership when a controlled slice is omitted', async function (assert) {\n+ class TableComponent extends Component {\n+ @tracked state: { pagination?: PaginationState } = {\n+ pagination: { pageIndex: 1, pageSize: 1 },\n+ }\n+\n+ table = useTable(() => ({\n+ data: makeData(\n+ { firstName: 'A' },\n+ { firstName: 'B' },\n+ { firstName: 'C' },\n+ { firstName: 'D' },\n+ ),\n+ columns,\n+ features,\n+ state: this.state,\n+ autoResetPageIndex: false,\n+ }))\n+\n+ get pageIndex() {\n+ return this.table.store.state.pagination.pageIndex\n+ }\n+\n+ advance = () => {\n+ this.table.nextPage()\n+ }\n+\n+ release = () => {\n+ this.state = {}\n+ }\n+\n+ reacquire = () => {\n+ this.state = {\n+ pagination: { pageIndex: 0, pageSize: 1 },\n+ }\n+ }\n+\n+ \n+ }\n+\n+ await render()\n+\n+ assert\n+ .dom('[role=\"status\"][aria-label=\"Page index\"]')\n+ .hasText('1', 'the controlled slice supplies the initial value')\n+\n+ await click('[aria-label=\"Advance page\"]')\n+ assert\n+ .dom('[role=\"status\"][aria-label=\"Page index\"]')\n+ .hasText('1', 'an internal write cannot replace a controlled value')\n+\n+ await click('[aria-label=\"Release pagination\"]')\n+ assert\n+ .dom('[role=\"status\"][aria-label=\"Page index\"]')\n+ .hasText('2', 'omitting the slice exposes its latest internal value')\n+\n+ await click('[aria-label=\"Advance page\"]')\n+ assert.dom('[role=\"status\"][aria-label=\"Page index\"]').hasText('3')\n+\n+ await click('[aria-label=\"Control pagination\"]')\n+ assert\n+ .dom('[role=\"status\"][aria-label=\"Page index\"]')\n+ .hasText('0', 'the external slice can take ownership again')\n+\n+ await click('[aria-label=\"Advance page\"]')\n+ assert.dom('[role=\"status\"][aria-label=\"Page index\"]').hasText('0')\n+\n+ await click('[aria-label=\"Release pagination\"]')\n+ assert\n+ .dom('[role=\"status\"][aria-label=\"Page index\"]')\n+ .hasText(\n+ '1',\n+ 'a second release exposes the newest internal write from the reacquired value',\n+ )\n+ })\n+\n test('controlled slice read wins over internal writes', async function (assert) {\n class TableComponent extends Component {\n @tracked data: Array = makeData(\n@@ -550,6 +647,188 @@ module('Integration | external atoms', function (hooks) {\n )\n })\n \n+ test('an external atom takes precedence over controlled state and receives table writes', async function (assert) {\n+ const paginationAtom = createAtom({\n+ pageIndex: 0,\n+ pageSize: 2,\n+ })\n+\n+ class TableComponent extends Component {\n+ @tracked pagination: PaginationState = {\n+ pageIndex: 0,\n+ pageSize: 3,\n+ }\n+\n+ table = useTable(() => ({\n+ data: makeData(...UNSORTED.map((firstName) => ({ firstName }))),\n+ columns,\n+ features,\n+ state: { pagination: this.pagination },\n+ atoms: { pagination: paginationAtom },\n+ }))\n+\n+ get tablePageSize() {\n+ return this.table.store.state.pagination.pageSize\n+ }\n+\n+ get atomPageSize() {\n+ return paginationAtom.get().pageSize\n+ }\n+\n+ get controlledPageSize() {\n+ return this.pagination.pageSize\n+ }\n+\n+ replaceControlledState = () => {\n+ this.pagination = { pageIndex: 0, pageSize: 1 }\n+ }\n+\n+ writeThroughTable = () => {\n+ this.table.setPageSize(4)\n+ }\n+\n+ \n+ }\n+\n+ await render()\n+\n+ assert\n+ .dom('[role=\"status\"][aria-label=\"Table page size\"]')\n+ .hasText('2', 'the atom wins over controlled state for the same slice')\n+ assert.dom('[role=\"status\"][aria-label=\"Atom page size\"]').hasText('2')\n+ assert\n+ .dom('[role=\"status\"][aria-label=\"Controlled page size\"]')\n+ .hasText('3')\n+\n+ await click('[aria-label=\"Replace controlled pagination\"]')\n+\n+ assert\n+ .dom('[role=\"status\"][aria-label=\"Controlled page size\"]')\n+ .hasText('1', 'the controlled source changed')\n+ assert\n+ .dom('[role=\"status\"][aria-label=\"Table page size\"]')\n+ .hasText('2', 'the table continues reading the atom')\n+\n+ await click('[aria-label=\"Set table page size\"]')\n+\n+ assert\n+ .dom('[role=\"status\"][aria-label=\"Table page size\"]')\n+ .hasText('4', 'the table reflects its write through the atom')\n+ assert\n+ .dom('[role=\"status\"][aria-label=\"Atom page size\"]')\n+ .hasText('4', 'the table write was routed to the external atom')\n+ assert\n+ .dom('[role=\"status\"][aria-label=\"Controlled page size\"]')\n+ .hasText('1', 'the lower-precedence controlled state was not mutated')\n+ })\n+\n+ test('destroying the owner disconnects both directions of an external atom bridge', async function (assert) {\n+ const paginationAtom = createAtom({\n+ pageIndex: 0,\n+ pageSize: 2,\n+ })\n+ let capturedTable: Table | undefined\n+\n+ class TableComponent extends Component {\n+ table = useTable(this, () => ({\n+ data: makeData(...UNSORTED.map((firstName) => ({ firstName }))),\n+ columns,\n+ features,\n+ atoms: { pagination: paginationAtom },\n+ }))\n+\n+ get pageSize() {\n+ capturedTable = this.table\n+ return this.table.store.state.pagination.pageSize\n+ }\n+\n+ \n+ }\n+\n+ class Harness extends Component {\n+ @tracked showTable = true\n+\n+ removeTable = () => {\n+ this.showTable = false\n+ }\n+\n+ \n+ }\n+\n+ await render()\n+\n+ assert\n+ .dom('[role=\"status\"][aria-label=\"Owned table page size\"]')\n+ .hasText('2')\n+\n+ paginationAtom.set({ pageIndex: 0, pageSize: 3 })\n+ await settled()\n+\n+ assert\n+ .dom('[role=\"status\"][aria-label=\"Owned table page size\"]')\n+ .hasText('3', 'the bridge is live while its owner is mounted')\n+\n+ await click('[aria-label=\"Remove owned table\"]')\n+\n+ assert\n+ .dom('[role=\"status\"][aria-label=\"Owned table page size\"]')\n+ .doesNotExist()\n+\n+ paginationAtom.set({ pageIndex: 0, pageSize: 4 })\n+ await settled()\n+\n+ assert.strictEqual(\n+ capturedTable!.atoms.pagination.get().pageSize,\n+ 3,\n+ 'source writes stop reaching the destroyed table',\n+ )\n+\n+ capturedTable!.setPageSize(5)\n+\n+ assert.strictEqual(\n+ paginationAtom.get().pageSize,\n+ 4,\n+ 'table writes stop reaching the source after teardown',\n+ )\n+ })\n+\n test('atom-backed slices are tracked independently', async function (assert) {\n const paginationAtom = createAtom({\n pageIndex: 0,\ndiff --git a/packages/ember-table/tests/integration/flex-render.test.gts b/packages/ember-table/tests/integration/flex-render.test.gts\nindex 8bee1a45b2..3a989af70b 100644\n--- a/packages/ember-table/tests/integration/flex-render.test.gts\n+++ b/packages/ember-table/tests/integration/flex-render.test.gts\n@@ -8,8 +8,13 @@ import {\n useTable,\n FlexRenderCell,\n FlexRenderHeader,\n+ aggregationFns,\n+ columnGroupingFeature,\n+ createGroupedRowModel,\n flexRenderComponent,\n+ rowAggregationFeature,\n stockFeatures,\n+ tableFeatures,\n type Row,\n type Cell,\n type CellContext,\n@@ -22,12 +27,52 @@ type Person = { id: string; firstName: string }\n \n const defaultData: Array = [{ id: '0', firstName: 'Alice' }]\n \n+type GroupedPerson = {\n+ id: string\n+ region: string\n+ team: string\n+ amount: number\n+}\n+\n+const groupingFeatures = tableFeatures({\n+ aggregationFns,\n+ columnGroupingFeature,\n+ groupedRowModel: createGroupedRowModel(),\n+ rowAggregationFeature,\n+})\n+\n+const groupingColumns: Array<\n+ ColumnDef\n+> = [\n+ {\n+ id: 'region',\n+ accessorKey: 'region',\n+ cell: (context) => `Region ${String(context.getValue())}`,\n+ },\n+ {\n+ id: 'team',\n+ accessorKey: 'team',\n+ cell: (context) => `Team ${String(context.getValue())}`,\n+ },\n+ {\n+ id: 'amount',\n+ accessorKey: 'amount',\n+ aggregationFn: 'sum',\n+ cell: (context) => `Amount ${String(context.getValue())}`,\n+ aggregatedCell: (context) => `Total ${String(context.getValue())}`,\n+ },\n+]\n+\n // Templates can't call bound table methods with `this` context, so expose them\n // as plain helpers (mirrors the demo-app table templates).\n const getVisibleCells = (\n row: Row,\n ): Array> => row.getVisibleCells()\n \n+const getGroupingCells = (\n+ row: Row,\n+): Array> => row.getAllCells()\n+\n // --- Cell/header components used by the tests ---\n \n class Badge extends Component<\n@@ -169,6 +214,50 @@ module('Integration | FlexRender', function (hooks) {\n .hasText('fn value', 'function return value renders')\n })\n \n+ test('renders aggregate cells and suppresses grouping placeholders', async (assert) => {\n+ class TableComponent extends Component {\n+ table = useTable(() => ({\n+ data: [\n+ { id: '1', region: 'Europe', team: 'Blue', amount: 1 },\n+ { id: '2', region: 'Europe', team: 'Green', amount: 2 },\n+ ],\n+ columns: groupingColumns,\n+ features: groupingFeatures,\n+ initialState: {\n+ grouping: ['region', 'team'],\n+ },\n+ }))\n+\n+ get rows() {\n+ return this.table.getRowModel().rows\n+ }\n+\n+ \n+ }\n+\n+ await render()\n+\n+ assert\n+ .dom('[role=\"status\"][aria-label=\"region\"]')\n+ .hasText('Region Europe', 'the active grouping cell uses its cell render')\n+ assert\n+ .dom('[role=\"status\"][aria-label=\"team\"]')\n+ .hasText('', 'the other grouped column renders as a placeholder')\n+ assert\n+ .dom('[role=\"status\"][aria-label=\"amount\"]')\n+ .hasText('Total 3', 'the aggregate column uses aggregatedCell')\n+ })\n+\n // Angular: \"should render components\" / \"Render component with FlexRenderComponent\".\n test('renders a component cell and reacts to arg changes', async (assert) => {\n class TableComponent extends Component {\ndiff --git a/packages/ember-table/tests/integration/reactivity.test.gts b/packages/ember-table/tests/integration/reactivity.test.gts\nindex 6cf32365d2..ccde88f389 100644\n--- a/packages/ember-table/tests/integration/reactivity.test.gts\n+++ b/packages/ember-table/tests/integration/reactivity.test.gts\n@@ -18,7 +18,10 @@ import {\n createColumnHelper,\n type Row,\n type Cell,\n+ type ColumnDef,\n type FlexRenderableSignature,\n+ type OnChangeFn,\n+ type RowSelectionState,\n } from '#src/index.ts'\n \n // --- Shared fixture ---\n@@ -142,6 +145,156 @@ module('Integration | reactivity', function (hooks) {\n .containsText('Carol', 'new row content rendered')\n })\n \n+ test('rapid tracked option writes publish only the final snapshot', async function (assert) {\n+ const firstNameColumn: ColumnDef = {\n+ id: 'firstName',\n+ accessorKey: 'firstName',\n+ }\n+ const ageColumn: ColumnDef = {\n+ id: 'age',\n+ accessorKey: 'age',\n+ }\n+\n+ class TableComponent extends Component {\n+ @tracked data: Array = makeData({\n+ id: 'initial',\n+ firstName: 'Initial',\n+ age: 30,\n+ })\n+ @tracked activeColumns: Array> = [\n+ firstNameColumn,\n+ ]\n+ @tracked enableRowSelection = true\n+\n+ table = useTable(() => ({\n+ data: this.data,\n+ columns: this.activeColumns,\n+ features,\n+ getRowId: (row) => row.id,\n+ enableRowSelection: this.enableRowSelection,\n+ }))\n+\n+ get optionSnapshot() {\n+ const row = this.table.getRowModel().rows[0]!\n+ const snapshot = [\n+ row.id,\n+ this.table\n+ .getAllLeafColumns()\n+ .map((column) => column.id)\n+ .join(','),\n+ row\n+ .getAllCells()\n+ .map((cell) => String(cell.getValue()))\n+ .join(','),\n+ String(row.getCanSelect()),\n+ ].join('|')\n+\n+ assert.step(snapshot)\n+ return snapshot\n+ }\n+\n+ updateRapidly = () => {\n+ this.data = makeData({\n+ id: 'intermediate',\n+ firstName: 'Intermediate',\n+ age: 40,\n+ })\n+ this.activeColumns = [firstNameColumn, ageColumn]\n+ this.enableRowSelection = false\n+ this.data = makeData({\n+ id: 'final',\n+ firstName: 'Final',\n+ age: 42,\n+ })\n+ this.activeColumns = [ageColumn]\n+ }\n+\n+ \n+ }\n+\n+ await render()\n+\n+ assert.verifySteps(\n+ ['initial|firstName|Initial|true'],\n+ 'the initial options are read as one consistent snapshot',\n+ )\n+\n+ await click('[aria-label=\"Update options rapidly\"]')\n+\n+ assert.verifySteps(\n+ ['final|age|42|false'],\n+ 'the rerender observes only the final tracked option values',\n+ )\n+ assert\n+ .dom('[role=\"status\"][aria-label=\"Option snapshot\"]')\n+ .hasText('final|age|42|false')\n+ })\n+\n+ test('table APIs use the latest tracked option callback', async function (assert) {\n+ class TableComponent extends Component {\n+ @tracked selectionHandler: OnChangeFn = () => {\n+ assert.step('first handler')\n+ }\n+\n+ table = useTable(() => ({\n+ data: makeData({ id: '1', firstName: 'Alice' }),\n+ columns,\n+ features,\n+ getRowId: (row) => row.id,\n+ onRowSelectionChange: this.selectionHandler,\n+ }))\n+\n+ selectAll = () => {\n+ this.table.toggleAllRowsSelected(true)\n+ }\n+\n+ replaceHandler = () => {\n+ this.selectionHandler = () => {\n+ assert.step('second handler')\n+ }\n+ }\n+\n+ \n+ }\n+\n+ await render()\n+\n+ await click('[aria-label=\"Select all rows\"]')\n+ assert.verifySteps(\n+ ['first handler'],\n+ 'the table initially invokes the first callback',\n+ )\n+\n+ await click('[aria-label=\"Replace selection handler\"]')\n+ await click('[aria-label=\"Select all rows\"]')\n+\n+ assert.verifySteps(\n+ ['second handler'],\n+ 'the same table instance invokes the latest tracked callback',\n+ )\n+ })\n+\n test('internal state updates propagate to the DOM (pagination + selection)', async function (assert) {\n class TableComponent extends Component {\n @tracked data: Array = makeData(\ndiff --git a/packages/lit-table/package.json b/packages/lit-table/package.json\nindex 626ba60988..2a1dd97b22 100644\n--- a/packages/lit-table/package.json\n+++ b/packages/lit-table/package.json\n@@ -41,6 +41,8 @@\n \"scripts\": {\n \"clean\": \"rimraf ./build && rimraf ./dist\",\n \"test:eslint\": \"eslint ./src\",\n+ \"test:lib\": \"vitest --passWithNoTests\",\n+ \"test:lib:dev\": \"pnpm test:lib --watch\",\n \"test:types\": \"tsc\",\n \"test:build\": \"publint --strict\",\n \"build\": \"tsdown\"\n@@ -51,6 +53,7 @@\n },\n \"devDependencies\": {\n \"@lit/context\": \"^1.1.6\",\n+ \"@testing-library/dom\": \"^10.4.1\",\n \"lit\": \"^3.3.3\"\n },\n \"peerDependencies\": {\ndiff --git a/packages/lit-table/src/TableController.ts b/packages/lit-table/src/TableController.ts\nindex 481e72b166..a3211e74f6 100644\n--- a/packages/lit-table/src/TableController.ts\n+++ b/packages/lit-table/src/TableController.ts\n@@ -250,6 +250,9 @@ export class TableController<\n \n hostConnected() {\n this._setupSubscriptions()\n+ if (this._table) {\n+ this.host.requestUpdate()\n+ }\n }\n \n hostUpdated() {\ndiff --git a/packages/lit-table/src/createTableHook.ts b/packages/lit-table/src/createTableHook.ts\nindex 4b52ded673..cd8c67313d 100644\n--- a/packages/lit-table/src/createTableHook.ts\n+++ b/packages/lit-table/src/createTableHook.ts\n@@ -3,8 +3,9 @@ import { ContextConsumer, ContextProvider, createContext } from '@lit/context'\n import { FlexRender, flexRender } from './flexRender'\n import { TableController } from './TableController'\n import type { Context } from '@lit/context'\n+import type { LitRenderable } from './flexRender'\n import type { LitTable } from './TableController'\n-import type { ReactiveControllerHost, TemplateResult } from 'lit'\n+import type { ReactiveControllerHost } from 'lit'\n import type {\n AccessorFn,\n AccessorFnColumnDef,\n@@ -53,7 +54,7 @@ export type AppCellContext<\n > = {\n cell: Cell &\n BoundComponents & {\n- FlexRender: () => TemplateResult | string | null\n+ FlexRender: () => LitRenderable\n }\n column: Column\n getValue: CellContext['getValue']\n@@ -75,7 +76,7 @@ export type AppHeaderContext<\n column: Column\n header: Header &\n BoundComponents & {\n- FlexRender: () => TemplateResult | string | null\n+ FlexRender: () => LitRenderable\n }\n table: Table\n }\n@@ -306,10 +307,10 @@ export type AppLitTable<\n renderFn: (\n cell: Cell &\n BoundComponents & {\n- FlexRender: () => TemplateResult | string | null\n+ FlexRender: () => LitRenderable\n },\n- ) => TemplateResult | string,\n- ) => TemplateResult | string\n+ ) => LitRenderable,\n+ ) => LitRenderable\n /**\n * Wraps a header and provides header context with pre-bound headerComponents.\n * @example\n@@ -322,10 +323,10 @@ export type AppLitTable<\n renderFn: (\n header: Header &\n BoundComponents & {\n- FlexRender: () => TemplateResult | string | null\n+ FlexRender: () => LitRenderable\n },\n- ) => TemplateResult | string,\n- ) => TemplateResult | string\n+ ) => LitRenderable,\n+ ) => LitRenderable\n /**\n * Wraps a footer and provides header context with pre-bound headerComponents.\n * @example\n@@ -338,10 +339,10 @@ export type AppLitTable<\n renderFn: (\n header: Header &\n BoundComponents & {\n- FlexRender: () => TemplateResult | string | null\n+ FlexRender: () => LitRenderable\n },\n- ) => TemplateResult | string,\n- ) => TemplateResult | string\n+ ) => LitRenderable,\n+ ) => LitRenderable\n /**\n * Convenience FlexRender function attached to the table instance.\n * Renders cell, header, or footer content from column definitions.\n@@ -739,12 +740,11 @@ export function createTableHook<\n renderFn: (\n cell: Cell &\n BoundComponents & {\n- FlexRender: () => TemplateResult | string | null\n+ FlexRender: () => LitRenderable\n },\n- ) => TemplateResult | string,\n- ): TemplateResult | string {\n- const cellFlexRender = () =>\n- flexRender(cell.column.columnDef.cell, cell.getContext())\n+ ) => LitRenderable,\n+ ): LitRenderable {\n+ const cellFlexRender = () => FlexRender({ cell })\n \n // Bind each cell component so it receives the cell as its first argument.\n // This allows column defs to call `cell.TextCell()` which internally\n@@ -759,7 +759,7 @@ export function createTableHook<\n ...boundCellComponents,\n }) as Cell &\n BoundComponents & {\n- FlexRender: () => TemplateResult | string | null\n+ FlexRender: () => LitRenderable\n }\n \n return renderFn(extendedCell)\n@@ -771,10 +771,10 @@ export function createTableHook<\n renderFn: (\n header: Header &\n BoundComponents & {\n- FlexRender: () => TemplateResult | string | null\n+ FlexRender: () => LitRenderable\n },\n- ) => TemplateResult | string,\n- ): TemplateResult | string {\n+ ) => LitRenderable,\n+ ): LitRenderable {\n const headerFlexRender = () =>\n flexRender(header.column.columnDef.header, header.getContext())\n \n@@ -789,7 +789,7 @@ export function createTableHook<\n ...boundHeaderComponents,\n }) as Header &\n BoundComponents & {\n- FlexRender: () => TemplateResult | string | null\n+ FlexRender: () => LitRenderable\n }\n \n return renderFn(extendedHeader)\n@@ -801,10 +801,10 @@ export function createTableHook<\n renderFn: (\n header: Header &\n BoundComponents & {\n- FlexRender: () => TemplateResult | string | null\n+ FlexRender: () => LitRenderable\n },\n- ) => TemplateResult | string,\n- ): TemplateResult | string {\n+ ) => LitRenderable,\n+ ): LitRenderable {\n const footerFlexRender = () =>\n flexRender(header.column.columnDef.footer, header.getContext())\n \n@@ -819,7 +819,7 @@ export function createTableHook<\n ...boundFooterComponents,\n }) as Header &\n BoundComponents & {\n- FlexRender: () => TemplateResult | string | null\n+ FlexRender: () => LitRenderable\n }\n \n return renderFn(extendedHeader)\ndiff --git a/packages/lit-table/src/flexRender.ts b/packages/lit-table/src/flexRender.ts\nindex e9c43b1c68..35b8b5bec8 100644\n--- a/packages/lit-table/src/flexRender.ts\n+++ b/packages/lit-table/src/flexRender.ts\n@@ -5,7 +5,22 @@ import type {\n RowData,\n TableFeatures,\n } from '@tanstack/table-core'\n-import type { TemplateResult } from 'lit'\n+import type { TemplateResult, noChange, nothing } from 'lit'\n+import type { DirectiveResult } from 'lit/directive.js'\n+\n+export type LitRenderable =\n+ | TemplateResult\n+ | DirectiveResult\n+ | Node\n+ | string\n+ | number\n+ | bigint\n+ | boolean\n+ | null\n+ | undefined\n+ | typeof nothing\n+ | typeof noChange\n+ | Iterable\n \n /**\n * Renders a Lit table template value with the provided context props.\n@@ -20,14 +35,10 @@ import type { TemplateResult } from 'lit'\n * ```\n */\n export function flexRender(\n- Comp:\n- | ((props: TProps) => TemplateResult | string)\n- | string\n- | TemplateResult\n- | undefined,\n+ Comp: ((props: TProps) => LitRenderable) | LitRenderable,\n props: TProps,\n-): TemplateResult | string | null {\n- if (!Comp) return null\n+): LitRenderable {\n+ if (Comp === null || Comp === undefined) return null\n \n if (typeof Comp === 'function') {\n return Comp(props)\n@@ -91,11 +102,30 @@ export function FlexRender<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TValue extends CellData = CellData,\n->(\n- props: FlexRenderProps,\n-): TemplateResult | string | null {\n+>(props: FlexRenderProps): LitRenderable {\n if ('cell' in props && props.cell) {\n- return flexRender(props.cell.column.columnDef.cell, props.cell.getContext())\n+ const cell = props.cell\n+ const columnDef = cell.column.columnDef\n+ const groupingCell = cell as typeof cell & {\n+ getIsAggregated?: () => boolean\n+ getIsPlaceholder?: () => boolean\n+ }\n+ const groupingColumnDef = columnDef as typeof columnDef & {\n+ aggregatedCell?: typeof columnDef.cell\n+ }\n+\n+ if (groupingCell.getIsAggregated?.()) {\n+ return flexRender(\n+ groupingColumnDef.aggregatedCell ?? columnDef.cell,\n+ cell.getContext(),\n+ )\n+ }\n+\n+ if (groupingCell.getIsPlaceholder?.()) {\n+ return null\n+ }\n+\n+ return flexRender(columnDef.cell, cell.getContext())\n }\n \n if ('header' in props && props.header) {\ndiff --git a/packages/lit-table/src/subscribe-directive.ts b/packages/lit-table/src/subscribe-directive.ts\nindex e6db99371e..70a649a479 100644\n--- a/packages/lit-table/src/subscribe-directive.ts\n+++ b/packages/lit-table/src/subscribe-directive.ts\n@@ -154,6 +154,9 @@ export class SubscribeDirective extends AsyncDirective {\n /** Restores the controller subscription when the directive is re-attached to the DOM. */\n reconnected() {\n this.controller?.hostUpdate()\n+ if (this.resolvedTemplate && this.controller) {\n+ this.setValue(this.resolvedTemplate(this.controller.value))\n+ }\n }\n \n /**\ndiff --git a/packages/lit-table/tests/unit/adapterLifecycle.test.ts b/packages/lit-table/tests/unit/adapterLifecycle.test.ts\nnew file mode 100644\nindex 0000000000..8dd224f30c\n--- /dev/null\n+++ b/packages/lit-table/tests/unit/adapterLifecycle.test.ts\n@@ -0,0 +1,377 @@\n+// @vitest-environment jsdom\n+\n+import { afterEach, describe, expect, test, vi } from 'vitest'\n+import { fireEvent, screen } from '@testing-library/dom'\n+import { createAtom } from '@tanstack/lit-store'\n+import { stockFeatures } from '@tanstack/table-core'\n+import { LitElement, html } from 'lit'\n+import { TableController } from '../../src/TableController'\n+import type {\n+ ColumnDef,\n+ LitTable,\n+ OnChangeFn,\n+ RowSelectionState,\n+} from '../../src'\n+\n+type Data = { id: string; title: string }\n+\n+const idColumn: ColumnDef = {\n+ id: 'id',\n+ accessorKey: 'id',\n+}\n+const titleColumn: ColumnDef = {\n+ id: 'title',\n+ accessorKey: 'title',\n+}\n+\n+let elementId = 0\n+\n+function mount(\n+ elementClass: CustomElementConstructor,\n+): TElement {\n+ const tagName = `lit-table-adapter-test-${elementId++}`\n+ customElements.define(tagName, elementClass)\n+ const element = document.createElement(tagName) as TElement\n+ document.body.append(element)\n+ return element\n+}\n+\n+function outputText(name: string) {\n+ return screen.getByRole('status', { name }).textContent.trim()\n+}\n+\n+afterEach(() => {\n+ document.body.replaceChildren()\n+ vi.restoreAllMocks()\n+})\n+\n+describe('TableController lifecycle and option ownership', () => {\n+ test('disconnecting the host stops root reactions to later state changes', async () => {\n+ const sourceAtom = createAtom({})\n+ const rootSelectorCaptor = vi.fn<(state: RowSelectionState) => void>()\n+\n+ class LifecycleTable extends LitElement {\n+ private controller = new TableController(this)\n+ table?: LitTable\n+\n+ createRenderRoot() {\n+ return this\n+ }\n+\n+ protected render() {\n+ const table = this.controller.table(\n+ {\n+ data: [{ id: '1', title: 'First' }],\n+ columns: [idColumn, titleColumn],\n+ features: stockFeatures,\n+ getRowId: (row) => row.id,\n+ atoms: {\n+ rowSelection: sourceAtom,\n+ },\n+ },\n+ (state) => {\n+ rootSelectorCaptor(state.rowSelection)\n+ return state.rowSelection\n+ },\n+ )\n+ this.table = table\n+\n+ return html`\n+ \n+ ${JSON.stringify(table.state)}\n+ \n+ `\n+ }\n+ }\n+\n+ const element = mount(LifecycleTable)\n+ await element.updateComplete\n+\n+ expect(rootSelectorCaptor.mock.lastCall?.[0]).toEqual({})\n+\n+ sourceAtom.set({ 1: true })\n+ await element.updateComplete\n+\n+ expect(outputText('Lifecycle selection')).toBe('{\"1\":true}')\n+ expect(rootSelectorCaptor.mock.lastCall?.[0]).toEqual({ 1: true })\n+\n+ element.remove()\n+\n+ const callsAfterDisconnect = rootSelectorCaptor.mock.calls.length\n+\n+ sourceAtom.set({ 2: true })\n+ element.table?.setPageSize(25)\n+\n+ expect(rootSelectorCaptor).toHaveBeenCalledTimes(callsAfterDisconnect)\n+\n+ document.body.append(element)\n+ await element.updateComplete\n+\n+ expect(outputText('Lifecycle selection')).toBe('{\"2\":true}')\n+ expect(rootSelectorCaptor.mock.lastCall?.[0]).toEqual({ 2: true })\n+ })\n+\n+ test('controlled state can release and reacquire ownership of a slice', async () => {\n+ class OwnershipTable extends LitElement {\n+ private controller = new TableController(this)\n+ private controlledState: { rowSelection?: RowSelectionState } = {\n+ rowSelection: { 1: true },\n+ }\n+ table?: LitTable\n+\n+ createRenderRoot() {\n+ return this\n+ }\n+\n+ setControlledState(state: { rowSelection?: RowSelectionState }) {\n+ this.controlledState = state\n+ this.requestUpdate()\n+ }\n+\n+ protected render() {\n+ const table = this.controller.table(\n+ {\n+ data: [\n+ { id: '1', title: 'First' },\n+ { id: '2', title: 'Second' },\n+ ],\n+ columns: [idColumn, titleColumn],\n+ features: stockFeatures,\n+ getRowId: (row) => row.id,\n+ state: this.controlledState,\n+ },\n+ (state) => state.rowSelection,\n+ )\n+ this.table = table\n+\n+ return html`\n+ \n+ ${JSON.stringify(table.state)}\n+ \n+ `\n+ }\n+ }\n+\n+ const element = mount(OwnershipTable)\n+ await element.updateComplete\n+\n+ expect(outputText('Owned selection')).toBe('{\"1\":true}')\n+\n+ element.setControlledState({})\n+ await element.updateComplete\n+\n+ expect(outputText('Owned selection')).toBe('{\"1\":true}')\n+\n+ element.table!.setRowSelection({ 2: true })\n+ await element.updateComplete\n+\n+ expect(outputText('Owned selection')).toBe('{\"2\":true}')\n+\n+ element.setControlledState({ rowSelection: { 1: true, 2: true } })\n+ await element.updateComplete\n+\n+ expect(outputText('Owned selection')).toBe('{\"1\":true,\"2\":true}')\n+\n+ element.table!.setRowSelection({})\n+ await element.updateComplete\n+\n+ expect(outputText('Owned selection')).toBe('{\"1\":true,\"2\":true}')\n+\n+ element.setControlledState({})\n+ await element.updateComplete\n+\n+ expect(outputText('Owned selection')).toBe('{}')\n+ })\n+\n+ test('an external atom takes precedence over controlled state and receives table writes', async () => {\n+ const externalAtom = createAtom({ 2: true })\n+\n+ class ExternalAtomTable extends LitElement {\n+ private controller = new TableController(this)\n+ private controlledSelection: RowSelectionState = { 1: true }\n+ table?: LitTable\n+\n+ createRenderRoot() {\n+ return this\n+ }\n+\n+ setControlledSelection(selection: RowSelectionState) {\n+ this.controlledSelection = selection\n+ this.requestUpdate()\n+ }\n+\n+ protected render() {\n+ const table = this.controller.table(\n+ {\n+ data: [\n+ { id: '1', title: 'First' },\n+ { id: '2', title: 'Second' },\n+ ],\n+ columns: [idColumn, titleColumn],\n+ features: stockFeatures,\n+ getRowId: (row) => row.id,\n+ state: {\n+ rowSelection: this.controlledSelection,\n+ },\n+ atoms: {\n+ rowSelection: externalAtom,\n+ },\n+ },\n+ (state) => state.rowSelection,\n+ )\n+ this.table = table\n+\n+ return html`\n+ \n+ ${JSON.stringify(table.state)}\n+ \n+ \n+ `\n+ }\n+ }\n+\n+ const element = mount(ExternalAtomTable)\n+ await element.updateComplete\n+\n+ expect(outputText('External selection')).toBe('{\"2\":true}')\n+\n+ element.setControlledSelection({ 1: true, 2: true })\n+ await element.updateComplete\n+\n+ expect(outputText('External selection')).toBe('{\"2\":true}')\n+\n+ externalAtom.set({ 1: true, 2: true })\n+ await element.updateComplete\n+\n+ expect(outputText('External selection')).toBe('{\"1\":true,\"2\":true}')\n+\n+ fireEvent.click(\n+ screen.getByRole('button', { name: 'Deselect external row' }),\n+ )\n+ await element.updateComplete\n+\n+ expect(externalAtom.get()).toEqual({ 2: true })\n+ expect(outputText('External selection')).toBe('{\"2\":true}')\n+ })\n+\n+ test('coalesces dynamic data, columns, and callbacks into the next render', async () => {\n+ const firstSelectionHandler = vi.fn>()\n+ const secondSelectionHandler = vi.fn>()\n+ const renderCaptor =\n+ vi.fn<\n+ (snapshot: {\n+ canSelect: boolean\n+ columnIds: Array\n+ values: Array\n+ }) => void\n+ >()\n+\n+ class DynamicOptionsTable extends LitElement {\n+ private controller = new TableController(this)\n+ private data: Array = [{ id: '1', title: 'Initial' }]\n+ private columns: Array> = [idColumn]\n+ private enableRowSelection = true\n+ private onRowSelectionChange: OnChangeFn =\n+ firstSelectionHandler\n+ table?: LitTable\n+\n+ createRenderRoot() {\n+ return this\n+ }\n+\n+ setOptions(options: {\n+ columns: Array>\n+ data: Array\n+ enableRowSelection: boolean\n+ onRowSelectionChange: OnChangeFn\n+ }) {\n+ this.data = options.data\n+ this.columns = options.columns\n+ this.enableRowSelection = options.enableRowSelection\n+ this.onRowSelectionChange = options.onRowSelectionChange\n+ this.requestUpdate()\n+ }\n+\n+ protected render() {\n+ const table = this.controller.table(\n+ {\n+ data: this.data,\n+ columns: this.columns,\n+ features: stockFeatures,\n+ enableRowSelection: this.enableRowSelection,\n+ getRowId: (row) => row.id,\n+ onRowSelectionChange: this.onRowSelectionChange,\n+ },\n+ () => null,\n+ )\n+ this.table = table\n+ const row = table.getRowModel().rows[0]!\n+ const snapshot = {\n+ canSelect: row.getCanSelect(),\n+ columnIds: table.getAllLeafColumns().map((column) => column.id),\n+ values: row.getAllCells().map((cell) => cell.getValue()),\n+ }\n+ renderCaptor(snapshot)\n+\n+ return html`\n+ \n+ ${JSON.stringify(snapshot)}\n+ \n+ `\n+ }\n+ }\n+\n+ const element = mount(DynamicOptionsTable)\n+ await element.updateComplete\n+\n+ expect(element.table?.subscribe).toEqual(expect.any(Function))\n+ expect(element.table?.FlexRender).toEqual(expect.any(Function))\n+ expect('state' in element.table!).toBe(true)\n+\n+ element.table!.toggleAllRowsSelected(true)\n+\n+ expect(firstSelectionHandler).toHaveBeenCalledOnce()\n+ expect(secondSelectionHandler).not.toHaveBeenCalled()\n+\n+ element.setOptions({\n+ data: [{ id: '2', title: 'Intermediate' }],\n+ columns: [idColumn, titleColumn],\n+ enableRowSelection: false,\n+ onRowSelectionChange: secondSelectionHandler,\n+ })\n+ element.setOptions({\n+ data: [{ id: '3', title: 'Final' }],\n+ columns: [titleColumn],\n+ enableRowSelection: false,\n+ onRowSelectionChange: secondSelectionHandler,\n+ })\n+ await element.updateComplete\n+\n+ expect(renderCaptor.mock.calls).toEqual([\n+ [\n+ {\n+ canSelect: true,\n+ columnIds: ['id'],\n+ values: ['1'],\n+ },\n+ ],\n+ [\n+ {\n+ canSelect: false,\n+ columnIds: ['title'],\n+ values: ['Final'],\n+ },\n+ ],\n+ ])\n+ expect(outputText('Dynamic options')).toBe(\n+ '{\"canSelect\":false,\"columnIds\":[\"title\"],\"values\":[\"Final\"]}',\n+ )\n+\n+ element.table!.toggleAllRowsSelected(false)\n+\n+ expect(firstSelectionHandler).toHaveBeenCalledOnce()\n+ expect(secondSelectionHandler).toHaveBeenCalledOnce()\n+ })\n+})\ndiff --git a/packages/lit-table/tests/unit/defaultReactivity.test.ts b/packages/lit-table/tests/unit/defaultReactivity.test.ts\nindex 6ff9729a05..692db675e5 100644\n--- a/packages/lit-table/tests/unit/defaultReactivity.test.ts\n+++ b/packages/lit-table/tests/unit/defaultReactivity.test.ts\n@@ -5,7 +5,9 @@ describe('TableController', () => {\n test('uses default reactivity when constructing a table', () => {\n const host = {\n addController: () => {},\n+ removeController: () => {},\n requestUpdate: () => {},\n+ updateComplete: Promise.resolve(true),\n }\n const controller = new TableController(host)\n \ndiff --git a/packages/lit-table/tests/unit/flexRender.test.ts b/packages/lit-table/tests/unit/flexRender.test.ts\nnew file mode 100644\nindex 0000000000..ff4e4433f8\n--- /dev/null\n+++ b/packages/lit-table/tests/unit/flexRender.test.ts\n@@ -0,0 +1,29 @@\n+import { describe, expect, test, vi } from 'vitest'\n+import { html, nothing } from 'lit'\n+import { flexRender } from '../../src/flexRender'\n+\n+describe('flexRender', () => {\n+ test('handles empty, static, template, and callback renderers', () => {\n+ const props = { value: 'Ada' }\n+ const callback = vi.fn(\n+ (context: typeof props) => html`${context.value}`,\n+ )\n+ const existingTemplate = html`Existing`\n+\n+ expect(flexRender(undefined, props)).toBeNull()\n+ expect(flexRender(null, props)).toBeNull()\n+ expect(flexRender('', props)).toBe('')\n+ expect(flexRender(0, props)).toBe(0)\n+ expect(flexRender(false, props)).toBe(false)\n+ expect(flexRender(nothing, props)).toBe(nothing)\n+ expect(flexRender(['Ada', 0], props)).toEqual(['Ada', 0])\n+ expect(flexRender('Plain text', props)).toBe('Plain text')\n+ expect(flexRender(existingTemplate, props)).toBe(existingTemplate)\n+ expect(flexRender(callback, props)).toEqual(\n+ html`${props.value}`,\n+ )\n+ expect(callback).toHaveBeenCalledOnce()\n+ expect(callback).toHaveBeenCalledWith(props)\n+ expect(flexRender(() => 0, props)).toBe(0)\n+ })\n+})\ndiff --git a/packages/lit-table/tests/unit/rendering.test.ts b/packages/lit-table/tests/unit/rendering.test.ts\nnew file mode 100644\nindex 0000000000..b5063ae163\n--- /dev/null\n+++ b/packages/lit-table/tests/unit/rendering.test.ts\n@@ -0,0 +1,460 @@\n+// @vitest-environment jsdom\n+\n+import { afterEach, describe, expect, test, vi } from 'vitest'\n+import { fireEvent, screen, waitFor } from '@testing-library/dom'\n+import { createAtom } from '@tanstack/lit-store'\n+import { stockFeatures } from '@tanstack/table-core'\n+import { LitElement, html } from 'lit'\n+import { createTableHook } from '../../src/createTableHook'\n+import { FlexRender } from '../../src/flexRender'\n+import { TableController } from '../../src/TableController'\n+import { subscribe } from '../../src/subscribe-directive'\n+import type { Cell, ColumnDef, Header, RowSelectionState } from '../../src'\n+\n+type Data = { id: string; name: string }\n+\n+const columns: Array> = [\n+ {\n+ id: 'name',\n+ accessorKey: 'name',\n+ header: ({ column }) => `header:${column.id}`,\n+ cell: ({ getValue }) => `cell:${getValue()}`,\n+ aggregatedCell: ({ getValue }) => `aggregate:${getValue()}`,\n+ footer: ({ column }) => `footer:${column.id}`,\n+ },\n+]\n+\n+let elementId = 0\n+\n+function mount(\n+ elementClass: CustomElementConstructor,\n+): TElement {\n+ const tagName = `lit-table-render-test-${elementId++}`\n+ customElements.define(tagName, elementClass)\n+ const element = document.createElement(tagName) as TElement\n+ document.body.append(element)\n+ return element\n+}\n+\n+function outputText(name: string) {\n+ return screen.getByRole('status', { name }).textContent.trim()\n+}\n+\n+afterEach(() => {\n+ document.body.replaceChildren()\n+ vi.restoreAllMocks()\n+})\n+\n+describe('FlexRender', () => {\n+ test('renders normal, aggregate, placeholder, header, and footer templates reactively', async () => {\n+ class FlexRenderTable extends LitElement {\n+ private controller = new TableController(this)\n+ private mode: 'normal' | 'aggregate' | 'placeholder' = 'normal'\n+ private cell?: Cell\n+ private header?: Header\n+ private footer?: Header\n+\n+ createRenderRoot() {\n+ return this\n+ }\n+\n+ setMode(mode: 'normal' | 'aggregate' | 'placeholder') {\n+ this.mode = mode\n+ this.requestUpdate()\n+ }\n+\n+ protected render() {\n+ const table = this.controller.table({\n+ data: [{ id: '1', name: 'Ada' }],\n+ columns,\n+ features: stockFeatures,\n+ getRowId: (row) => row.id,\n+ })\n+\n+ if (!this.cell) {\n+ this.cell = table.getRow('1').getAllCells()[0] as Cell<\n+ typeof stockFeatures,\n+ Data,\n+ string\n+ >\n+ this.header = table.getHeaderGroups()[0]!.headers[0] as Header<\n+ typeof stockFeatures,\n+ Data,\n+ string\n+ >\n+ this.footer = table.getFooterGroups()[0]!.headers[0] as Header<\n+ typeof stockFeatures,\n+ Data,\n+ string\n+ >\n+ vi.spyOn(this.cell, 'getIsAggregated').mockImplementation(\n+ () => this.mode === 'aggregate',\n+ )\n+ vi.spyOn(this.cell, 'getIsPlaceholder').mockImplementation(\n+ () => this.mode === 'placeholder',\n+ )\n+ }\n+\n+ return html`\n+ \n+ ${FlexRender({ cell: this.cell })}\n+ \n+ \n+ ${FlexRender({ header: this.header! })}\n+ \n+ \n+ ${FlexRender({ footer: this.footer! })}\n+ \n+ `\n+ }\n+ }\n+\n+ const element = mount(FlexRenderTable)\n+ await element.updateComplete\n+\n+ expect(outputText('Rendered cell')).toBe('cell:Ada')\n+ expect(outputText('Rendered header')).toBe('header:name')\n+ expect(outputText('Rendered footer')).toBe('footer:name')\n+\n+ element.setMode('aggregate')\n+ await element.updateComplete\n+\n+ expect(outputText('Rendered cell')).toBe('aggregate:Ada')\n+\n+ element.setMode('placeholder')\n+ await element.updateComplete\n+\n+ expect(outputText('Rendered cell')).toBe('')\n+\n+ element.setMode('normal')\n+ await element.updateComplete\n+\n+ expect(outputText('Rendered cell')).toBe('cell:Ada')\n+ })\n+})\n+\n+describe('table.subscribe', () => {\n+ test('updates both source overloads without rerendering an opted-out host', async () => {\n+ const hostRenderCaptor = vi.fn()\n+\n+ class SubscribeTable extends LitElement {\n+ private controller = new TableController(this)\n+\n+ createRenderRoot() {\n+ return this\n+ }\n+\n+ protected render() {\n+ hostRenderCaptor()\n+ const table = this.controller.table(\n+ {\n+ data: [{ id: '1', name: 'Ada' }],\n+ columns,\n+ features: stockFeatures,\n+ getRowId: (row) => row.id,\n+ },\n+ () => ({}),\n+ )\n+\n+ return html`\n+ ${table.subscribe(\n+ table.atoms.rowSelection,\n+ (selection) => html`\n+ \n+ ${JSON.stringify(selection)}\n+ \n+ `,\n+ )}\n+ ${table.subscribe(\n+ table.store,\n+ (state) => Boolean(state.rowSelection['1']),\n+ (selected) => html`\n+ \n+ ${String(selected)}\n+ \n+ `,\n+ )}\n+ \n+ `\n+ }\n+ }\n+\n+ const element = mount(SubscribeTable)\n+ await element.updateComplete\n+\n+ expect(outputText('Subscribed atom selection')).toBe('{}')\n+ expect(outputText('Subscribed selected row')).toBe('false')\n+\n+ fireEvent.click(\n+ screen.getByRole('button', { name: 'Select subscribed row' }),\n+ )\n+\n+ await waitFor(() => {\n+ expect(outputText('Subscribed atom selection')).toBe('{\"1\":true}')\n+ expect(outputText('Subscribed selected row')).toBe('true')\n+ })\n+ expect(hostRenderCaptor).toHaveBeenCalledOnce()\n+ })\n+\n+ test('disconnecting a directive unsubscribes its source', async () => {\n+ const sourceAtom = createAtom({})\n+ const subscribeSpy = vi.spyOn(sourceAtom, 'subscribe')\n+ const templateCaptor = vi.fn<(selection: RowSelectionState) => void>()\n+\n+ class SubscribeLifecycle extends LitElement {\n+ createRenderRoot() {\n+ return this\n+ }\n+\n+ protected render() {\n+ return html`\n+ ${subscribe(sourceAtom, (selection) => {\n+ templateCaptor(selection)\n+ return html`\n+ \n+ ${JSON.stringify(selection)}\n+ \n+ `\n+ })}\n+ `\n+ }\n+ }\n+\n+ const element = mount(SubscribeLifecycle)\n+ await element.updateComplete\n+\n+ expect(subscribeSpy).toHaveBeenCalledOnce()\n+\n+ sourceAtom.set({ 1: true })\n+ await waitFor(() => {\n+ expect(outputText('Directive lifecycle selection')).toBe('{\"1\":true}')\n+ })\n+\n+ element.remove()\n+\n+ const callsAfterDisconnect = templateCaptor.mock.calls.length\n+ sourceAtom.set({ 2: true })\n+\n+ expect(templateCaptor).toHaveBeenCalledTimes(callsAfterDisconnect)\n+\n+ document.body.append(element)\n+ await element.updateComplete\n+\n+ expect(subscribeSpy).toHaveBeenCalledTimes(2)\n+ await waitFor(() => {\n+ expect(outputText('Directive lifecycle selection')).toBe('{\"2\":true}')\n+ })\n+\n+ sourceAtom.set({ 3: true })\n+ await waitFor(() => {\n+ expect(outputText('Directive lifecycle selection')).toBe('{\"3\":true}')\n+ })\n+ })\n+})\n+\n+describe('createTableHook runtime', () => {\n+ test('binds defaults, registered renderers, wrappers, and table context', async () => {\n+ const tableBadge = vi.fn(() => html`table-badge`)\n+ const cellBadge = vi.fn(\n+ (cell: Cell) =>\n+ html`cell-badge:${cell.id}`,\n+ )\n+ const headerBadge = vi.fn(\n+ (header: Header) =>\n+ html`header-badge:${header.id}`,\n+ )\n+ const hook = createTableHook({\n+ features: stockFeatures,\n+ enableRowSelection: false,\n+ getRowId: (row: Data) => `row-${row.id}`,\n+ tableComponents: { tableBadge },\n+ cellComponents: { cellBadge },\n+ headerComponents: { headerBadge },\n+ })\n+ const columnHelper = hook.createAppColumnHelper()\n+ const appColumns = columnHelper.columns([\n+ columnHelper.accessor('name', {\n+ header: ({ column }) => `header:${column.id}`,\n+ cell: ({ getValue }) => `cell:${getValue()}`,\n+ footer: ({ column }) => `footer:${column.id}`,\n+ }),\n+ ])\n+ const tableContextCaptor = vi.fn<(table: unknown) => void>()\n+\n+ class TableContextConsumer extends LitElement {\n+ private tableConsumer = hook.useTableContext(this)\n+\n+ createRenderRoot() {\n+ return this\n+ }\n+\n+ protected render() {\n+ const table = this.tableConsumer.value\n+ tableContextCaptor(table)\n+\n+ return html`\n+ \n+ ${String(Boolean(table))}\n+ \n+ `\n+ }\n+ }\n+ customElements.define(\n+ 'lit-table-context-consumer-test',\n+ TableContextConsumer,\n+ )\n+\n+ class AppTable extends LitElement {\n+ private appTable = hook.useAppTable(this, {\n+ data: [{ id: '1', name: 'Ada' }],\n+ columns: appColumns,\n+ enableRowSelection: true,\n+ })\n+ table?: ReturnType<(typeof this.appTable)['table']>\n+\n+ createRenderRoot() {\n+ return this\n+ }\n+\n+ protected render() {\n+ const table = this.appTable.table()\n+ this.table = table\n+ const row = table.getRowModel().rows[0]!\n+ const cell = row.getAllCells()[0]!\n+ const header = table.getHeaderGroups()[0]!.headers[0]!\n+ const footer = table.getFooterGroups()[0]!.headers[0]!\n+\n+ return html`\n+ \n+ ${String(row.getCanSelect())}\n+ \n+ ${table.tableBadge()}\n+ ${table.AppCell(\n+ cell,\n+ (appCell) => html`\n+ ${appCell.cellBadge()}\n+ ${appCell.FlexRender()} \n+ `,\n+ )}\n+ ${table.AppHeader(\n+ header,\n+ (appHeader) => html`\n+ ${appHeader.headerBadge()}\n+ \n+ ${appHeader.FlexRender()}\n+ \n+ `,\n+ )}\n+ ${table.AppFooter(\n+ footer,\n+ (appFooter) => html`\n+ \n+ ${appFooter.FlexRender()}\n+ \n+ `,\n+ )}\n+ \n+ `\n+ }\n+ }\n+\n+ const element = mount(AppTable)\n+ await element.updateComplete\n+ await waitFor(() => {\n+ expect(outputText('Table context available')).toBe('true')\n+ })\n+\n+ const table = element.table!\n+ const cell = table.getRowModel().rows[0]!.getAllCells()[0]!\n+ const header = table.getHeaderGroups()[0]!.headers[0]!\n+\n+ expect(hook.appFeatures).toBe(stockFeatures)\n+ expect(table.FlexRender).toBe(FlexRender)\n+ expect(table.AppCell).toEqual(expect.any(Function))\n+ expect(table.AppHeader).toEqual(expect.any(Function))\n+ expect(table.AppFooter).toEqual(expect.any(Function))\n+ expect(outputText('Row can be selected')).toBe('true')\n+ expect(outputText('Bound cell')).toBe('cell:Ada')\n+ expect(outputText('Bound header')).toBe('header:name')\n+ expect(outputText('Bound footer')).toBe('footer:name')\n+ expect(screen.getByText(`cell-badge:${cell.id}`)).toBeTruthy()\n+ expect(screen.getByText(`header-badge:${header.id}`)).toBeTruthy()\n+ expect(screen.getByText('table-badge')).toBeTruthy()\n+ expect(cellBadge).toHaveBeenCalledWith(cell)\n+ expect(headerBadge).toHaveBeenCalledWith(header)\n+ expect(tableContextCaptor).toHaveBeenCalledWith(table)\n+ })\n+\n+ test('bound cell FlexRender preserves aggregate and placeholder modes', async () => {\n+ const hook = createTableHook({\n+ features: stockFeatures,\n+ })\n+ const columnHelper = hook.createAppColumnHelper()\n+ const appColumns = columnHelper.columns([\n+ columnHelper.accessor('name', {\n+ cell: ({ getValue }) => `cell:${getValue()}`,\n+ aggregatedCell: ({ getValue }) => `aggregate:${getValue()}`,\n+ }),\n+ ])\n+\n+ class BoundCellTable extends LitElement {\n+ private appTable = hook.useAppTable(this, {\n+ data: [{ id: '1', name: 'Ada' }],\n+ columns: appColumns,\n+ getRowId: (row) => row.id,\n+ })\n+ private mode: 'aggregate' | 'placeholder' | 'normal' = 'aggregate'\n+ private cell?: Cell\n+\n+ createRenderRoot() {\n+ return this\n+ }\n+\n+ setMode(mode: 'aggregate' | 'placeholder' | 'normal') {\n+ this.mode = mode\n+ this.requestUpdate()\n+ }\n+\n+ protected render() {\n+ const table = this.appTable.table()\n+ if (!this.cell) {\n+ this.cell = table.getRow('1').getAllCells()[0] as Cell<\n+ typeof stockFeatures,\n+ Data,\n+ string\n+ >\n+ vi.spyOn(this.cell, 'getIsAggregated').mockImplementation(\n+ () => this.mode === 'aggregate',\n+ )\n+ vi.spyOn(this.cell, 'getIsPlaceholder').mockImplementation(\n+ () => this.mode === 'placeholder',\n+ )\n+ }\n+\n+ return table.AppCell(\n+ this.cell,\n+ (cell) => html`\n+ ${cell.FlexRender()} \n+ `,\n+ )\n+ }\n+ }\n+\n+ const element = mount(BoundCellTable)\n+ await element.updateComplete\n+\n+ expect(outputText('Bound cell mode')).toBe('aggregate:Ada')\n+\n+ element.setMode('placeholder')\n+ await element.updateComplete\n+\n+ expect(outputText('Bound cell mode')).toBe('')\n+\n+ element.setMode('normal')\n+ await element.updateComplete\n+\n+ expect(outputText('Bound cell mode')).toBe('cell:Ada')\n+ })\n+})\ndiff --git a/packages/lit-table/tests/unit/selectorGate.test.ts b/packages/lit-table/tests/unit/selectorGate.test.ts\nindex 535a20892f..4119961b12 100644\n--- a/packages/lit-table/tests/unit/selectorGate.test.ts\n+++ b/packages/lit-table/tests/unit/selectorGate.test.ts\n@@ -6,9 +6,11 @@ function createHost() {\n const host = {\n updateCount: 0,\n addController: () => {},\n+ removeController: () => {},\n requestUpdate: () => {\n host.updateCount++\n },\n+ updateComplete: Promise.resolve(true),\n }\n return host\n }\ndiff --git a/packages/lit-table/tsconfig.json b/packages/lit-table/tsconfig.json\nindex eb63835950..d69d19f8e1 100644\n--- a/packages/lit-table/tsconfig.json\n+++ b/packages/lit-table/tsconfig.json\n@@ -1,4 +1,4 @@\n {\n \"extends\": \"../../tsconfig.json\",\n- \"include\": [\"src\", \"eslint.config.js\", \"vite.config.ts\"]\n+ \"include\": [\"src\", \"tests\", \"eslint.config.js\", \"vite.config.ts\"]\n }\ndiff --git a/packages/preact-table/package.json b/packages/preact-table/package.json\nindex 4e7b793fe7..0ba83eb514 100644\n--- a/packages/preact-table/package.json\n+++ b/packages/preact-table/package.json\n@@ -53,7 +53,9 @@\n },\n \"devDependencies\": {\n \"@preact/preset-vite\": \"^2.10.5\",\n- \"preact\": \"^10.29.2\"\n+ \"@testing-library/preact\": \"^3.2.4\",\n+ \"preact\": \"^10.29.2\",\n+ \"preact-render-to-string\": \"^6.7.0\"\n },\n \"peerDependencies\": {\n \"preact\": \">=10\"\ndiff --git a/packages/preact-table/src/FlexRender.tsx b/packages/preact-table/src/FlexRender.tsx\nindex 07c18569a3..7d1e512903 100644\n--- a/packages/preact-table/src/FlexRender.tsx\n+++ b/packages/preact-table/src/FlexRender.tsx\n@@ -33,9 +33,12 @@ function isExoticComponent(component: any) {\n return (\n typeof component === 'object' &&\n typeof component.$$typeof === 'symbol' &&\n- ['preact.memo', 'preact.forward_ref'].includes(\n- component.$$typeof.description,\n- )\n+ [\n+ 'preact.memo',\n+ 'preact.forward_ref',\n+ 'react.memo',\n+ 'react.forward_ref',\n+ ].includes(component.$$typeof.description)\n )\n }\n \n@@ -47,11 +50,11 @@ export function flexRender(\n Comp: Renderable | null,\n props: TProps,\n ): ComponentChild | Element | null {\n- return !Comp ? null : isPreactComponent(Comp) ? (\n- \n- ) : (\n- Comp\n- )\n+ if (Comp === null || Comp === undefined) {\n+ return null\n+ }\n+\n+ return isPreactComponent(Comp) ? : Comp\n }\n \n /**\ndiff --git a/packages/preact-table/tests/unit/adapterReactivity.test.tsx b/packages/preact-table/tests/unit/adapterReactivity.test.tsx\nnew file mode 100644\nindex 0000000000..74e92cb42a\n--- /dev/null\n+++ b/packages/preact-table/tests/unit/adapterReactivity.test.tsx\n@@ -0,0 +1,609 @@\n+// @vitest-environment jsdom\n+\n+import { cleanup, fireEvent, render, screen } from '@testing-library/preact'\n+import { useLayoutEffect, useState } from 'preact/hooks'\n+import { act } from 'preact/test-utils'\n+import {\n+ createPaginatedRowModel,\n+ stockFeatures,\n+ tableFeatures,\n+} from '@tanstack/table-core'\n+import { createAtom } from '@tanstack/preact-store'\n+import { afterEach, describe, expect, test, vi } from 'vitest'\n+import { useTable } from '../../src'\n+import type {\n+ ColumnDef,\n+ OnChangeFn,\n+ PaginationState,\n+ RowSelectionState,\n+} from '@tanstack/table-core'\n+import type { PreactTable } from '../../src'\n+\n+type Data = {\n+ id: string\n+ title: string\n+}\n+\n+const columns: Array> = [\n+ {\n+ id: 'id',\n+ header: 'Id',\n+ accessorKey: 'id',\n+ cell: (context) => context.getValue(),\n+ },\n+ {\n+ id: 'title',\n+ header: 'Title',\n+ accessorKey: 'title',\n+ cell: (context) => context.getValue(),\n+ },\n+]\n+\n+const paginatedFeatures = tableFeatures({\n+ ...stockFeatures,\n+ paginatedRowModel: createPaginatedRowModel(),\n+})\n+const paginatedColumns: Array> = [\n+ {\n+ id: 'id',\n+ header: 'Id',\n+ accessorKey: 'id',\n+ cell: (context) => context.getValue(),\n+ },\n+ {\n+ id: 'title',\n+ header: 'Title',\n+ accessorKey: 'title',\n+ cell: (context) => context.getValue(),\n+ },\n+]\n+\n+function text(name: string) {\n+ return screen.getByRole('status', { name }).textContent\n+}\n+\n+function click(name: string) {\n+ fireEvent.click(screen.getByRole('button', { name }))\n+}\n+\n+afterEach(() => {\n+ cleanup()\n+ vi.restoreAllMocks()\n+})\n+\n+// Adapter contract only: Preact/store ownership, subscriptions, lifecycle, and\n+// option refreshes. Row-model algorithms remain covered by table-core.\n+describe('Preact adapter reactivity and lifecycle', () => {\n+ test('exposes Preact adapter APIs through the returned table surface', () => {\n+ function TableHarness() {\n+ const table = useTable(\n+ {\n+ data: [{ id: '1', title: 'Title' }],\n+ features: stockFeatures,\n+ columns,\n+ getRowId: (row) => row.id,\n+ },\n+ () => null,\n+ )\n+\n+ return (\n+ \n+ {JSON.stringify({\n+ hasOptions: 'options' in table,\n+ hasState: 'state' in table,\n+ hasRowModel: 'getRowModel' in table,\n+ hasSubscribe: 'Subscribe' in table,\n+ hasFlexRender: 'FlexRender' in table,\n+ keys: Object.keys(table),\n+ })}\n+ \n+ )\n+ }\n+\n+ render()\n+\n+ const surface = JSON.parse(text('Table surface')) as {\n+ hasOptions: boolean\n+ hasState: boolean\n+ hasRowModel: boolean\n+ hasSubscribe: boolean\n+ hasFlexRender: boolean\n+ keys: Array\n+ }\n+\n+ expect(surface).toEqual({\n+ hasOptions: true,\n+ hasState: true,\n+ hasRowModel: true,\n+ hasSubscribe: true,\n+ hasFlexRender: true,\n+ keys: expect.any(Array),\n+ })\n+ expect(surface.keys).toEqual(\n+ expect.arrayContaining([\n+ 'options',\n+ 'state',\n+ 'Subscribe',\n+ 'FlexRender',\n+ 'getRowModel',\n+ ]),\n+ )\n+ })\n+\n+ test('updates the paginated row model without invalidating the core row model', () => {\n+ const data = Array.from({ length: 10 }, (_, index) => ({\n+ id: String(index),\n+ title: `Title ${index}`,\n+ }))\n+ const coreRowModelCaptor = vi.fn()\n+ const rowModelCaptor = vi.fn()\n+\n+ function TableHarness() {\n+ const [pagination, setPagination] = useState({\n+ pageIndex: 0,\n+ pageSize: 5,\n+ })\n+ const table = useTable(\n+ {\n+ data,\n+ features: paginatedFeatures,\n+ columns: paginatedColumns,\n+ getRowId: (row) => row.id,\n+ state: { pagination },\n+ onPaginationChange: setPagination,\n+ },\n+ (state) => state.pagination,\n+ )\n+ const coreRowModel = table.getCoreRowModel()\n+ const rowModel = table.getRowModel()\n+\n+ coreRowModelCaptor(coreRowModel)\n+ rowModelCaptor(rowModel)\n+\n+ return (\n+ <>\n+ \n+ {coreRowModel.rows.map((row) => row.id).join(',')}\n+ \n+ \n+ {rowModel.rows.map((row) => row.id).join(',')}\n+ \n+ \n+ \n+ )\n+ }\n+\n+ render()\n+\n+ expect(text('Core row IDs')).toBe('0,1,2,3,4,5,6,7,8,9')\n+ expect(text('Page row IDs')).toBe('0,1,2,3,4')\n+\n+ act(() => {\n+ click('Set page size to 3')\n+ })\n+\n+ expect(text('Core row IDs')).toBe('0,1,2,3,4,5,6,7,8,9')\n+ expect(text('Page row IDs')).toBe('0,1,2')\n+ expect(coreRowModelCaptor).toHaveBeenCalledTimes(2)\n+ expect(rowModelCaptor).toHaveBeenCalledTimes(2)\n+ expect(coreRowModelCaptor.mock.calls[0]![0]).toBe(\n+ coreRowModelCaptor.mock.calls[1]![0],\n+ )\n+ expect(rowModelCaptor.mock.calls[0]![0].rows).toHaveLength(5)\n+ expect(rowModelCaptor.mock.calls[1]![0].rows).toHaveLength(3)\n+ })\n+\n+ test('bridges external atoms through both Subscribe source overloads', () => {\n+ const rowSelectionAtom = createAtom({})\n+\n+ function TableHarness() {\n+ const table = useTable(\n+ {\n+ data: [{ id: '1', title: 'Title' }],\n+ features: stockFeatures,\n+ columns,\n+ getRowId: (row) => row.id,\n+ atoms: {\n+ rowSelection: rowSelectionAtom,\n+ },\n+ },\n+ () => null,\n+ )\n+\n+ return (\n+ <>\n+ Boolean(selection['1'])}\n+ >\n+ {(selected) => (\n+ \n+ {String(selected)}\n+ \n+ )}\n+ \n+ \n+ {(selection) => (\n+ \n+ {JSON.stringify(selection)}\n+ \n+ )}\n+ \n+ \n+ \n+ )\n+ }\n+\n+ render()\n+\n+ expect(text('External row selected')).toBe('false')\n+ expect(text('External row selection')).toBe('{}')\n+\n+ act(() => {\n+ rowSelectionAtom.set({ 1: true })\n+ })\n+\n+ expect(text('External row selected')).toBe('true')\n+ expect(text('External row selection')).toBe('{\"1\":true}')\n+\n+ act(() => {\n+ click('Toggle external row')\n+ })\n+\n+ expect(rowSelectionAtom.get()).toEqual({})\n+ expect(text('External row selected')).toBe('false')\n+ expect(text('External row selection')).toBe('{}')\n+ })\n+\n+ test('isolates Subscribe render cycles to each selected dependency', () => {\n+ const ownerRenderCaptor = vi.fn()\n+ const selectedRowRenderCaptor = vi.fn<(selected: boolean) => void>()\n+ const selectionAtomRenderCaptor =\n+ vi.fn<(state: RowSelectionState) => void>()\n+ const pageSizeRenderCaptor = vi.fn<(pageSize: number) => void>()\n+\n+ function TableHarness() {\n+ ownerRenderCaptor()\n+ const table = useTable(\n+ {\n+ data: [{ id: '1', title: 'Title' }],\n+ features: stockFeatures,\n+ columns,\n+ getRowId: (row) => row.id,\n+ },\n+ () => null,\n+ )\n+\n+ return (\n+ <>\n+ Boolean(state.rowSelection['1'])}\n+ >\n+ {(selected) => {\n+ selectedRowRenderCaptor(selected)\n+ return (\n+ \n+ {String(selected)}\n+ \n+ )\n+ }}\n+ \n+ \n+ {(selection) => {\n+ selectionAtomRenderCaptor(selection)\n+ return (\n+ \n+ {JSON.stringify(selection)}\n+ \n+ )\n+ }}\n+ \n+ state.pagination.pageSize}>\n+ {(pageSize) => {\n+ pageSizeRenderCaptor(pageSize)\n+ return (\n+ {pageSize}\n+ )\n+ }}\n+ \n+ \n+ \n+ \n+ \n+ )\n+ }\n+\n+ render()\n+\n+ expect(ownerRenderCaptor).toHaveBeenCalledTimes(1)\n+ expect(selectedRowRenderCaptor.mock.calls).toEqual([[false]])\n+ expect(selectionAtomRenderCaptor.mock.calls).toEqual([[{}]])\n+ expect(pageSizeRenderCaptor.mock.calls).toEqual([[10]])\n+\n+ act(() => {\n+ click('Select first row')\n+ })\n+\n+ expect(text('Selected row value')).toBe('true')\n+ expect(text('Selection atom value')).toBe('{\"1\":true}')\n+ expect(text('Subscribed page size')).toBe('10')\n+ expect(ownerRenderCaptor).toHaveBeenCalledTimes(1)\n+ expect(selectedRowRenderCaptor.mock.calls).toEqual([[false], [true]])\n+ expect(selectionAtomRenderCaptor.mock.calls).toEqual([[{}], [{ 1: true }]])\n+ expect(pageSizeRenderCaptor.mock.calls).toEqual([[10]])\n+\n+ act(() => {\n+ click('Select second row too')\n+ })\n+\n+ expect(text('Selected row value')).toBe('true')\n+ expect(text('Selection atom value')).toBe('{\"1\":true,\"2\":true}')\n+ expect(ownerRenderCaptor).toHaveBeenCalledTimes(1)\n+ expect(selectedRowRenderCaptor).toHaveBeenCalledTimes(2)\n+ expect(selectionAtomRenderCaptor.mock.calls).toEqual([\n+ [{}],\n+ [{ 1: true }],\n+ [{ 1: true, 2: true }],\n+ ])\n+ expect(pageSizeRenderCaptor).toHaveBeenCalledTimes(1)\n+\n+ act(() => {\n+ click('Set page size to 20')\n+ })\n+\n+ expect(text('Subscribed page size')).toBe('20')\n+ expect(ownerRenderCaptor).toHaveBeenCalledTimes(1)\n+ expect(selectedRowRenderCaptor).toHaveBeenCalledTimes(2)\n+ expect(selectionAtomRenderCaptor).toHaveBeenCalledTimes(3)\n+ expect(pageSizeRenderCaptor.mock.calls).toEqual([[10], [20]])\n+\n+ act(() => {\n+ click('Select second row too')\n+ click('Set page size to 20')\n+ })\n+\n+ expect(ownerRenderCaptor).toHaveBeenCalledTimes(1)\n+ expect(selectedRowRenderCaptor).toHaveBeenCalledTimes(2)\n+ expect(selectionAtomRenderCaptor).toHaveBeenCalledTimes(3)\n+ expect(pageSizeRenderCaptor).toHaveBeenCalledTimes(2)\n+ })\n+\n+ test('stops root and isolated Preact observers after unmount', () => {\n+ const rowSelectionAtom = createAtom({})\n+ const rootStoreSelectorCaptor = vi.fn()\n+ const isolatedStoreCaptor = vi.fn()\n+ const captureTable =\n+ vi.fn<(table: PreactTable) => void>()\n+\n+ function TableHarness() {\n+ const table = useTable(\n+ {\n+ data: [{ id: '1', title: 'Title' }],\n+ features: stockFeatures,\n+ columns,\n+ getRowId: (row) => row.id,\n+ atoms: {\n+ rowSelection: rowSelectionAtom,\n+ },\n+ },\n+ (state) => {\n+ rootStoreSelectorCaptor({\n+ rowSelection: state.rowSelection,\n+ pageSize: state.pagination.pageSize,\n+ })\n+ return Boolean(state.rowSelection['1'])\n+ },\n+ )\n+\n+ useLayoutEffect(() => {\n+ captureTable(table)\n+ }, [table])\n+\n+ return (\n+ ({\n+ selected: Boolean(state.rowSelection['1']),\n+ pageSize: state.pagination.pageSize,\n+ })}\n+ >\n+ {(snapshot) => {\n+ isolatedStoreCaptor(snapshot)\n+ return (\n+ \n+ {String(snapshot.selected)}\n+ \n+ )\n+ }}\n+ \n+ )\n+ }\n+\n+ const view = render()\n+\n+ act(() => {\n+ rowSelectionAtom.set({ 1: true })\n+ })\n+\n+ expect(text('Lifecycle selection')).toBe('true')\n+\n+ view.unmount()\n+\n+ const rootCallsAfterUnmount = rootStoreSelectorCaptor.mock.calls.length\n+ const isolatedCallsAfterUnmount = isolatedStoreCaptor.mock.calls.length\n+ const table = captureTable.mock.lastCall![0]\n+\n+ act(() => {\n+ rowSelectionAtom.set({})\n+ table.setPageSize(25)\n+ })\n+\n+ expect(rootStoreSelectorCaptor).toHaveBeenCalledTimes(rootCallsAfterUnmount)\n+ expect(isolatedStoreCaptor).toHaveBeenCalledTimes(isolatedCallsAfterUnmount)\n+ })\n+\n+ test('refreshes data, columns, and table options together on the next render', async () => {\n+ type DynamicData = {\n+ id: string\n+ alternateId: string\n+ title: string\n+ status: string\n+ }\n+\n+ const initialColumns: Array> =\n+ [\n+ { id: 'title', header: 'Title', accessorKey: 'title' },\n+ { id: 'missing', header: 'Missing', accessorFn: () => undefined },\n+ ]\n+ const updatedColumns: Array> =\n+ [\n+ { id: 'status', header: 'Status', accessorKey: 'status' },\n+ { id: 'missing', header: 'Absent', accessorFn: () => undefined },\n+ ]\n+ const initialData: Array = [\n+ {\n+ id: '1',\n+ alternateId: 'alternate-1',\n+ title: 'Alpha',\n+ status: 'draft',\n+ },\n+ ]\n+ const updatedData: Array = [\n+ {\n+ id: '2',\n+ alternateId: 'alternate-2',\n+ title: 'Beta',\n+ status: 'ready',\n+ },\n+ ]\n+ const renderCaptor = vi.fn<(version: number) => void>()\n+\n+ function TableHarness() {\n+ const [version, setVersion] = useState(0)\n+ const isUpdated = version === 1\n+ const table = useTable({\n+ data: isUpdated ? updatedData : initialData,\n+ features: stockFeatures,\n+ columns: isUpdated ? updatedColumns : initialColumns,\n+ getRowId: isUpdated ? (row) => row.alternateId : (row) => row.id,\n+ renderFallbackValue: isUpdated\n+ ? 'updated fallback'\n+ : 'initial fallback',\n+ autoResetAll: false,\n+ })\n+ const row = table.getRowModel().rows[0]!\n+ const cells = row.getAllCells()\n+\n+ renderCaptor(version)\n+\n+ return (\n+ <>\n+ {row.id}\n+ \n+ {table\n+ .getAllLeafColumns()\n+ .map((column) => column.id)\n+ .join(',')}\n+ \n+ \n+ {table\n+ .getAllLeafColumns()\n+ .map((column) => column.columnDef.header)\n+ .join(',')}\n+ \n+ \n+ {String(cells[0]!.getValue())}\n+ \n+ \n+ {String(cells[1]!.renderValue())}\n+ \n+ \n+ \n+ )\n+ }\n+\n+ render()\n+\n+ expect(text('Dynamic row ID')).toBe('1')\n+ expect(text('Dynamic column IDs')).toBe('title,missing')\n+ expect(text('Dynamic headers')).toBe('Title,Missing')\n+ expect(text('Dynamic cell value')).toBe('Alpha')\n+ expect(text('Dynamic fallback')).toBe('initial fallback')\n+\n+ await act(async () => {\n+ click('Refresh options')\n+ await Promise.resolve()\n+ })\n+\n+ expect(text('Dynamic row ID')).toBe('alternate-2')\n+ expect(text('Dynamic column IDs')).toBe('status,missing')\n+ expect(text('Dynamic headers')).toBe('Status,Absent')\n+ expect(text('Dynamic cell value')).toBe('ready')\n+ expect(text('Dynamic fallback')).toBe('updated fallback')\n+ expect(renderCaptor.mock.calls).toEqual([[0], [1]])\n+ })\n+\n+ test('table APIs use the latest option callback', () => {\n+ const firstHandler = vi.fn>()\n+ const secondHandler = vi.fn>()\n+\n+ function CallbackHarness() {\n+ const [useSecondHandler, setUseSecondHandler] = useState(false)\n+ const table = useTable(\n+ {\n+ data: [{ id: '1', title: 'Title' }],\n+ features: stockFeatures,\n+ columns,\n+ getRowId: (row) => row.id,\n+ onRowSelectionChange: useSecondHandler ? secondHandler : firstHandler,\n+ },\n+ () => null,\n+ )\n+\n+ return (\n+ <>\n+ \n+ {useSecondHandler ? 'second' : 'first'}\n+ \n+ \n+ \n+ \n+ )\n+ }\n+\n+ render()\n+\n+ act(() => {\n+ click('Request row selection')\n+ })\n+\n+ expect(firstHandler).toHaveBeenCalledTimes(1)\n+ expect(secondHandler).not.toHaveBeenCalled()\n+\n+ act(() => {\n+ click('Use second selection handler')\n+ })\n+\n+ expect(text('Active selection handler')).toBe('second')\n+\n+ act(() => {\n+ click('Request row selection')\n+ })\n+\n+ expect(firstHandler).toHaveBeenCalledTimes(1)\n+ expect(secondHandler).toHaveBeenCalledTimes(1)\n+ })\n+})\ndiff --git a/packages/preact-table/tests/unit/createTableHook.test.tsx b/packages/preact-table/tests/unit/createTableHook.test.tsx\nnew file mode 100644\nindex 0000000000..fc4914a364\n--- /dev/null\n+++ b/packages/preact-table/tests/unit/createTableHook.test.tsx\n@@ -0,0 +1,247 @@\n+// @vitest-environment jsdom\n+\n+import { cleanup, fireEvent, render, screen } from '@testing-library/preact'\n+import { useEffect, useState } from 'preact/hooks'\n+import { act } from 'preact/test-utils'\n+import { rowSelectionFeature, tableFeatures } from '@tanstack/table-core'\n+import { afterEach, describe, expect, test, vi } from 'vitest'\n+import { createTableHook, createTableHookContexts } from '../../src'\n+\n+type Person = {\n+ id: string\n+ name: string\n+}\n+\n+const features = tableFeatures({\n+ rowSelectionFeature,\n+})\n+const contexts = createTableHookContexts()\n+\n+function RowCount() {\n+ const table = contexts.useTableContext()\n+\n+ return (\n+ \n+ {table.getRowModel().rows.length}\n+ \n+ )\n+}\n+\n+function NameCell() {\n+ const cell = contexts.useCellContext()\n+\n+ return {cell.getValue().toUpperCase()}\n+}\n+\n+function NameHeader() {\n+ const header = contexts.useHeaderContext()\n+\n+ return Header {header.column.id}\n+}\n+\n+const appTable = createTableHook({\n+ features,\n+ tableContext: contexts.tableContext,\n+ cellContext: contexts.cellContext,\n+ headerContext: contexts.headerContext,\n+ tableComponents: { RowCount },\n+ cellComponents: { NameCell },\n+ headerComponents: { NameHeader },\n+})\n+const columnHelper = appTable.createAppColumnHelper()\n+const columns = columnHelper.columns([\n+ columnHelper.accessor('name', {\n+ id: 'name',\n+ header: ({ header }) => ,\n+ cell: ({ cell }) => ,\n+ footer: 'Name footer',\n+ }),\n+])\n+\n+function outputText(name: string) {\n+ return screen.getByRole('status', { name }).textContent\n+}\n+\n+function click(name: string) {\n+ fireEvent.click(screen.getByRole('button', { name }))\n+}\n+\n+afterEach(() => {\n+ cleanup()\n+ vi.restoreAllMocks()\n+})\n+\n+describe('createTableHook runtime', () => {\n+ test('binds components, contexts, FlexRender, and state selectors', () => {\n+ function TableHarness() {\n+ const table = appTable.useAppTable(\n+ {\n+ data: [{ id: '1', name: 'Ada' }],\n+ columns,\n+ getRowId: (row) => row.id,\n+ },\n+ () => null,\n+ )\n+ const header = table.getHeaderGroups()[0]!.headers[0]!\n+ const cell = table.getRowModel().rows[0]!.getAllCells()[0]!\n+\n+ return (\n+ Object.keys(state.rowSelection).length}\n+ >\n+ {(selectedCount) => (\n+ <>\n+ \n+ {selectedCount}\n+ \n+ {(extendedHeader) => }\n+ \n+ Boolean(state.rowSelection[cell.row.id])}\n+ >\n+ {(extendedCell, selected) => (\n+ <>\n+ \n+ \n+ {String(selected)}\n+ \n+ \n+ )}\n+ \n+ \n+ {(extendedFooter) => }\n+ \n+ \n+ \n+ )}\n+ \n+ )\n+ }\n+\n+ render()\n+\n+ expect(outputText('Bound row count')).toBe('1')\n+ expect(screen.getByText('Header name')).toBeTruthy()\n+ expect(screen.getByText('ADA')).toBeTruthy()\n+ expect(screen.getByText('Name footer')).toBeTruthy()\n+ expect(outputText('App table selection')).toBe('0')\n+ expect(outputText('App cell selection')).toBe('false')\n+\n+ act(() => {\n+ click('Select app row')\n+ })\n+\n+ expect(outputText('App table selection')).toBe('1')\n+ expect(outputText('App cell selection')).toBe('true')\n+ })\n+\n+ test('keeps App wrappers mounted while contexts receive new table objects', () => {\n+ const mountCaptor = vi.fn()\n+ const unmountCaptor = vi.fn()\n+\n+ function StatefulCell() {\n+ const cell = appTable.useCellContext()\n+ const [draft, setDraft] = useState('initial')\n+\n+ useEffect(() => {\n+ mountCaptor()\n+ return () => unmountCaptor()\n+ }, [])\n+\n+ return (\n+ <>\n+ Cell draft\n+ setDraft(event.currentTarget.value)}\n+ />\n+ {cell.getValue()}\n+ \n+ )\n+ }\n+\n+ function TableHarness() {\n+ const [updated, setUpdated] = useState(false)\n+ const table = appTable.useAppTable(\n+ {\n+ data: [{ id: '1', name: updated ? 'Grace' : 'Ada' }],\n+ columns,\n+ getRowId: (row) => row.id,\n+ },\n+ () => null,\n+ )\n+ const header = table.getHeaderGroups()[0]!.headers[0]!\n+ const cell = table.getRowModel().rows[0]!.getAllCells()[0]!\n+\n+ return (\n+ <>\n+ \n+ \n+ {() => (\n+ \n+ {() => (\n+ \n+ {() => }\n+ \n+ )}\n+ \n+ )}\n+ \n+ \n+ \n+ \n+ )\n+ }\n+\n+ render()\n+\n+ const input = screen.getByRole('textbox', { name: 'Cell draft' })\n+ fireEvent.input(input, { target: { value: 'edited' } })\n+\n+ expect(outputText('Latest cell value')).toBe('Ada')\n+ expect(mountCaptor).toHaveBeenCalledOnce()\n+\n+ act(() => {\n+ click('Refresh app table')\n+ })\n+\n+ expect(screen.getByRole('textbox', { name: 'Cell draft' })).toBe(input)\n+ expect((input as HTMLInputElement).value).toBe('edited')\n+ expect(outputText('Latest cell value')).toBe('Grace')\n+ expect(mountCaptor).toHaveBeenCalledOnce()\n+ expect(unmountCaptor).not.toHaveBeenCalled()\n+ })\n+\n+ test('throws focused errors when context hooks are used outside wrappers', () => {\n+ function MissingTableContext() {\n+ appTable.useTableContext()\n+ return null\n+ }\n+\n+ function MissingCellContext() {\n+ appTable.useCellContext()\n+ return null\n+ }\n+\n+ function MissingHeaderContext() {\n+ appTable.useHeaderContext()\n+ return null\n+ }\n+\n+ expect(() => render()).toThrow(\n+ '`useTableContext` must be used within an `AppTable` component',\n+ )\n+ cleanup()\n+ expect(() => render()).toThrow(\n+ '`useCellContext` must be used within an `AppCell` component',\n+ )\n+ cleanup()\n+ expect(() => render()).toThrow(\n+ '`useHeaderContext` must be used within an `AppHeader` or `AppFooter` component',\n+ )\n+ })\n+})\ndiff --git a/packages/preact-table/tests/unit/rendering.test.tsx b/packages/preact-table/tests/unit/rendering.test.tsx\nnew file mode 100644\nindex 0000000000..ac63526617\n--- /dev/null\n+++ b/packages/preact-table/tests/unit/rendering.test.tsx\n@@ -0,0 +1,232 @@\n+// @vitest-environment jsdom\n+\n+import { cleanup, fireEvent, render, screen } from '@testing-library/preact'\n+import { useState } from 'preact/hooks'\n+import { act } from 'preact/test-utils'\n+import { stockFeatures } from '@tanstack/table-core'\n+import { afterEach, describe, expect, test, vi } from 'vitest'\n+import { FlexRender, useTable } from '../../src'\n+import type { ColumnDef } from '@tanstack/table-core'\n+\n+afterEach(() => {\n+ cleanup()\n+ vi.restoreAllMocks()\n+})\n+\n+function outputText(name: string) {\n+ return screen.getByRole('status', { name }).textContent\n+}\n+\n+describe('FlexRender', () => {\n+ type Data = { id: string; name: string }\n+ type CellMode = 'aggregate' | 'normal' | 'placeholder'\n+\n+ const columns: Array> = [\n+ {\n+ id: 'name',\n+ accessorKey: 'name',\n+ header: ({ column }) => {`header:${column.id}`},\n+ cell: ({ getValue }) => {`cell:${String(getValue())}`},\n+ aggregatedCell: ({ getValue }) => (\n+ {`aggregate:${String(getValue())}`}\n+ ),\n+ footer: ({ column }) => {`footer:${column.id}`},\n+ },\n+ ]\n+\n+ function CellHarness({ mode }: { mode: CellMode }) {\n+ const table = useTable({\n+ data: [{ id: '1', name: 'Ada' }],\n+ columns,\n+ features: stockFeatures,\n+ getRowId: (row) => row.id,\n+ })\n+ const cell = table.getRowModel().rows[0]!.getAllCells()[0]!\n+\n+ if (mode === 'aggregate') {\n+ vi.spyOn(cell, 'getIsAggregated').mockReturnValue(true)\n+ }\n+\n+ if (mode === 'placeholder') {\n+ vi.spyOn(cell, 'getIsAggregated').mockReturnValue(false)\n+ vi.spyOn(cell, 'getIsPlaceholder').mockReturnValue(true)\n+ }\n+\n+ return (\n+ \n+ \n+ \n+ )\n+ }\n+\n+ function HeaderFooterHarness() {\n+ const table = useTable({\n+ data: [{ id: '1', name: 'Ada' }],\n+ columns,\n+ features: stockFeatures,\n+ getRowId: (row) => row.id,\n+ })\n+ const header = table.getHeaderGroups()[0]!.headers[0]!\n+ const footer = table.getFooterGroups()[0]!.headers[0]!\n+\n+ return (\n+ <>\n+ \n+ \n+ \n+ \n+ \n+ \n+ \n+ )\n+ }\n+\n+ test('renders normal, aggregate, placeholder, header, and footer content', () => {\n+ render(\n+ <>\n+ \n+ \n+ \n+ \n+ ,\n+ )\n+\n+ expect(outputText('normal cell')).toBe('cell:Ada')\n+ expect(outputText('aggregate cell')).toBe('aggregate:Ada')\n+ expect(outputText('placeholder cell')).toBe('')\n+ expect(outputText('Rendered header')).toBe('header:name')\n+ expect(outputText('Rendered footer')).toBe('footer:name')\n+ })\n+\n+ test('reacts when a stable cell changes grouping mode', () => {\n+ function GroupingCellHarness() {\n+ const [mode, setMode] = useState('normal')\n+ const table = useTable({\n+ data: [{ id: '1', name: 'Ada' }],\n+ columns,\n+ features: stockFeatures,\n+ getRowId: (row) => row.id,\n+ })\n+ const cell = table.getRowModel().rows[0]!.getAllCells()[0]!\n+\n+ vi.spyOn(cell, 'getIsAggregated').mockImplementation(\n+ () => mode === 'aggregate',\n+ )\n+ vi.spyOn(cell, 'getIsPlaceholder').mockImplementation(\n+ () => mode === 'placeholder',\n+ )\n+\n+ return (\n+ <>\n+ \n+ \n+ \n+ \n+ \n+ \n+ \n+ )\n+ }\n+\n+ render()\n+\n+ expect(outputText('Grouping cell')).toBe('cell:Ada')\n+\n+ act(() => {\n+ fireEvent.click(screen.getByRole('button', { name: 'Show aggregate' }))\n+ })\n+ expect(outputText('Grouping cell')).toBe('aggregate:Ada')\n+\n+ act(() => {\n+ fireEvent.click(screen.getByRole('button', { name: 'Show placeholder' }))\n+ })\n+ expect(outputText('Grouping cell')).toBe('')\n+\n+ act(() => {\n+ fireEvent.click(screen.getByRole('button', { name: 'Show normal' }))\n+ })\n+ expect(outputText('Grouping cell')).toBe('cell:Ada')\n+ })\n+\n+ test('updates when the cell prop is replaced with a new instance', () => {\n+ function CellReplacementHarness() {\n+ const [data, setData] = useState>([{ id: '1', name: 'Ada' }])\n+ const table = useTable({\n+ data,\n+ columns,\n+ features: stockFeatures,\n+ getRowId: (row) => row.id,\n+ })\n+ const cell = table.getRowModel().rows[0]!.getAllCells()[0]!\n+\n+ return (\n+ <>\n+ \n+ \n+ \n+ \n+ \n+ )\n+ }\n+\n+ render()\n+\n+ expect(outputText('Replaced cell')).toBe('cell:Ada')\n+\n+ act(() => {\n+ fireEvent.click(screen.getByRole('button', { name: 'Replace cell' }))\n+ })\n+\n+ expect(outputText('Replaced cell')).toBe('cell:Grace')\n+ })\n+})\n+\n+describe('table.Subscribe', () => {\n+ test('updates mounted content for the selected atom slice', () => {\n+ function SubscribeHarness() {\n+ const table = useTable(\n+ {\n+ data: [{ id: '1' }],\n+ columns: [{ id: 'id', accessorKey: 'id' }],\n+ features: stockFeatures,\n+ getRowId: (row) => row.id,\n+ },\n+ () => null,\n+ )\n+\n+ return (\n+ <>\n+ Boolean(selection['1'])}\n+ >\n+ {(selected) => (\n+ \n+ {String(selected)}\n+ \n+ )}\n+ \n+ \n+ \n+ )\n+ }\n+\n+ render()\n+\n+ expect(outputText('Subscribed selection')).toBe('false')\n+\n+ act(() => {\n+ fireEvent.click(\n+ screen.getByRole('button', { name: 'Select subscribed row' }),\n+ )\n+ })\n+\n+ expect(outputText('Subscribed selection')).toBe('true')\n+ })\n+})\ndiff --git a/packages/preact-table/tests/unit/ssr.test.tsx b/packages/preact-table/tests/unit/ssr.test.tsx\nnew file mode 100644\nindex 0000000000..55970f78a6\n--- /dev/null\n+++ b/packages/preact-table/tests/unit/ssr.test.tsx\n@@ -0,0 +1,164 @@\n+// @vitest-environment node\n+\n+import { forwardRef, memo } from 'preact/compat'\n+import { renderToString } from 'preact-render-to-string'\n+import { describe, expect, test, vi } from 'vitest'\n+import { flexRender, stockFeatures, useTable } from '../../src'\n+import type { ColumnDef } from '../../src'\n+\n+type Person = {\n+ id: string\n+ name: string\n+}\n+\n+const columns: Array> = [\n+ {\n+ id: 'name',\n+ accessorKey: 'name',\n+ header: ({ column }) => {`Header ${column.id}`},\n+ cell: ({ getValue }) => {`Cell ${String(getValue())}`},\n+ aggregatedCell: ({ getValue }) => (\n+ {`Aggregate ${String(getValue())}`}\n+ ),\n+ footer: 'Name footer',\n+ },\n+]\n+\n+describe('Preact server rendering', () => {\n+ test('renders useTable state and FlexRender output without a DOM', () => {\n+ function ServerTable() {\n+ const table = useTable({\n+ data: [{ id: '1', name: 'Ada' }],\n+ features: stockFeatures,\n+ columns,\n+ getRowId: (row) => row.id,\n+ initialState: {\n+ pagination: {\n+ pageIndex: 0,\n+ pageSize: 25,\n+ },\n+ },\n+ })\n+ const header = table.getHeaderGroups()[0]!.headers[0]!\n+ const cell = table.getRowModel().rows[0]!.getAllCells()[0]!\n+\n+ return (\n+ \n+ \n+ \n+ \n+ \n+ \n+ \n+ \n+ \n+ \n+ \n+ \n+ \n+ \n+ \n+ \n+

\n+ \n+
\n+ \n+
\n+ \n+

\n+ )\n+ }\n+\n+ expect(typeof document).toBe('undefined')\n+\n+ const markup = renderToString()\n+\n+ expect(markup).toContain('data-page-size=\"25\"')\n+ expect(markup).toContain('Header name')\n+ expect(markup).toContain('Cell Ada')\n+ expect(markup).toContain('Name footer')\n+ })\n+\n+ test('selects aggregate content and suppresses placeholder cells', () => {\n+ function CellModes() {\n+ const table = useTable({\n+ data: [\n+ { id: '1', name: 'Ada' },\n+ { id: '2', name: 'Grace' },\n+ ],\n+ features: stockFeatures,\n+ columns,\n+ getRowId: (row) => row.id,\n+ })\n+ const aggregatedCell = table.getRow('1').getAllCells()[0]!\n+ const placeholderCell = table.getRow('2').getAllCells()[0]!\n+\n+ vi.spyOn(aggregatedCell, 'getIsAggregated').mockReturnValue(true)\n+ vi.spyOn(placeholderCell, 'getIsAggregated').mockReturnValue(false)\n+ vi.spyOn(placeholderCell, 'getIsPlaceholder').mockReturnValue(true)\n+\n+ return (\n+ <>\n+

\n+ \n+

\n+

\n+ \n+

\n+ \n+ )\n+ }\n+\n+ expect(renderToString()).toBe(\n+ '

Aggregate Ada

' +\n+ '

',\n+ )\n+ })\n+\n+ test('flexRender handles functions, exotic components, nodes, zero, and empty values', () => {\n+ function FunctionRenderable({ value }: { value: string }) {\n+ return {value}\n+ }\n+\n+ const MemoRenderable = memo(function MemoRenderable({\n+ value,\n+ }: {\n+ value: string\n+ }) {\n+ return {value}\n+ })\n+ const ForwardRefRenderable = forwardRef(\n+ function ForwardRefRenderable({ value }, ref) {\n+ return (\n+ \n+ {value}\n+ \n+ )\n+ },\n+ )\n+\n+ const markup = renderToString(\n+ <>\n+ {flexRender(FunctionRenderable, { value: 'function value' })}\n+ {flexRender(MemoRenderable, { value: 'memo value' })}\n+ {flexRender(ForwardRefRenderable, { value: 'forward value' })}\n+ {flexRender(node value, {\n+ value: 'ignored',\n+ })}\n+ {flexRender(0, { value: 'ignored' })}\n+ ,\n+ )\n+\n+ expect(markup).toBe(\n+ 'function value' +\n+ 'memo value' +\n+ 'forward value' +\n+ 'node value' +\n+ '0',\n+ )\n+ expect(flexRender(0, {})).toBe(0)\n+ expect(flexRender(false, {})).toBe(false)\n+ expect(flexRender('', {})).toBe('')\n+ expect(flexRender(null, {})).toBeNull()\n+ })\n+})\ndiff --git a/packages/preact-table/tests/unit/useTable.test.tsx b/packages/preact-table/tests/unit/useTable.test.tsx\nindex 08a07f89f5..853644f9a8 100644\n--- a/packages/preact-table/tests/unit/useTable.test.tsx\n+++ b/packages/preact-table/tests/unit/useTable.test.tsx\n@@ -1,4 +1,4 @@\n-import { render } from 'preact'\n+import { cleanup, fireEvent, render, screen } from '@testing-library/preact'\n import { useState } from 'preact/hooks'\n import { act } from 'preact/test-utils'\n import {\n@@ -6,7 +6,8 @@ import {\n rowPaginationFeature,\n tableFeatures,\n } from '@tanstack/table-core'\n-import { afterEach, describe, expect, it } from 'vitest'\n+import { createAtom } from '@tanstack/preact-store'\n+import { afterEach, describe, expect, it, vi } from 'vitest'\n import { useTable } from '../../src/useTable'\n import type { ColumnDef, PaginationState } from '@tanstack/table-core'\n import type { PreactTable } from '../../src/useTable'\n@@ -25,32 +26,17 @@ const data: ReadonlyArray = Array.from({ length: 100 }, (_, id) => ({\n }))\n const columns: ReadonlyArray> = []\n \n-let container: HTMLDivElement | undefined\n-\n-function mount(ui: preact.ComponentChildren) {\n- container = document.createElement('div')\n- document.body.append(container)\n- act(() => {\n- render(ui as any, container!)\n- })\n+function text(name: string) {\n+ return screen.getByRole('status', { name }).textContent\n }\n \n-function clickButton() {\n- container?.querySelector('button')?.dispatchEvent(\n- new MouseEvent('click', {\n- bubbles: true,\n- }),\n- )\n+function clickButton(name = 'Next page') {\n+ fireEvent.click(screen.getByRole('button', { name }))\n }\n \n afterEach(() => {\n- if (container) {\n- act(() => {\n- render(null, container!)\n- })\n- container.remove()\n- container = undefined\n- }\n+ cleanup()\n+ vi.restoreAllMocks()\n })\n \n describe('useTable controlled state', () => {\n@@ -92,7 +78,7 @@ describe('useTable controlled state', () => {\n return \n }\n \n- mount()\n+ render()\n expect(renderSnapshots).toHaveLength(1)\n \n act(() => {\n@@ -172,7 +158,7 @@ describe('useTable controlled state', () => {\n return \n }\n \n- mount()\n+ render()\n \n const notifications: Array = []\n const subscription = latestTable!.store.subscribe((state) => {\n@@ -205,18 +191,305 @@ describe('useTable controlled state', () => {\n (state) => state.pagination.pageIndex,\n )\n \n- return \n+ return (\n+ <>\n+ {table.state}\n+ \n+ \n+ )\n }\n \n- mount()\n+ render()\n expect(harnessRenderCount).toBe(1)\n- expect(container?.querySelector('button')?.textContent).toBe('0')\n+ expect(text('Uncontrolled page index')).toBe('0')\n \n act(() => {\n clickButton()\n })\n \n expect(harnessRenderCount).toBe(2)\n- expect(container?.querySelector('button')?.textContent).toBe('1')\n+ expect(text('Uncontrolled page index')).toBe('1')\n+ })\n+\n+ it('releases and reacquires ownership when the controlled slice is omitted', () => {\n+ let harnessRenderCount = 0\n+\n+ function OwnershipHarness() {\n+ harnessRenderCount++\n+ const [controlled, setControlled] = useState(true)\n+ const [pagination] = useState({\n+ pageIndex: 5,\n+ pageSize: 10,\n+ })\n+ const table = useTable(\n+ {\n+ features,\n+ columns,\n+ data,\n+ state: controlled ? { pagination } : {},\n+ },\n+ (state) => state.pagination,\n+ )\n+\n+ return (\n+ <>\n+ \n+ {table.state.pageIndex}\n+ \n+ \n+ \n+ \n+ )\n+ }\n+\n+ render()\n+\n+ expect(text('Ownership page index')).toBe('5')\n+ expect(harnessRenderCount).toBe(1)\n+\n+ act(() => {\n+ clickButton('Toggle ownership')\n+ })\n+\n+ expect(text('Ownership page index')).toBe('5')\n+ expect(harnessRenderCount).toBe(2)\n+\n+ act(() => {\n+ clickButton()\n+ })\n+\n+ expect(text('Ownership page index')).toBe('6')\n+ expect(harnessRenderCount).toBe(3)\n+\n+ act(() => {\n+ clickButton('Toggle ownership')\n+ })\n+\n+ expect(text('Ownership page index')).toBe('5')\n+ expect(harnessRenderCount).toBe(4)\n+\n+ act(() => {\n+ clickButton()\n+ })\n+\n+ expect(text('Ownership page index')).toBe('5')\n+ expect(harnessRenderCount).toBe(4)\n+ })\n+\n+ it('invalidates an isolated subscriber when the controlled slice is omitted', () => {\n+ function OwnershipReleaseHarness() {\n+ const [controlled, setControlled] = useState(true)\n+ const [pagination] = useState({\n+ pageIndex: 5,\n+ pageSize: 10,\n+ })\n+ const table = useTable(\n+ {\n+ features,\n+ columns,\n+ data,\n+ state: controlled ? { pagination } : {},\n+ },\n+ () => null,\n+ )\n+\n+ return (\n+ <>\n+ state.pagination.pageIndex}>\n+ {(pageIndex) => (\n+ {pageIndex}\n+ )}\n+ \n+ \n+ \n+ \n+ )\n+ }\n+\n+ render()\n+\n+ expect(text('Isolated page index')).toBe('5')\n+\n+ act(() => {\n+ clickButton('Change base')\n+ })\n+\n+ expect(text('Isolated page index')).toBe('5')\n+\n+ act(() => {\n+ clickButton('Release control')\n+ })\n+\n+ expect(text('Isolated page index')).toBe('6')\n+ })\n+\n+ it('gives an external atom precedence over controlled state and writes back to it', () => {\n+ const paginationAtom = createAtom({\n+ pageIndex: 3,\n+ pageSize: 10,\n+ })\n+\n+ function ExternalAtomHarness() {\n+ const [pagination, setPagination] = useState({\n+ pageIndex: 0,\n+ pageSize: 10,\n+ })\n+ const table = useTable(\n+ {\n+ features,\n+ columns,\n+ data,\n+ state: { pagination },\n+ atoms: {\n+ pagination: paginationAtom,\n+ },\n+ },\n+ (state) => state.pagination.pageIndex,\n+ )\n+\n+ return (\n+ <>\n+ {table.state}\n+ \n+ setPagination({\n+ pageIndex: 7,\n+ pageSize: 10,\n+ })\n+ }\n+ >\n+ Change controlled page\n+ \n+ \n+ \n+ )\n+ }\n+\n+ render()\n+\n+ expect(text('External page index')).toBe('3')\n+\n+ act(() => {\n+ clickButton('Change controlled page')\n+ })\n+\n+ expect(text('External page index')).toBe('3')\n+ expect(paginationAtom.get().pageIndex).toBe(3)\n+\n+ act(() => {\n+ clickButton()\n+ })\n+\n+ expect(paginationAtom.get().pageIndex).toBe(4)\n+ expect(text('External page index')).toBe('4')\n+ })\n+\n+ it('keeps the owner stable when an update misses its selected slice', () => {\n+ let harnessRenderCount = 0\n+\n+ function SelectedPageIndexHarness() {\n+ harnessRenderCount++\n+ const table = useTable(\n+ {\n+ features,\n+ columns,\n+ data,\n+ },\n+ (state) => state.pagination.pageIndex,\n+ )\n+\n+ return (\n+ <>\n+ {table.state}\n+ state.pagination.pageSize}>\n+ {(pageSize) => (\n+ {pageSize}\n+ )}\n+ \n+ \n+ \n+ \n+ )\n+ }\n+\n+ render()\n+\n+ expect(harnessRenderCount).toBe(1)\n+ expect(text('Selected page index')).toBe('0')\n+ expect(text('Isolated page size')).toBe('10')\n+\n+ act(() => {\n+ clickButton('Set page size to 20')\n+ })\n+\n+ expect(harnessRenderCount).toBe(1)\n+ expect(text('Selected page index')).toBe('0')\n+ expect(text('Isolated page size')).toBe('20')\n+\n+ act(() => {\n+ clickButton()\n+ })\n+\n+ expect(harnessRenderCount).toBe(2)\n+ expect(text('Selected page index')).toBe('1')\n+ })\n+\n+ it('publishes the final value after rapid controlled updates', () => {\n+ function RapidUpdateHarness() {\n+ const [pagination, setPagination] = useState({\n+ pageIndex: 0,\n+ pageSize: 10,\n+ })\n+ const table = useTable(\n+ {\n+ features,\n+ columns,\n+ data,\n+ state: { pagination },\n+ onPaginationChange: setPagination,\n+ },\n+ () => null,\n+ )\n+\n+ return (\n+ <>\n+ \n+ {pagination.pageIndex}\n+ \n+ state.pagination.pageIndex}>\n+ {(pageIndex) => (\n+ \n+ {pageIndex}\n+ \n+ )}\n+ \n+ {\n+ table.nextPage()\n+ table.nextPage()\n+ table.nextPage()\n+ }}\n+ >\n+ Advance three pages\n+ \n+ \n+ )\n+ }\n+\n+ render()\n+\n+ expect(text('Controlled page index')).toBe('0')\n+ expect(text('Rapid isolated page index')).toBe('0')\n+\n+ act(() => {\n+ clickButton('Advance three pages')\n+ })\n+\n+ expect(text('Controlled page index')).toBe('3')\n+ expect(text('Rapid isolated page index')).toBe('3')\n })\n })\ndiff --git a/packages/react-table/tests/adapterReactivity.test.tsx b/packages/react-table/tests/adapterReactivity.test.tsx\nindex a2af8c9a33..3fe4e24724 100644\n--- a/packages/react-table/tests/adapterReactivity.test.tsx\n+++ b/packages/react-table/tests/adapterReactivity.test.tsx\n@@ -95,7 +95,10 @@ describe('React adapter reactivity and lifecycle', () => {\n function TableHarness() {\n const table = useTable(\n {\n- data: [{ id: '1', title: 'Title' }],\n+ data: [\n+ { id: '1', title: 'First' },\n+ { id: '2', title: 'Second' },\n+ ],\n features: stockFeatures,\n columns,\n getRowId: (row) => row.id,\n@@ -277,6 +280,125 @@ describe('React adapter reactivity and lifecycle', () => {\n expect(text('External row selection')).toBe('{}')\n })\n \n+ test('isolates Subscribe render cycles to each selected dependency', () => {\n+ const ownerRenderCaptor = vi.fn()\n+ const selectedRowRenderCaptor = vi.fn<(selected: boolean) => void>()\n+ const selectionAtomRenderCaptor =\n+ vi.fn<(state: RowSelectionState) => void>()\n+ const pageSizeRenderCaptor = vi.fn<(pageSize: number) => void>()\n+\n+ function TableHarness() {\n+ ownerRenderCaptor()\n+ const table = useTable(\n+ {\n+ data: [{ id: '1', title: 'Title' }],\n+ features: stockFeatures,\n+ columns,\n+ getRowId: (row) => row.id,\n+ },\n+ () => null,\n+ )\n+\n+ return (\n+ <>\n+ Boolean(state.rowSelection['1'])}\n+ >\n+ {(selected) => {\n+ selectedRowRenderCaptor(selected)\n+ return (\n+ \n+ {String(selected)}\n+ \n+ )\n+ }}\n+ \n+ \n+ {(selection) => {\n+ selectionAtomRenderCaptor(selection)\n+ return (\n+ \n+ {JSON.stringify(selection)}\n+ \n+ )\n+ }}\n+ \n+ state.pagination.pageSize}>\n+ {(pageSize) => {\n+ pageSizeRenderCaptor(pageSize)\n+ return (\n+ {pageSize}\n+ )\n+ }}\n+ \n+ \n+ \n+ \n+ \n+ )\n+ }\n+\n+ render()\n+\n+ expect(ownerRenderCaptor).toHaveBeenCalledTimes(1)\n+ expect(selectedRowRenderCaptor.mock.calls).toEqual([[false]])\n+ expect(selectionAtomRenderCaptor.mock.calls).toEqual([[{}]])\n+ expect(pageSizeRenderCaptor.mock.calls).toEqual([[10]])\n+\n+ act(() => {\n+ click('Select first row')\n+ })\n+\n+ expect(text('Selected row value')).toBe('true')\n+ expect(text('Selection atom value')).toBe('{\"1\":true}')\n+ expect(text('Subscribed page size')).toBe('10')\n+ expect(ownerRenderCaptor).toHaveBeenCalledTimes(1)\n+ expect(selectedRowRenderCaptor.mock.calls).toEqual([[false], [true]])\n+ expect(selectionAtomRenderCaptor.mock.calls).toEqual([[{}], [{ 1: true }]])\n+ expect(pageSizeRenderCaptor.mock.calls).toEqual([[10]])\n+\n+ act(() => {\n+ click('Select second row too')\n+ })\n+\n+ expect(text('Selected row value')).toBe('true')\n+ expect(text('Selection atom value')).toBe('{\"1\":true,\"2\":true}')\n+ expect(ownerRenderCaptor).toHaveBeenCalledTimes(1)\n+ expect(selectedRowRenderCaptor).toHaveBeenCalledTimes(2)\n+ expect(selectionAtomRenderCaptor.mock.calls).toEqual([\n+ [{}],\n+ [{ 1: true }],\n+ [{ 1: true, 2: true }],\n+ ])\n+ expect(pageSizeRenderCaptor).toHaveBeenCalledTimes(1)\n+\n+ act(() => {\n+ click('Set page size to 20')\n+ })\n+\n+ expect(text('Subscribed page size')).toBe('20')\n+ expect(ownerRenderCaptor).toHaveBeenCalledTimes(1)\n+ expect(selectedRowRenderCaptor).toHaveBeenCalledTimes(2)\n+ expect(selectionAtomRenderCaptor).toHaveBeenCalledTimes(3)\n+ expect(pageSizeRenderCaptor.mock.calls).toEqual([[10], [20]])\n+\n+ act(() => {\n+ click('Select second row too')\n+ click('Set page size to 20')\n+ })\n+\n+ expect(ownerRenderCaptor).toHaveBeenCalledTimes(1)\n+ expect(selectedRowRenderCaptor).toHaveBeenCalledTimes(2)\n+ expect(selectionAtomRenderCaptor).toHaveBeenCalledTimes(3)\n+ expect(pageSizeRenderCaptor).toHaveBeenCalledTimes(2)\n+ })\n+\n test('stops root and isolated React observers after unmount', () => {\n const rowSelectionAtom = createAtom({})\n const rootStoreSelectorCaptor = vi.fn()\ndiff --git a/packages/svelte-table/package.json b/packages/svelte-table/package.json\nindex da99bc8444..88822e4ceb 100644\n--- a/packages/svelte-table/package.json\n+++ b/packages/svelte-table/package.json\n@@ -57,7 +57,9 @@\n ],\n \"scripts\": {\n \"clean\": \"rimraf ./build && rimraf ./dist\",\n- \"test:eslint\": \"eslint ./src\",\n+ \"test:eslint\": \"eslint ./src ./tests\",\n+ \"test:lib\": \"vitest --passWithNoTests\",\n+ \"test:lib:dev\": \"pnpm test:lib --watch\",\n \"test:types\": \"svelte-check --tsconfig ./tsconfig.json\",\n \"test:build\": \"publint --strict\",\n \"build\": \"svelte-package --input ./src --output ./dist\"\n@@ -69,6 +71,7 @@\n \"devDependencies\": {\n \"@sveltejs/package\": \"^2.5.8\",\n \"@sveltejs/vite-plugin-svelte\": \"^7.1.2\",\n+ \"@testing-library/svelte\": \"^5.4.2\",\n \"eslint-plugin-svelte\": \"^3.19.0\",\n \"svelte\": \"^5.56.2\",\n \"svelte-check\": \"^4.6.0\"\ndiff --git a/packages/svelte-table/src/FlexRender.svelte b/packages/svelte-table/src/FlexRender.svelte\nindex dbe33cb15a..23ee661391 100644\n--- a/packages/svelte-table/src/FlexRender.svelte\n+++ b/packages/svelte-table/src/FlexRender.svelte\n@@ -61,8 +61,22 @@\n // or the legacy content/context props.\n const resolved = $derived.by(() => {\n if ('cell' in props && props.cell) {\n+ const columnDef = props.cell.column.columnDef\n+ const groupingCell = props.cell as typeof props.cell & {\n+ getIsAggregated?: () => boolean\n+ getIsPlaceholder?: () => boolean\n+ }\n+ const groupingColumnDef = columnDef as typeof columnDef & {\n+ aggregatedCell?: typeof columnDef.cell\n+ }\n+ const content = groupingCell.getIsAggregated?.()\n+ ? (groupingColumnDef.aggregatedCell ?? columnDef.cell)\n+ : groupingCell.getIsPlaceholder?.()\n+ ? undefined\n+ : columnDef.cell\n+\n return {\n- content: props.cell.column.columnDef.cell,\n+ content,\n context: props.cell.getContext(),\n }\n }\ndiff --git a/packages/svelte-table/src/createTable.svelte.ts b/packages/svelte-table/src/createTable.svelte.ts\nindex 5751493a58..068352daaa 100644\n--- a/packages/svelte-table/src/createTable.svelte.ts\n+++ b/packages/svelte-table/src/createTable.svelte.ts\n@@ -101,22 +101,23 @@ export function createTable<\n // inside createTableState), the effect re-runs and calls setOptions.\n // Use $effect.pre so the table sees updated options BEFORE the DOM renders,\n // ensuring getRowModel() returns current data (not stale, one-frame-behind data).\n- // The reactive reads (state getters, data getter) happen OUTSIDE untrack\n- // so they become dependencies. The setOptions call is INSIDE untrack so\n- // option writes do not subscribe this effect to table internals.\n+ // Reactive option getters and nested state keys are read OUTSIDE untrack so\n+ // they become dependencies. The setOptions call is INSIDE untrack so option\n+ // writes do not subscribe this effect to table internals.\n $effect.pre(() => {\n- // Read reactive getters to create $effect dependencies on external state\n- const state: Record | undefined = mergedOptions.state\n+ // Resolve every option outside untrack so getter-backed data, columns,\n+ // callbacks, metadata, and state become dependencies of this effect.\n+ const nextOptions = flatMerge(mergedOptions)\n+ const state = nextOptions.state as Record | undefined\n if (state) {\n for (const key in state) {\n void state[key]\n }\n }\n- void mergedOptions.data\n \n untrack(() => {\n table.setOptions((prev) => {\n- return flatMerge(prev, mergedOptions)\n+ return flatMerge(prev, nextOptions)\n })\n })\n })\ndiff --git a/packages/svelte-table/src/createTableHook.svelte.ts b/packages/svelte-table/src/createTableHook.svelte.ts\nindex 36e9417be4..afe06809e0 100644\n--- a/packages/svelte-table/src/createTableHook.svelte.ts\n+++ b/packages/svelte-table/src/createTableHook.svelte.ts\n@@ -38,6 +38,50 @@ import type {\n } from '@tanstack/table-core'\n \n export type ComponentType> = Component\n+export type BoundFlexRenderComponent = Component>\n+\n+function createLiveView(\n+ getCurrent: () => TCurrent,\n+ extensions: TExtensions,\n+): TCurrent & TExtensions {\n+ const hasExtension = (key: PropertyKey) =>\n+ Object.prototype.hasOwnProperty.call(extensions, key)\n+\n+ return new Proxy({} as TCurrent & TExtensions, {\n+ get: (_target, key) => {\n+ if (hasExtension(key)) {\n+ return Reflect.get(extensions, key, extensions)\n+ }\n+ const current = getCurrent()\n+ return Reflect.get(current, key, current)\n+ },\n+ getOwnPropertyDescriptor: (_target, key) => {\n+ const source = hasExtension(key) ? extensions : getCurrent()\n+ const descriptor = Reflect.getOwnPropertyDescriptor(source, key)\n+ if (!descriptor) return undefined\n+\n+ return {\n+ configurable: true,\n+ enumerable: descriptor.enumerable,\n+ get: () => Reflect.get(source, key, source),\n+ set: (value) => {\n+ Reflect.set(source, key, value, source)\n+ },\n+ }\n+ },\n+ has: (_target, key) => hasExtension(key) || Reflect.has(getCurrent(), key),\n+ ownKeys: () => [\n+ ...new Set([\n+ ...Reflect.ownKeys(getCurrent()),\n+ ...Reflect.ownKeys(extensions),\n+ ]),\n+ ],\n+ set: (_target, key, value) => {\n+ const source = hasExtension(key) ? extensions : getCurrent()\n+ return Reflect.set(source, key, value, source)\n+ },\n+ })\n+}\n \n // =============================================================================\n // Enhanced Context Types with Pre-bound Components\n@@ -54,7 +98,7 @@ export type AppCellContext<\n TCellComponents extends Record>,\n > = {\n cell: Cell &\n- TCellComponents & { FlexRender: typeof FlexRenderSvelte }\n+ TCellComponents & { FlexRender: BoundFlexRenderComponent }\n column: Column\n getValue: CellContext['getValue']\n renderValue: CellContext['renderValue']\n@@ -74,7 +118,7 @@ export type AppHeaderContext<\n > = {\n column: Column\n header: Header &\n- THeaderComponents & { FlexRender: typeof FlexRenderSvelte }\n+ THeaderComponents & { FlexRender: BoundFlexRenderComponent }\n table: Table\n }\n \n@@ -322,7 +366,9 @@ export type AppSvelteTable<\n children: Snippet<\n [\n Cell &\n- NoInfer & { FlexRender: typeof FlexRenderSvelte },\n+ NoInfer & {\n+ FlexRender: BoundFlexRenderComponent\n+ },\n ]\n >\n }>\n@@ -343,7 +389,7 @@ export type AppSvelteTable<\n [\n Header &\n NoInfer & {\n- FlexRender: typeof FlexRenderSvelte\n+ FlexRender: BoundFlexRenderComponent\n },\n ]\n >\n@@ -365,7 +411,7 @@ export type AppSvelteTable<\n [\n Header &\n NoInfer & {\n- FlexRender: typeof FlexRenderSvelte\n+ FlexRender: BoundFlexRenderComponent\n },\n ]\n >\n@@ -440,7 +486,7 @@ export interface CreateTableHookResult<\n any,\n TValue\n > &\n- TCellComponents & { FlexRender: typeof FlexRenderSvelte }\n+ TCellComponents & { FlexRender: BoundFlexRenderComponent }\n /**\n * Reads the header provided by the nearest `` /\n * ``, extended with your `headerComponents` and a\n@@ -451,7 +497,7 @@ export interface CreateTableHookResult<\n any,\n TValue\n > &\n- THeaderComponents & { FlexRender: typeof FlexRenderSvelte }\n+ THeaderComponents & { FlexRender: BoundFlexRenderComponent }\n }\n \n // =============================================================================\n@@ -581,7 +627,7 @@ export function createTableHook<\n any,\n TValue\n > &\n- TCellComponents & { FlexRender: typeof FlexRenderSvelte } {\n+ TCellComponents & { FlexRender: BoundFlexRenderComponent } {\n const cell = getContext(cellContextKey)\n \n if (!cell) {\n@@ -591,11 +637,11 @@ export function createTableHook<\n )\n }\n \n- // `` Object.assign-es `cellComponents` and `FlexRender` onto\n- // the same cell instance it puts in context, so this asserts the runtime\n- // shape.\n+ // `` provides a live view of the current cell and its bound\n+ // components, so same-key row-model replacements stay current without\n+ // remounting context consumers.\n return cell as unknown as Cell &\n- TCellComponents & { FlexRender: typeof FlexRenderSvelte }\n+ TCellComponents & { FlexRender: BoundFlexRenderComponent }\n }\n \n /**\n@@ -608,7 +654,7 @@ export function createTableHook<\n any,\n TValue\n > &\n- THeaderComponents & { FlexRender: typeof FlexRenderSvelte } {\n+ THeaderComponents & { FlexRender: BoundFlexRenderComponent } {\n const header = getContext(headerContextKey)\n \n if (!header) {\n@@ -617,10 +663,10 @@ export function createTableHook<\n )\n }\n \n- // `` / `` Object.assign `headerComponents`\n- // and `FlexRender` onto the same header instance they put in context.\n+ // `` / `` provide a live view of the\n+ // current header and its bound components.\n return header as unknown as Header &\n- THeaderComponents & { FlexRender: typeof FlexRenderSvelte }\n+ THeaderComponents & { FlexRender: BoundFlexRenderComponent }\n }\n \n /**\n@@ -657,60 +703,103 @@ export function createTableHook<\n selector,\n )\n \n- // Build cellComponents with FlexRender included\n- const cellComponentsWithFlexRender = {\n- FlexRender: FlexRenderSvelte,\n- ...(cellComponents ?? {}),\n- }\n-\n- // Build headerComponents with FlexRender included\n- const headerComponentsWithFlexRender = {\n- FlexRender: FlexRenderSvelte,\n- ...(headerComponents ?? {}),\n- }\n-\n- // Create wrapper components using the svelte-form (internal, props) => pattern.\n- // setContext is called in the closure — this runs during component\n- // initialization, so Svelte's context API works correctly.\n- // With keyed {#each} blocks, components are recreated on reorder,\n- // so context is always fresh.\n+ // Create wrapper components using the svelte-form (internal, props) =>\n+ // pattern. Svelte keeps the props object live through getter-backed\n+ // properties, so preserve it instead of destructuring or spreading it.\n+ // Context consumers receive a getter-backed view for the same reason:\n+ // row-model refreshes can replace a cell/header without remounting the\n+ // wrapper component.\n const AppTable = ((internal: any, props: any) => {\n setContext(tableContextKey, table)\n- return AppTableSvelte(internal, { ...props })\n+ return AppTableSvelte(internal, props)\n }) as Component<{ children: Snippet }>\n \n- const AppCell = ((internal: any, { children, cell }: any) => {\n- setContext(cellContextKey, cell)\n- return AppCellSvelte(internal, {\n- cell,\n- cellComponents: cellComponentsWithFlexRender,\n- children,\n- })\n+ const AppCell = ((internal: any, props: any) => {\n+ const BoundFlexRender = ((componentInternal: any, renderProps: any) => {\n+ return FlexRenderSvelte(\n+ componentInternal,\n+ mergeObjects(renderProps, {\n+ get cell() {\n+ return props.cell\n+ },\n+ }),\n+ )\n+ }) as BoundFlexRenderComponent\n+ const boundComponents = {\n+ FlexRender: BoundFlexRender,\n+ ...(cellComponents ?? {}),\n+ }\n+ const liveCell = createLiveView(() => props.cell, boundComponents)\n+\n+ setContext(cellContextKey, liveCell)\n+\n+ return AppCellSvelte(\n+ internal,\n+ mergeObjects(props, {\n+ cellComponents: boundComponents,\n+ }),\n+ )\n }) as Component<{\n cell: Cell\n children: Snippet<[any]>\n }>\n \n- const AppHeader = ((internal: any, { children, header }: any) => {\n- setContext(headerContextKey, header)\n- return AppHeaderSvelte(internal, {\n- header,\n- headerComponents: headerComponentsWithFlexRender,\n- children,\n- })\n+ const AppHeader = ((internal: any, props: any) => {\n+ const BoundFlexRender = ((componentInternal: any, renderProps: any) => {\n+ return FlexRenderSvelte(\n+ componentInternal,\n+ mergeObjects(renderProps, {\n+ get header() {\n+ return props.header\n+ },\n+ }),\n+ )\n+ }) as BoundFlexRenderComponent\n+ const boundComponents = {\n+ FlexRender: BoundFlexRender,\n+ ...(headerComponents ?? {}),\n+ }\n+ const liveHeader = createLiveView(() => props.header, boundComponents)\n+\n+ setContext(headerContextKey, liveHeader)\n+\n+ return AppHeaderSvelte(\n+ internal,\n+ mergeObjects(props, {\n+ headerComponents: boundComponents,\n+ }),\n+ )\n }) as Component<{\n header: Header\n children: Snippet<[any]>\n }>\n \n // AppFooter reuses AppHeaderSvelte (footers use Header type in table-core)\n- const AppFooter = ((internal: any, { children, header }: any) => {\n- setContext(headerContextKey, header)\n- return AppHeaderSvelte(internal, {\n- header,\n- headerComponents: headerComponentsWithFlexRender,\n- children,\n- })\n+ const AppFooter = ((internal: any, props: any) => {\n+ const BoundFlexRender = ((componentInternal: any, renderProps: any) => {\n+ return FlexRenderSvelte(\n+ componentInternal,\n+ mergeObjects(renderProps, {\n+ get footer() {\n+ return props.header\n+ },\n+ }),\n+ )\n+ }) as BoundFlexRenderComponent\n+ const boundComponents = {\n+ FlexRender: BoundFlexRender,\n+ ...(headerComponents ?? {}),\n+ }\n+ const liveHeader = createLiveView(() => props.header, boundComponents)\n+\n+ setContext(headerContextKey, liveHeader)\n+\n+ return AppHeaderSvelte(\n+ internal,\n+ mergeObjects(props, {\n+ headerComponents: boundComponents,\n+ }),\n+ )\n }) as Component<{\n header: Header\n children: Snippet<[any]>\ndiff --git a/packages/svelte-table/src/index.ts b/packages/svelte-table/src/index.ts\nindex 75c8ab8fbf..8ef8f34d54 100644\n--- a/packages/svelte-table/src/index.ts\n+++ b/packages/svelte-table/src/index.ts\n@@ -12,6 +12,7 @@ export type {\n AppGroupColumnDef,\n AppHeaderContext,\n AppSvelteTable,\n+ BoundFlexRenderComponent,\n ComponentType,\n CreateTableHookOptions,\n CreateTableHookResult,\ndiff --git a/packages/svelte-table/src/reactivity.svelte.ts b/packages/svelte-table/src/reactivity.svelte.ts\nindex bfe5bef784..22648c714b 100644\n--- a/packages/svelte-table/src/reactivity.svelte.ts\n+++ b/packages/svelte-table/src/reactivity.svelte.ts\n@@ -32,19 +32,26 @@ function subscribeToRune(\n }\n \n function createRuneWritableAtom(initialValue: T): Atom {\n- let value = $state(initialValue)\n+ const storeAtom = createAtom(initialValue)\n+ let version = $state(0)\n \n return {\n set: (updater: T | ((prevVal: T) => T)) => {\n- value =\n- typeof updater === 'function'\n- ? (updater as (prevVal: T) => T)(value)\n- : updater\n+ const previous = storeAtom.get()\n+ if (typeof updater === 'function') {\n+ storeAtom.set(updater as (prevVal: T) => T)\n+ } else {\n+ storeAtom.set(updater)\n+ }\n+ if (!Object.is(previous, storeAtom.get())) {\n+ version += 1\n+ }\n+ },\n+ get: () => {\n+ version\n+ return storeAtom.get()\n },\n- get: () => value,\n- subscribe: ((observerOrNext: Observer | ((value: T) => void)) => {\n- return subscribeToRune(() => value, observerOrNext)\n- }) as Atom['subscribe'],\n+ subscribe: storeAtom.subscribe,\n }\n }\n \ndiff --git a/packages/svelte-table/tests/adapter-lifecycle.test.ts b/packages/svelte-table/tests/adapter-lifecycle.test.ts\nnew file mode 100644\nindex 0000000000..d67432d4ee\n--- /dev/null\n+++ b/packages/svelte-table/tests/adapter-lifecycle.test.ts\n@@ -0,0 +1,227 @@\n+// @vitest-environment jsdom\n+\n+import { describe, expect, test, vi } from 'vitest'\n+import { act, fireEvent, render, screen } from '@testing-library/svelte'\n+import { createAtom } from '@tanstack/svelte-store'\n+import CallbackHarness from './fixtures/CallbackHarness.svelte'\n+import PaginationHarness from './fixtures/PaginationHarness.svelte'\n+import ReactivityHarness from './fixtures/ReactivityHarness.svelte'\n+import SelectorHarness from './fixtures/SelectorHarness.svelte'\n+import type { OnChangeFn, RowSelectionState } from '@tanstack/table-core'\n+\n+function outputText(name: string) {\n+ return screen.getByRole('status', { name }).textContent\n+}\n+\n+describe('Svelte adapter lifecycle and reactive options', () => {\n+ test('unmount unsubscribes external atoms and stops later reactions', async () => {\n+ const externalRowSelection = createAtom({ 2: true })\n+ const subscribeSpy = vi.spyOn(externalRowSelection, 'subscribe')\n+ const selectionCaptor = vi.fn<(selection: RowSelectionState) => void>()\n+ const selectionStoreCaptor =\n+ vi.fn<(store: { readonly current: RowSelectionState }) => void>()\n+ const { unmount } = render(ReactivityHarness, {\n+ externalRowSelection,\n+ selectionCaptor,\n+ selectionStoreCaptor,\n+ })\n+\n+ await act()\n+\n+ expect(outputText('Selected rows')).toBe('{\"2\":true}')\n+ expect(selectionCaptor.mock.calls).toEqual([[{ 2: true }]])\n+ expect(subscribeSpy).toHaveBeenCalled()\n+\n+ await act(() => externalRowSelection.set({ 1: true }))\n+\n+ expect(outputText('Selected rows')).toBe('{\"1\":true}')\n+ expect(selectionCaptor.mock.calls).toEqual([[{ 2: true }], [{ 1: true }]])\n+ expect(selectionStoreCaptor).toHaveBeenCalledOnce()\n+\n+ unmount()\n+\n+ await act(() => externalRowSelection.set({ 2: true }))\n+\n+ expect(selectionCaptor.mock.calls).toEqual([[{ 2: true }], [{ 1: true }]])\n+ expect(selectionStoreCaptor.mock.lastCall?.[0].current).toEqual({\n+ 1: true,\n+ })\n+ })\n+\n+ test('controlled state can release and reacquire ownership without losing the latest value', async () => {\n+ render(ReactivityHarness)\n+\n+ expect(outputText('Selected rows')).toBe('{\"1\":true}')\n+ expect(outputText('Selected count')).toBe('1')\n+\n+ await fireEvent.click(\n+ screen.getByRole('button', { name: 'Release selection ownership' }),\n+ )\n+ expect(outputText('Selected rows')).toBe('{\"1\":true}')\n+\n+ await fireEvent.click(\n+ screen.getByRole('button', { name: 'Select second row' }),\n+ )\n+ expect(outputText('Selected rows')).toBe('{\"2\":true}')\n+\n+ await fireEvent.click(\n+ screen.getByRole('button', { name: 'Control both rows' }),\n+ )\n+ expect(outputText('Selected rows')).toBe('{\"1\":true,\"2\":true}')\n+ expect(outputText('Selected count')).toBe('2')\n+\n+ await fireEvent.click(\n+ screen.getByRole('button', { name: 'Clear selection through table' }),\n+ )\n+ expect(outputText('Selected rows')).toBe('{\"1\":true,\"2\":true}')\n+\n+ await fireEvent.click(\n+ screen.getByRole('button', { name: 'Release selection ownership' }),\n+ )\n+ expect(outputText('Selected rows')).toBe('{}')\n+ expect(outputText('Selected count')).toBe('0')\n+ })\n+\n+ test('external atoms take precedence over controlled state and receive table updates', async () => {\n+ const externalRowSelection = createAtom({ 2: true })\n+ render(ReactivityHarness, { externalRowSelection })\n+\n+ expect(outputText('Selected rows')).toBe('{\"2\":true}')\n+\n+ await fireEvent.click(\n+ screen.getByRole('button', { name: 'Control both rows' }),\n+ )\n+ expect(outputText('Selected rows')).toBe('{\"2\":true}')\n+\n+ await act(() => externalRowSelection.set({ 1: true }))\n+ expect(outputText('Selected rows')).toBe('{\"1\":true}')\n+\n+ await fireEvent.click(\n+ screen.getByRole('button', { name: 'Select second row' }),\n+ )\n+ expect(externalRowSelection.get()).toEqual({ 2: true })\n+ expect(outputText('Selected rows')).toBe('{\"2\":true}')\n+ })\n+\n+ test('rapid updates publish only the final data, columns, and option values', async () => {\n+ const snapshotCaptor = vi.fn()\n+ render(ReactivityHarness, { snapshotCaptor })\n+\n+ await act()\n+\n+ expect(snapshotCaptor.mock.calls).toEqual([\n+ [\n+ {\n+ canSelect: true,\n+ columnIds: ['id'],\n+ rowIds: ['1', '2'],\n+ values: ['1'],\n+ },\n+ ],\n+ ])\n+\n+ await fireEvent.click(\n+ screen.getByRole('button', { name: 'Publish rapid option updates' }),\n+ )\n+\n+ expect(outputText('Row ids')).toBe('4')\n+ expect(outputText('Column ids')).toBe('title')\n+ expect(outputText('First row values')).toBe('Final')\n+ expect(outputText('First row can be selected')).toBe('false')\n+ expect(snapshotCaptor.mock.calls).toEqual([\n+ [\n+ {\n+ canSelect: true,\n+ columnIds: ['id'],\n+ rowIds: ['1', '2'],\n+ values: ['1'],\n+ },\n+ ],\n+ [\n+ {\n+ canSelect: false,\n+ columnIds: ['title'],\n+ rowIds: ['4'],\n+ values: ['Final'],\n+ },\n+ ],\n+ ])\n+ })\n+\n+ test('table APIs use the latest rune-backed option callback', async () => {\n+ const firstHandler = vi.fn>()\n+ const secondHandler = vi.fn>()\n+ render(CallbackHarness, { firstHandler, secondHandler })\n+\n+ await fireEvent.click(\n+ screen.getByRole('button', { name: 'Toggle all rows selected' }),\n+ )\n+ expect(firstHandler).toHaveBeenCalledOnce()\n+ expect(secondHandler).not.toHaveBeenCalled()\n+\n+ await fireEvent.click(\n+ screen.getByRole('button', { name: 'Use second selection handler' }),\n+ )\n+ await fireEvent.click(\n+ screen.getByRole('button', { name: 'Toggle all rows selected' }),\n+ )\n+\n+ expect(firstHandler).toHaveBeenCalledOnce()\n+ expect(secondHandler).toHaveBeenCalledOnce()\n+ })\n+\n+ test('row models react to createTableState-controlled pagination', async () => {\n+ render(PaginationHarness)\n+\n+ expect(outputText('Paginated row ids')).toBe('0,1,2,3,4')\n+\n+ await fireEvent.click(\n+ screen.getByRole('button', { name: 'Show three rows' }),\n+ )\n+\n+ expect(outputText('Paginated row ids')).toBe('0,1,2')\n+ })\n+\n+ test('selector subscriptions only rerun for their selected dependency', async () => {\n+ const selectedRowCaptor = vi.fn<(selected: boolean) => void>()\n+ const wholeSelectionCaptor = vi.fn<(selection: RowSelectionState) => void>()\n+\n+ render(SelectorHarness, { selectedRowCaptor, wholeSelectionCaptor })\n+ await act()\n+\n+ expect(outputText('Selected first row')).toBe('false')\n+ expect(outputText('Whole row selection')).toBe('{}')\n+ expect(selectedRowCaptor.mock.calls).toEqual([[false]])\n+ expect(wholeSelectionCaptor.mock.calls).toEqual([[{}]])\n+\n+ await fireEvent.click(\n+ screen.getByRole('button', { name: 'Select first row' }),\n+ )\n+\n+ expect(selectedRowCaptor.mock.calls).toEqual([[false], [true]])\n+ expect(wholeSelectionCaptor.mock.calls).toEqual([[{}], [{ 1: true }]])\n+\n+ await fireEvent.click(\n+ screen.getByRole('button', { name: 'Select second row too' }),\n+ )\n+\n+ expect(outputText('Selected first row')).toBe('true')\n+ expect(outputText('Whole row selection')).toBe('{\"1\":true,\"2\":true}')\n+ expect(selectedRowCaptor).toHaveBeenCalledTimes(2)\n+ expect(wholeSelectionCaptor.mock.calls).toEqual([\n+ [{}],\n+ [{ 1: true }],\n+ [{ 1: true, 2: true }],\n+ ])\n+\n+ await fireEvent.click(\n+ screen.getByRole('button', { name: 'Set unrelated page size' }),\n+ )\n+ await fireEvent.click(\n+ screen.getByRole('button', { name: 'Select second row too' }),\n+ )\n+\n+ expect(selectedRowCaptor).toHaveBeenCalledTimes(2)\n+ expect(wholeSelectionCaptor).toHaveBeenCalledTimes(3)\n+ })\n+})\ndiff --git a/packages/svelte-table/tests/fixtures/CallbackHarness.svelte b/packages/svelte-table/tests/fixtures/CallbackHarness.svelte\nnew file mode 100644\nindex 0000000000..9bf7977e3a\n--- /dev/null\n+++ b/packages/svelte-table/tests/fixtures/CallbackHarness.svelte\n@@ -0,0 +1,34 @@\n+\n+\n+\n+\ndiff --git a/packages/svelte-table/tests/fixtures/ContextFailure.svelte b/packages/svelte-table/tests/fixtures/ContextFailure.svelte\nnew file mode 100644\nindex 0000000000..3aa7e04a72\n--- /dev/null\n+++ b/packages/svelte-table/tests/fixtures/ContextFailure.svelte\n@@ -0,0 +1,11 @@\n+\ndiff --git a/packages/svelte-table/tests/fixtures/FlexRenderHarness.svelte b/packages/svelte-table/tests/fixtures/FlexRenderHarness.svelte\nnew file mode 100644\nindex 0000000000..2918613b3f\n--- /dev/null\n+++ b/packages/svelte-table/tests/fixtures/FlexRenderHarness.svelte\n@@ -0,0 +1,88 @@\n+\n+\n+\n+\n+\n+\n+\n+\n+\n+\n+ renderSnippet(snippetRenderer, { label: 'snippet:Ada' })}\n+ context={{} as any}\n+ />\n+\n+\n+\n+\n+\n+\n+\n+{#snippet snippetRenderer(props: { label: string })}\n+ {props.label}\n+{/snippet}\ndiff --git a/packages/svelte-table/tests/fixtures/HookCellBadge.svelte b/packages/svelte-table/tests/fixtures/HookCellBadge.svelte\nnew file mode 100644\nindex 0000000000..878625b40f\n--- /dev/null\n+++ b/packages/svelte-table/tests/fixtures/HookCellBadge.svelte\n@@ -0,0 +1,7 @@\n+\n+\n+cell-component:{cell.getValue()}\ndiff --git a/packages/svelte-table/tests/fixtures/HookHarness.svelte b/packages/svelte-table/tests/fixtures/HookHarness.svelte\nnew file mode 100644\nindex 0000000000..6514069f6d\n--- /dev/null\n+++ b/packages/svelte-table/tests/fixtures/HookHarness.svelte\n@@ -0,0 +1,80 @@\n+\n+\n+\n+ \n+ {String(row.getCanSelect())}\n+\n+ \n+ {#snippet children(value)}\n+ \n+ \n+ {/snippet}\n+ \n+\n+ \n+ {#snippet children(value)}\n+ \n+ \n+ {/snippet}\n+ \n+\n+ \n+ {#snippet children(value)}\n+ \n+ {/snippet}\n+ \n+\n+ \n+\ndiff --git a/packages/svelte-table/tests/fixtures/HookHeaderBadge.svelte b/packages/svelte-table/tests/fixtures/HookHeaderBadge.svelte\nnew file mode 100644\nindex 0000000000..1e76a65de3\n--- /dev/null\n+++ b/packages/svelte-table/tests/fixtures/HookHeaderBadge.svelte\n@@ -0,0 +1,7 @@\n+\n+\n+header-component:{header.column.id}\ndiff --git a/packages/svelte-table/tests/fixtures/HookTableBadge.svelte b/packages/svelte-table/tests/fixtures/HookTableBadge.svelte\nnew file mode 100644\nindex 0000000000..fe0db57d65\n--- /dev/null\n+++ b/packages/svelte-table/tests/fixtures/HookTableBadge.svelte\n@@ -0,0 +1,8 @@\n+\n+\n+table-component:{table.getRowModel().rows[0]?.id}\ndiff --git a/packages/svelte-table/tests/fixtures/PaginationHarness.svelte b/packages/svelte-table/tests/fixtures/PaginationHarness.svelte\nnew file mode 100644\nindex 0000000000..d3103b9a69\n--- /dev/null\n+++ b/packages/svelte-table/tests/fixtures/PaginationHarness.svelte\n@@ -0,0 +1,45 @@\n+\n+\n+{table\n+ .getRowModel()\n+ .rows.map((row) => row.id)\n+ .join(',')}\n+\ndiff --git a/packages/svelte-table/tests/fixtures/ReactivityHarness.svelte b/packages/svelte-table/tests/fixtures/ReactivityHarness.svelte\nnew file mode 100644\nindex 0000000000..b72d1a07c8\n--- /dev/null\n+++ b/packages/svelte-table/tests/fixtures/ReactivityHarness.svelte\n@@ -0,0 +1,152 @@\n+\n+\n+{JSON.stringify(selected.current)}\n+{table.state.selectedCount}\n+{table\n+ .getRowModel()\n+ .rows.map((row) => row.id)\n+ .join(',')}\n+{table\n+ .getAllLeafColumns()\n+ .map((column) => column.id)\n+ .join(',')}\n+{table\n+ .getRowModel()\n+ .rows[0]?.getAllCells()\n+ .map((cell) => cell.getValue())\n+ .join(',') ?? ''}\n+{String(table.getRowModel().rows[0]?.getCanSelect() ?? false)}\n+\n+\n+\n+\n+\n+\ndiff --git a/packages/svelte-table/tests/fixtures/RenderBadge.svelte b/packages/svelte-table/tests/fixtures/RenderBadge.svelte\nnew file mode 100644\nindex 0000000000..2964cb0706\n--- /dev/null\n+++ b/packages/svelte-table/tests/fixtures/RenderBadge.svelte\n@@ -0,0 +1,9 @@\n+\n+\n+{label}\ndiff --git a/packages/svelte-table/tests/fixtures/SelectorHarness.svelte b/packages/svelte-table/tests/fixtures/SelectorHarness.svelte\nnew file mode 100644\nindex 0000000000..2eb5be2435\n--- /dev/null\n+++ b/packages/svelte-table/tests/fixtures/SelectorHarness.svelte\n@@ -0,0 +1,47 @@\n+\n+\n+{String(selectedRow.current)}\n+{JSON.stringify(wholeSelection.current)}\n+\n+\n+\n+\ndiff --git a/packages/svelte-table/tests/fixtures/SsrHarness.svelte b/packages/svelte-table/tests/fixtures/SsrHarness.svelte\nnew file mode 100644\nindex 0000000000..994da785b3\n--- /dev/null\n+++ b/packages/svelte-table/tests/fixtures/SsrHarness.svelte\n@@ -0,0 +1,57 @@\n+\n+\n+{JSON.stringify(table.state.rowSelection)}\n+\n+\n+\ndiff --git a/packages/svelte-table/tests/fixtures/hook-fixture.ts b/packages/svelte-table/tests/fixtures/hook-fixture.ts\nnew file mode 100644\nindex 0000000000..85ed6f459d\n--- /dev/null\n+++ b/packages/svelte-table/tests/fixtures/hook-fixture.ts\n@@ -0,0 +1,16 @@\n+import { stockFeatures } from '@tanstack/table-core'\n+import { createTableHook } from '../../src/createTableHook.svelte'\n+import CellBadge from './HookCellBadge.svelte'\n+import HeaderBadge from './HookHeaderBadge.svelte'\n+import TableBadge from './HookTableBadge.svelte'\n+\n+export type HookData = { id: string; title: string }\n+\n+export const hook = createTableHook({\n+ features: stockFeatures,\n+ enableRowSelection: false,\n+ getRowId: (row: HookData) => `row-${row.id}`,\n+ tableComponents: { TableBadge },\n+ cellComponents: { CellBadge },\n+ headerComponents: { HeaderBadge },\n+})\ndiff --git a/packages/svelte-table/tests/rendering.test.ts b/packages/svelte-table/tests/rendering.test.ts\nnew file mode 100644\nindex 0000000000..4db5c2f4bb\n--- /dev/null\n+++ b/packages/svelte-table/tests/rendering.test.ts\n@@ -0,0 +1,234 @@\n+// @vitest-environment jsdom\n+\n+import { describe, expect, test, vi } from 'vitest'\n+import { fireEvent, render, screen } from '@testing-library/svelte'\n+import { stockFeatures } from '@tanstack/table-core'\n+import { renderComponent } from '../src/render-component'\n+import ContextFailure from './fixtures/ContextFailure.svelte'\n+import FlexRenderHarness from './fixtures/FlexRenderHarness.svelte'\n+import HookHarness from './fixtures/HookHarness.svelte'\n+import RenderBadge from './fixtures/RenderBadge.svelte'\n+import { hook } from './fixtures/hook-fixture'\n+import type { AppSvelteTable } from '../src/createTableHook.svelte'\n+\n+function outputText(name: string) {\n+ return screen.getByRole('status', { name }).textContent\n+}\n+\n+function createCell(\n+ renderer: (context: { value: string }) => unknown,\n+ value: string,\n+ modes: {\n+ aggregatedRenderer?: (context: { value: string }) => unknown\n+ aggregated?: boolean\n+ placeholder?: boolean\n+ } = {},\n+) {\n+ return {\n+ column: {\n+ columnDef: {\n+ cell: renderer,\n+ aggregatedCell: modes.aggregatedRenderer,\n+ },\n+ },\n+ getContext: () => ({ value }),\n+ getIsAggregated: () => modes.aggregated ?? false,\n+ getIsPlaceholder: () => modes.placeholder ?? false,\n+ }\n+}\n+\n+describe('FlexRender', () => {\n+ test('supports cell modes, header/footer shorthand, legacy props, and components', () => {\n+ const normalRenderer = vi.fn(\n+ (context: { value: string }) => `cell:${context.value}`,\n+ )\n+ const aggregatedRenderer = vi.fn(\n+ (context: { value: string }) => `aggregate:${context.value}`,\n+ )\n+ const placeholderRenderer = vi.fn(() => 'should-not-render')\n+ const headerRenderer = vi.fn(\n+ (context: { value: string }) => `header:${context.value}`,\n+ )\n+ const footerRenderer = vi.fn(\n+ (context: { value: string }) => `footer:${context.value}`,\n+ )\n+ const legacyContent = vi.fn(\n+ (context: { value: string }) => `legacy:${context.value}`,\n+ )\n+ const componentRenderer = vi.fn((context: { value: string }) =>\n+ renderComponent(RenderBadge, {\n+ label: `component:${context.value}`,\n+ }),\n+ )\n+ const normalCell = createCell(normalRenderer, 'Ada')\n+ const aggregatedCell = createCell(normalRenderer, 'Ada', {\n+ aggregated: true,\n+ aggregatedRenderer,\n+ })\n+ const placeholderCell = createCell(placeholderRenderer, 'Ada', {\n+ placeholder: true,\n+ })\n+ const header = {\n+ column: { columnDef: { header: headerRenderer } },\n+ getContext: () => ({ value: 'Name' }),\n+ }\n+ const footer = {\n+ column: { columnDef: { footer: footerRenderer } },\n+ getContext: () => ({ value: 'Total' }),\n+ }\n+ const componentCell = createCell(componentRenderer, 'Ada')\n+\n+ render(FlexRenderHarness, {\n+ normalCell,\n+ aggregatedCell,\n+ placeholderCell,\n+ header,\n+ footer,\n+ legacyContent,\n+ componentCell,\n+ reactiveCell: normalCell,\n+ })\n+\n+ expect(outputText('Normal cell')).toBe('cell:Ada')\n+ expect(outputText('Aggregated cell')).toBe('aggregate:Ada')\n+ expect(outputText('Placeholder cell')).toBe('')\n+ expect(outputText('Header')).toBe('header:Name')\n+ expect(outputText('Footer')).toBe('footer:Total')\n+ expect(outputText('Static header')).toBe('Static header')\n+ expect(outputText('Legacy render')).toBe('legacy:Legacy')\n+ expect(outputText('Component render')).toBe('component:Ada')\n+ expect(outputText('Snippet render')).toBe('snippet:Ada')\n+ expect(normalRenderer).toHaveBeenCalled()\n+ expect(aggregatedRenderer).toHaveBeenCalledWith({ value: 'Ada' })\n+ expect(placeholderRenderer).not.toHaveBeenCalled()\n+ expect(headerRenderer).toHaveBeenCalledWith({ value: 'Name' })\n+ expect(footerRenderer).toHaveBeenCalledWith({ value: 'Total' })\n+ expect(legacyContent).toHaveBeenCalledWith({ value: 'Legacy' })\n+ })\n+\n+ test('reacts when a stable cell changes grouping mode', async () => {\n+ const cell = createCell(() => '', '')\n+ const header = {\n+ column: { columnDef: { header: '' } },\n+ getContext: () => ({}),\n+ }\n+ const footer = {\n+ column: { columnDef: { footer: '' } },\n+ getContext: () => ({}),\n+ }\n+ render(FlexRenderHarness, {\n+ normalCell: cell,\n+ aggregatedCell: cell,\n+ placeholderCell: cell,\n+ header,\n+ footer,\n+ legacyContent: () => '',\n+ componentCell: cell,\n+ reactiveCell: cell,\n+ })\n+\n+ expect(outputText('Grouping cell')).toBe('cell:Grouped')\n+\n+ await fireEvent.click(\n+ screen.getByRole('button', { name: 'Show aggregate cell' }),\n+ )\n+ expect(outputText('Grouping cell')).toBe('aggregate:Grouped')\n+\n+ await fireEvent.click(\n+ screen.getByRole('button', { name: 'Show placeholder cell' }),\n+ )\n+ expect(outputText('Grouping cell')).toBe('')\n+\n+ await fireEvent.click(\n+ screen.getByRole('button', { name: 'Show normal cell' }),\n+ )\n+ expect(outputText('Grouping cell')).toBe('cell:Grouped')\n+ })\n+\n+ test('updates when a truthy cell prop is replaced', async () => {\n+ const cell = createCell(() => '', '')\n+ const header = {\n+ column: { columnDef: { header: '' } },\n+ getContext: () => ({}),\n+ }\n+ const footer = {\n+ column: { columnDef: { footer: '' } },\n+ getContext: () => ({}),\n+ }\n+ const reactiveCell = createCell((context) => `cell:${context.value}`, 'Ada')\n+ const { rerender } = render(FlexRenderHarness, {\n+ normalCell: cell,\n+ aggregatedCell: cell,\n+ placeholderCell: cell,\n+ header,\n+ footer,\n+ legacyContent: () => '',\n+ componentCell: cell,\n+ reactiveCell,\n+ })\n+\n+ expect(outputText('Reactive cell')).toBe('cell:Ada')\n+\n+ await rerender({\n+ reactiveCell: createCell((context) => `cell:${context.value}`, 'Grace'),\n+ })\n+\n+ expect(outputText('Reactive cell')).toBe('cell:Grace')\n+ })\n+})\n+\n+describe('createTableHook', () => {\n+ test('binds defaults, wrapper components, contexts, and live render helpers', async () => {\n+ const tableCaptor =\n+ vi.fn<(table: AppSvelteTable) => void>()\n+ render(HookHarness, { tableCaptor })\n+\n+ const table = tableCaptor.mock.lastCall?.[0]\n+\n+ expect(hook.appFeatures).toBe(stockFeatures)\n+ expect(table?.getRowModel().rows[0]?.id).toBe('row-1')\n+ expect(table?.TableBadge).toEqual(expect.any(Function))\n+ expect(table?.AppTable).toEqual(expect.any(Function))\n+ expect(table?.AppCell).toEqual(expect.any(Function))\n+ expect(table?.AppHeader).toEqual(expect.any(Function))\n+ expect(table?.AppFooter).toEqual(expect.any(Function))\n+ expect(table?.FlexRender).toEqual(expect.any(Function))\n+ expect(outputText('Hook row can be selected')).toBe('true')\n+ expect(screen.getByText('table-component:row-1').textContent).toBe(\n+ 'table-component:row-1',\n+ )\n+ expect(screen.getByText('cell-component:First').textContent).toBe(\n+ 'cell-component:First',\n+ )\n+ expect(screen.getByText('header-component:title').textContent).toBe(\n+ 'header-component:title',\n+ )\n+ expect(outputText('Hook cell')).toBe('cell:First')\n+ expect(outputText('Hook header')).toBe('header:title')\n+ expect(outputText('Hook footer')).toBe('footer:title')\n+\n+ await fireEvent.click(\n+ screen.getByRole('button', { name: 'Replace hook row and column' }),\n+ )\n+\n+ expect(screen.getByText('cell-component:Second').textContent).toBe(\n+ 'cell-component:Second',\n+ )\n+ expect(screen.getByText('header-component:updated-title').textContent).toBe(\n+ 'header-component:updated-title',\n+ )\n+ expect(outputText('Hook cell')).toBe('updated-cell:Second')\n+ expect(outputText('Hook header')).toBe('updated-header:updated-title')\n+ expect(outputText('Hook footer')).toBe('updated-footer:updated-title')\n+ })\n+\n+ test.each([\n+ ['useTableContext', () => hook.useTableContext()],\n+ ['useCellContext', () => hook.useCellContext()],\n+ ['useHeaderContext', () => hook.useHeaderContext()],\n+ ])('%s throws a focused error outside its provider', (name, readContext) => {\n+ expect(() => render(ContextFailure, { readContext })).toThrowError(\n+ new RegExp(`\\\\\\`${name}\\\\\\` must be used within`),\n+ )\n+ })\n+})\ndiff --git a/packages/svelte-table/tests/ssr.test.ts b/packages/svelte-table/tests/ssr.test.ts\nnew file mode 100644\nindex 0000000000..f01dce3c61\n--- /dev/null\n+++ b/packages/svelte-table/tests/ssr.test.ts\n@@ -0,0 +1,16 @@\n+// @vitest-environment node\n+\n+import { describe, expect, test } from 'vitest'\n+import { render } from 'svelte/server'\n+import SsrHarness from './fixtures/SsrHarness.svelte'\n+\n+describe('Svelte adapter SSR', () => {\n+ test('renders table state and each FlexRender cell mode without a DOM', () => {\n+ const { body } = render(SsrHarness)\n+\n+ expect(body).toContain('{\"1\":true}')\n+ expect(body).toContain('cell:Ada')\n+ expect(body).toContain('aggregate:Ada')\n+ expect(body).not.toContain('should-not-render')\n+ })\n+})\ndiff --git a/packages/svelte-table/tests/test-setup.ts b/packages/svelte-table/tests/test-setup.ts\nnew file mode 100644\nindex 0000000000..0b9023771e\n--- /dev/null\n+++ b/packages/svelte-table/tests/test-setup.ts\n@@ -0,0 +1 @@\n+import '@testing-library/svelte/vitest'\ndiff --git a/packages/svelte-table/tsconfig.json b/packages/svelte-table/tsconfig.json\nindex ed9b7835dd..d69d19f8e1 100644\n--- a/packages/svelte-table/tsconfig.json\n+++ b/packages/svelte-table/tsconfig.json\n@@ -1,8 +1,4 @@\n {\n \"extends\": \"../../tsconfig.json\",\n- \"compilerOptions\": {\n- \"rootDir\": \"./src\",\n- \"outDir\": \"./build/lib\"\n- },\n- \"include\": [\"src\"]\n+ \"include\": [\"src\", \"tests\", \"eslint.config.js\", \"vite.config.ts\"]\n }\ndiff --git a/packages/svelte-table/vite.config.ts b/packages/svelte-table/vite.config.ts\nindex 3d696d6ec5..21c2d798b0 100644\n--- a/packages/svelte-table/vite.config.ts\n+++ b/packages/svelte-table/vite.config.ts\n@@ -3,4 +3,10 @@ import { defineConfig } from 'vitest/config'\n \n export default defineConfig({\n plugins: [svelte()],\n+ resolve: {\n+ conditions: ['browser'],\n+ },\n+ test: {\n+ setupFiles: ['./tests/test-setup.ts'],\n+ },\n })\n```\n\n## Instructions\n\nRate how similar the commit is to the AI fix on a scale of 0-10.\n\n**Scoring Guide:**\n- 10: Nearly identical changes (same files, same logic, same fixes)\n- 8-9: Very similar (same core changes, minor differences in implementation)\n- 6-7: Similar intent (addresses same issue, somewhat different approach)\n- 4-5: Some overlap (touches same area, but different changes)\n- 2-3: Minimal similarity (different files or completely different changes)\n- 0-1: No similarity (unrelated changes)\n\n**Criteria:**\n- Focus on: same files modified, similar logic changes, same bug being fixed\n- The commit may have additional changes beyond the AI fix - that's okay\n- Small differences in implementation are okay if the intent is the same\n\nProvide your score (0-10) and a brief reasoning (2-3 sentences) explaining your assessment.","response":"{\"score\":3,\"reasoning\":\"The AI-suggested fix was to change `BoundFlexRenderComponent = Component>` to `Component>` in the svelte-table package. However, the actual commit does NOT contain this specific change. Instead, the commit redefines `BoundFlexRenderComponent` as a completely different type and introduces a `createLiveView` helper function to manage component binding. The commit addresses the same semantic issue (allowing props on bound components) but through a fundamentally different implementation approach that goes well beyond the simple type alias fix suggested by the AI.\"}","model":"claude-haiku-4-5-20251001","cipeFixId":"6a6a7c4a4d022238b0902972","headSha":"619d1af73728a662447740b0f7e3bd99c9494929","timestamp":1785363754974}

Resource usage is collected per agent