fix: react adapter sync state

docs/framework/alpine/guide/custom-features.md

@@ -140,7 +140,7 @@ The `getInitialState` method in a table feature is responsible for setting the d
 
 #### initTableInstanceData and resetTableInstanceData
 
-Use `initTableInstanceData` for mutable, non-reactive data that belongs to one table instance, such as an interaction anchor or an imperative cache. It runs once after table options, state atoms, and the store have been created. Every feature's initialization hook runs before any feature's `constructTableAPIs` hook.
+Use `initTableInstanceData` for mutable, non-reactive data that belongs to one table instance, such as an interaction anchor or an imperative cache. It runs once after table options, state atoms, and the store have been created. Features are processed in a single pass in registration order; each feature's initialization hook runs just before that feature's `constructTableAPIs` hook, so hooks may rely on data and APIs from features registered earlier.
 
 Use `resetTableInstanceData` to clear that transient data when `table.reset()` runs. Reset hooks run after internally owned table state atoms have been restored to `table.initialState`. They do not reset table state slices or externally controlled state, and `table.reset()` does not rerun `initTableInstanceData`.
 

docs/framework/angular/guide/custom-features.md

@@ -146,7 +146,7 @@ The `getInitialState` method in a table feature is responsible for setting the d
 
 ##### initTableInstanceData and resetTableInstanceData
 
-Use `initTableInstanceData` for mutable, non-reactive data that belongs to one table instance, such as an interaction anchor or an imperative cache. It runs once after table options, state atoms, and the store have been created. Every feature's initialization hook runs before any feature's `constructTableAPIs` hook.
+Use `initTableInstanceData` for mutable, non-reactive data that belongs to one table instance, such as an interaction anchor or an imperative cache. It runs once after table options, state atoms, and the store have been created. Features are processed in a single pass in registration order; each feature's initialization hook runs just before that feature's `constructTableAPIs` hook, so hooks may rely on data and APIs from features registered earlier.
 
 Use `resetTableInstanceData` to clear that transient data when `table.reset()` runs. Reset hooks run after internally owned table state atoms have been restored to `table.initialState`. They do not reset table state slices or externally controlled state, and `table.reset()` does not rerun `initTableInstanceData`.
 

docs/framework/ember/guide/custom-features.md

@@ -146,7 +146,7 @@ The `getInitialState` method in a table feature is responsible for setting the d
 
 ##### initTableInstanceData and resetTableInstanceData
 
-Use `initTableInstanceData` for mutable, non-reactive data that belongs to one table instance, such as an interaction anchor or an imperative cache. It runs once after table options, state atoms, and the store have been created. Every feature's initialization hook runs before any feature's `constructTableAPIs` hook.
+Use `initTableInstanceData` for mutable, non-reactive data that belongs to one table instance, such as an interaction anchor or an imperative cache. It runs once after table options, state atoms, and the store have been created. Features are processed in a single pass in registration order; each feature's initialization hook runs just before that feature's `constructTableAPIs` hook, so hooks may rely on data and APIs from features registered earlier.
 
 Use `resetTableInstanceData` to clear that transient data when `table.reset()` runs. Reset hooks run after internally owned table state atoms have been restored to `table.initialState`. They do not reset table state slices or externally controlled state, and `table.reset()` does not rerun `initTableInstanceData`.
 

docs/framework/lit/guide/custom-features.md

@@ -138,7 +138,7 @@ The `getInitialState` method in a table feature is responsible for setting the d
 
 #### initTableInstanceData and resetTableInstanceData
 
-Use `initTableInstanceData` for mutable, non-reactive data that belongs to one table instance, such as an interaction anchor or an imperative cache. It runs once after table options, state atoms, and the store have been created. Every feature's initialization hook runs before any feature's `constructTableAPIs` hook.
+Use `initTableInstanceData` for mutable, non-reactive data that belongs to one table instance, such as an interaction anchor or an imperative cache. It runs once after table options, state atoms, and the store have been created. Features are processed in a single pass in registration order; each feature's initialization hook runs just before that feature's `constructTableAPIs` hook, so hooks may rely on data and APIs from features registered earlier.
 
 Use `resetTableInstanceData` to clear that transient data when `table.reset()` runs. Reset hooks run after internally owned table state atoms have been restored to `table.initialState`. They do not reset table state slices or externally controlled state, and `table.reset()` does not rerun `initTableInstanceData`.
 

docs/framework/preact/guide/custom-features.md

@@ -146,7 +146,7 @@ The `getInitialState` method in a table feature is responsible for setting the d
 
 ##### initTableInstanceData and resetTableInstanceData
 
-Use `initTableInstanceData` for mutable, non-reactive data that belongs to one table instance, such as an interaction anchor or an imperative cache. It runs once after table options, state atoms, and the store have been created. Every feature's initialization hook runs before any feature's `constructTableAPIs` hook.
+Use `initTableInstanceData` for mutable, non-reactive data that belongs to one table instance, such as an interaction anchor or an imperative cache. It runs once after table options, state atoms, and the store have been created. Features are processed in a single pass in registration order; each feature's initialization hook runs just before that feature's `constructTableAPIs` hook, so hooks may rely on data and APIs from features registered earlier.
 
 Use `resetTableInstanceData` to clear that transient data when `table.reset()` runs. Reset hooks run after internally owned table state atoms have been restored to `table.initialState`. They do not reset table state slices or externally controlled state, and `table.reset()` does not rerun `initTableInstanceData`.
 

docs/framework/react/guide/custom-features.md

@@ -146,7 +146,7 @@ The `getInitialState` method in a table feature is responsible for setting the d
 
 ##### initTableInstanceData and resetTableInstanceData
 
-Use `initTableInstanceData` for mutable, non-reactive data that belongs to one table instance, such as an interaction anchor or an imperative cache. It runs once after table options, state atoms, and the store have been created. Every feature's initialization hook runs before any feature's `constructTableAPIs` hook.
+Use `initTableInstanceData` for mutable, non-reactive data that belongs to one table instance, such as an interaction anchor or an imperative cache. It runs once after table options, state atoms, and the store have been created. Features are processed in a single pass in registration order; each feature's initialization hook runs just before that feature's `constructTableAPIs` hook, so hooks may rely on data and APIs from features registered earlier.
 
 Use `resetTableInstanceData` to clear that transient data when `table.reset()` runs. Reset hooks run after internally owned table state atoms have been restored to `table.initialState`. They do not reset table state slices or externally controlled state, and `table.reset()` does not rerun `initTableInstanceData`.
 

docs/framework/solid/guide/custom-features.md

@@ -140,7 +140,7 @@ The `getInitialState` method in a table feature is responsible for setting the d
 
 #### initTableInstanceData and resetTableInstanceData
 
-Use `initTableInstanceData` for mutable, non-reactive data that belongs to one table instance, such as an interaction anchor or an imperative cache. It runs once after table options, state atoms, and the store have been created. Every feature's initialization hook runs before any feature's `constructTableAPIs` hook.
+Use `initTableInstanceData` for mutable, non-reactive data that belongs to one table instance, such as an interaction anchor or an imperative cache. It runs once after table options, state atoms, and the store have been created. Features are processed in a single pass in registration order; each feature's initialization hook runs just before that feature's `constructTableAPIs` hook, so hooks may rely on data and APIs from features registered earlier.
 
 Use `resetTableInstanceData` to clear that transient data when `table.reset()` runs. Reset hooks run after internally owned table state atoms have been restored to `table.initialState`. They do not reset table state slices or externally controlled state, and `table.reset()` does not rerun `initTableInstanceData`.
 

docs/framework/svelte/guide/custom-features.md

@@ -140,7 +140,7 @@ The `getInitialState` method in a table feature is responsible for setting the d
 
 #### initTableInstanceData and resetTableInstanceData
 
-Use `initTableInstanceData` for mutable, non-reactive data that belongs to one table instance, such as an interaction anchor or an imperative cache. It runs once after table options, state atoms, and the store have been created. Every feature's initialization hook runs before any feature's `constructTableAPIs` hook.
+Use `initTableInstanceData` for mutable, non-reactive data that belongs to one table instance, such as an interaction anchor or an imperative cache. It runs once after table options, state atoms, and the store have been created. Features are processed in a single pass in registration order; each feature's initialization hook runs just before that feature's `constructTableAPIs` hook, so hooks may rely on data and APIs from features registered earlier.
 
 Use `resetTableInstanceData` to clear that transient data when `table.reset()` runs. Reset hooks run after internally owned table state atoms have been restored to `table.initialState`. They do not reset table state slices or externally controlled state, and `table.reset()` does not rerun `initTableInstanceData`.
 

docs/framework/vue/guide/custom-features.md

@@ -140,7 +140,7 @@ The `getInitialState` method in a table feature is responsible for setting the d
 
 #### initTableInstanceData and resetTableInstanceData
 
-Use `initTableInstanceData` for mutable, non-reactive data that belongs to one table instance, such as an interaction anchor or an imperative cache. It runs once after table options, state atoms, and the store have been created. Every feature's initialization hook runs before any feature's `constructTableAPIs` hook.
+Use `initTableInstanceData` for mutable, non-reactive data that belongs to one table instance, such as an interaction anchor or an imperative cache. It runs once after table options, state atoms, and the store have been created. Features are processed in a single pass in registration order; each feature's initialization hook runs just before that feature's `constructTableAPIs` hook, so hooks may rely on data and APIs from features registered earlier.
 
 Use `resetTableInstanceData` to clear that transient data when `table.reset()` runs. Reset hooks run after internally owned table state atoms have been restored to `table.initialState`. They do not reset table state slices or externally controlled state, and `table.reset()` does not rerun `initTableInstanceData`.
 

examples/lit/basic-subscribe/src/main.ts

@@ -118,18 +118,25 @@ class LitTableExample extends LitElement {
 
   private tableController = new TableController<typeof features, Person>(this)
 
-  private table = this.tableController.table(
-    {
+  // Options are re-synced on every render pass (like the other examples), so
+  // reactive inputs such as `this._data` flow into the table in the same
+  // update that renders them.
+  private tableOptions() {
+    return {
       features,
       columns,
       data: this._data,
-      getRowId: (row) => row.id,
+      getRowId: (row: Person) => row.id,
       enableRowSelection: true,
       atoms: {
         rowSelection: rowSelectionAtom,
       },
       debugTable: true,
-    },
+    }
+  }
+
+  private table = this.tableController.table(
+    this.tableOptions(),
     () => null, // subscribe to no table state by default; use table.subscribe below
   )
 
@@ -141,12 +148,6 @@ class LitTableExample extends LitElement {
     pagination: state.pagination,
   })
 
-  protected updated(changedProperties: Map<string, unknown>) {
-    if (changedProperties.has('_data')) {
-      this.table.setOptions((prev) => ({ ...prev, data: this._data }))
-    }
-  }
-
   private renderColumnFilter(
     context: HeaderContext<typeof features, Person, unknown>,
   ) {
@@ -211,6 +212,8 @@ class LitTableExample extends LitElement {
   }
 
   protected render() {
+    this.table = this.tableController.table(this.tableOptions(), () => null)
+
     return html`
       <div class="demo-root">
         <div>

examples/preact/basic-external-state/tests/e2e/smoke.spec.ts

@@ -102,3 +102,37 @@ test('renders the table without crashing', async ({ page }) => {
     await server.close()
   }
 })
+
+test('updates controlled pagination without console errors', async ({
+  page,
+}) => {
+  const { errors, server } = await openExample(page)
+
+  try {
+    const table = getTable(page)
+    const nextPageButton = page.getByRole('button', {
+      name: '>',
+      exact: true,
+    })
+    const pageStatus = page.getByText(/^Page$/).locator('..')
+
+    await expect(getBodyRows(table).first()).toBeVisible()
+    await expect(pageStatus).toContainText('1 of 100')
+    const firstPageRow = await getFirstBodyRowData(table)
+
+    await nextPageButton.click()
+
+    await expect(pageStatus).toContainText('2 of 100')
+    await expect.poll(() => getFirstBodyRowData(table)).not.toBe(firstPageRow)
+
+    const secondPageRow = await getFirstBodyRowData(table)
+
+    await nextPageButton.click()
+
+    await expect(pageStatus).toContainText('3 of 100')
+    await expect.poll(() => getFirstBodyRowData(table)).not.toBe(secondPageRow)
+    expect(errors).toEqual([])
+  } finally {
+    await server.close()
+  }
+})

examples/react/aggregation/src/main.tsx

@@ -302,7 +302,9 @@ function App() {
         Showing {table.getRowModel().rows.length.toLocaleString()} of{' '}
         {table.getRowCount().toLocaleString()} Rows
       </div>
-      <pre>{JSON.stringify(table.state, null, 2)}</pre>
+      <pre data-testid="table-state">
+        {JSON.stringify(table.state, null, 2)}
+      </pre>
     </div>
   )
 }

examples/react/basic-external-atoms/src/main.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { TanStackDevtools } from '@tanstack/react-devtools'
 import ReactDOM from 'react-dom/client'
 import './index.css'
-import { useCreateAtom, useSelector } from '@tanstack/react-store'
+import { useCreateAtom } from '@tanstack/react-store'
 import {
   createColumnHelper,
   createPaginatedRowModel,
@@ -79,14 +79,8 @@ function App() {
     pageSize: 10,
   })
 
-  // Subscribe to each atom independently — fine-grained reactivity.
-  const sorting = useSelector(sortingAtom)
-  const pagination = useSelector(paginationAtom)
-
-  console.log('sorting', sorting)
-  console.log('pagination', pagination)
-
-  // Create the table and pass your per-slice external atoms.
+  // Pass the per-slice external atoms directly. The React adapter subscribes
+  // through table.store, so no separate useSelector call is needed here.
   const table = useTable(
     {
       key: 'basic-external-atoms', // needed for devtools
@@ -156,7 +150,7 @@ function App() {
       <div className="controls">
         <button
           className="demo-button demo-button-sm"
-          onClick={() => table.setPageIndex(0)}
+          onClick={() => table.firstPage()}
           disabled={!table.getCanPreviousPage()}
         >
           {'<<'}
@@ -177,15 +171,15 @@ function App() {
         </button>
         <button
           className="demo-button demo-button-sm"
-          onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+          onClick={() => table.lastPage()}
           disabled={!table.getCanNextPage()}
         >
           {'>>'}
         </button>
         <span className="inline-controls">
           <div>Page</div>
           <strong>
-            {(table.atoms.pagination.get().pageIndex + 1).toLocaleString()} of{' '}
+            {(table.state.pagination.pageIndex + 1).toLocaleString()} of{' '}
             {table.getPageCount().toLocaleString()}
           </strong>
         </span>
@@ -195,7 +189,7 @@ function App() {
             type="number"
             min="1"
             max={table.getPageCount()}
-            defaultValue={table.atoms.pagination.get().pageIndex + 1}
+            defaultValue={table.state.pagination.pageIndex + 1}
             onChange={(e) => {
               const page = e.target.value ? Number(e.target.value) - 1 : 0
               table.setPageIndex(page)
@@ -204,7 +198,7 @@ function App() {
           />
         </span>
         <select
-          value={table.atoms.pagination.get().pageSize}
+          value={table.state.pagination.pageSize}
           onChange={(e) => {
             table.setPageSize(Number(e.target.value))
           }}
@@ -217,7 +211,9 @@ function App() {
         </select>
       </div>
       <div className="spacer-md" />
-      <pre>{JSON.stringify(table.state, null, 2)}</pre>
+      <pre data-testid="table-state">
+        {JSON.stringify(table.state, null, 2)}
+      </pre>
     </div>
   )
 }

examples/react/basic-external-atoms/tests/e2e/smoke.spec.ts

@@ -84,3 +84,30 @@ test('regenerates table data', async ({ page }) => {
     await server.close()
   }
 })
+
+test('updates from external atoms without an outer React subscription', async ({
+  page,
+}) => {
+  const { errors, server } = await openExample(page)
+
+  try {
+    const table = page.locator('table').first()
+    const nextPageButton = page.getByRole('button', {
+      name: '>',
+      exact: true,
+    })
+    const pageStatus = page.getByText(/^Page$/).locator('..')
+
+    await expect(table.locator('tbody tr').first()).toBeVisible()
+    await expect(pageStatus).toContainText('1 of 100')
+    const firstPageRow = await getFirstBodyRowText(table)
+
+    await nextPageButton.click()
+
+    await expect(pageStatus).toContainText('2 of 100')
+    await expect.poll(() => getFirstBodyRowText(table)).not.toBe(firstPageRow)
+    expect(errors).toEqual([])
+  } finally {
+    await server.close()
+  }
+})

examples/react/basic-external-state/src/main.tsx

@@ -154,7 +154,7 @@ function App() {
       <div className="controls">
         <button
           className="demo-button demo-button-sm"
-          onClick={() => table.setPageIndex(0)}
+          onClick={() => table.firstPage()}
           disabled={!table.getCanPreviousPage()}
         >
           {'<<'}
@@ -175,7 +175,7 @@ function App() {
         </button>
         <button
           className="demo-button demo-button-sm"
-          onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+          onClick={() => table.lastPage()}
           disabled={!table.getCanNextPage()}
         >
           {'>>'}
@@ -215,7 +215,9 @@ function App() {
         </select>
       </div>
       <div className="spacer-md" />
-      <pre>{JSON.stringify(table.state, null, 2)}</pre>
+      <pre data-testid="table-state">
+        {JSON.stringify(table.state, null, 2)}
+      </pre>
     </div>
   )
 }

examples/react/basic-external-state/tests/e2e/smoke.spec.ts

@@ -84,3 +84,40 @@ test('regenerates table data', async ({ page }) => {
     await server.close()
   }
 })
+
+test('updates controlled pagination without render-phase errors', async ({
+  page,
+}) => {
+  const { errors, server } = await openExample(page)
+
+  try {
+    const table = page.locator('table').first()
+    const nextPageButton = page.getByRole('button', {
+      name: '>',
+      exact: true,
+    })
+    const pageStatus = page.getByText(/^Page$/).locator('..')
+
+    await expect(table.locator('tbody tr').first()).toBeVisible()
+    await expect(nextPageButton).toBeEnabled()
+    await expect(pageStatus).toContainText('1 of 100')
+
+    const firstPageRow = await getFirstBodyRowText(table)
+
+    await nextPageButton.click()
+
+    await expect(pageStatus).toContainText('2 of 100')
+    await expect.poll(() => getFirstBodyRowText(table)).not.toBe(firstPageRow)
+    expect(errors.join('\n')).not.toContain('Cannot update a component')
+
+    const secondPageRow = await getFirstBodyRowText(table)
+
+    await nextPageButton.click()
+
+    await expect(pageStatus).toContainText('3 of 100')
+    await expect.poll(() => getFirstBodyRowText(table)).not.toBe(secondPageRow)
+    expect(errors.join('\n')).not.toContain('Cannot update a component')
+  } finally {
+    await server.close()
+  }
+})