feat: add angular devtools support and fix core devtools reactivity (#6248)

* feat: add angular devtools

* fix(table-devtools): fix table state reactivity

Refactor devtools panel with a more solid-idiomatic approach, using memo and dynamic `useTableState` subscription via Accessor getter to not break reactivity.

* Add devtools in all angular examples

* Use a stable identifier reference to register devtools in table

* Fix dependency versions

* ci: apply automated fixes

* generate instanceId for react-table

* fix basic external store examples
mark table.store as deprecated in adapter table types
replace table.store.state with table.state in examples

* add external atoms example in angular

* update package lock

* ci: apply automated fixes

* update angular adapter for readonly atom reactivity pattern

* add missing angular examples (WIP)

* clean up devtools on examples

* fix some angular reactivity

* ci: apply automated fixes

* fix solid and svelte reactivity issues

* update docs gen

* apply pr feedback

* make state reads consistent in angular examples

* ci: apply automated fixes

* fix infinite render in angular column-pinning-split

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Kevin Van Cott <kevinvandy656@gmail.com>

Author: 3 people

docs/config.json

@@ -936,8 +936,11 @@
         {
           "label": "angular",
           "children": [
-            { "label": "Basic (Inject Table)", "to": "framework/angular/examples/basic-inject-table" },
-            { "label": "Basic (App Table)", "to": "framework/angular/examples/basic-app-table" }
+            { "label": "Basic (injectTable)", "to": "framework/angular/examples/basic-inject-table" },
+            { "label": "Basic (createAppTable)", "to": "framework/angular/examples/basic-app-table" },
+            { "label": "Basic (External State)", "to": "framework/angular/examples/basic-external-state" },
+            { "label": "Basic (External Atoms)", "to": "framework/angular/examples/basic-external-atoms" },
+            { "label": "Header Groups", "to": "framework/angular/examples/column-groups" }
           ]
         },
         {
@@ -1020,15 +1023,22 @@
           "label": "angular",
           "children": [
             { "label": "Column Filters", "to": "framework/angular/examples/filters" },
+            { "label": "Column Filters (Faceted)", "to": "framework/angular/examples/filters-faceted" },
+            { "label": "Fuzzy Search Filters", "to": "framework/angular/examples/filters-fuzzy" },
             { "label": "Column Ordering", "to": "framework/angular/examples/column-ordering" },
             { "label": "Column Pinning", "to": "framework/angular/examples/column-pinning" },
-            { "label": "Column Pinning (Sticky)", "to": "framework/angular/examples/column-pinning-sticky" },
-            { "label": "Column Resizing", "to": "framework/angular/examples/column-resizing-performant" },
+            { "label": "Column Pinning (Split)", "to": "framework/angular/examples/column-pinning-split" },
+            { "label": "Sticky Column Pinning", "to": "framework/angular/examples/column-pinning-sticky" },
+            { "label": "Column Sizing", "to": "framework/angular/examples/column-sizing" },
+            { "label": "Column Resizing", "to": "framework/angular/examples/column-resizing" },
+            { "label": "Performant Column Resizing", "to": "framework/angular/examples/column-resizing-performant" },
             { "label": "Column Visibility", "to": "framework/angular/examples/column-visibility" },
-            { "label": "Row Expanding", "to": "framework/angular/examples/expanding" },
-            { "label": "Column Grouping", "to": "framework/angular/examples/grouping" },
+            { "label": "Expanding", "to": "framework/angular/examples/expanding" },
+            { "label": "Grouping", "to": "framework/angular/examples/grouping" },
+            { "label": "Pagination", "to": "framework/angular/examples/pagination" },
+            { "label": "Row Pinning", "to": "framework/angular/examples/row-pinning" },
             { "label": "Row Selection", "to": "framework/angular/examples/row-selection" },
-            { "label": "Row Selection (Signal)", "to": "framework/angular/examples/row-selection-signal" },
+            { "label": "Sorting", "to": "framework/angular/examples/sorting" },
             { "label": "Kitchen Sink (All Features)", "to": "framework/angular/examples/kitchen-sink" }
           ]
         },
@@ -1192,8 +1202,14 @@
             { "label": "Composable Tables", "to": "framework/angular/examples/composable-tables" },
             { "label": "Custom Plugin", "to": "framework/angular/examples/custom-plugin" },
             { "label": "Sub Components", "to": "framework/angular/examples/sub-components" },
+            { "label": "With TanStack Virtual - Columns", "to": "framework/angular/examples/virtualized-columns" },
+            { "label": "With TanStack Virtual - Rows", "to": "framework/angular/examples/virtualized-rows" },
+            { "label": "With TanStack Virtual - Infinite Scrolling", "to": "framework/angular/examples/virtualized-infinite-scrolling" },
+            { "label": "With TanStack Form", "to": "framework/angular/examples/with-tanstack-form" },
+            { "label": "With TanStack Query", "to": "framework/angular/examples/with-tanstack-query" },
             { "label": "Fetch API data (SPA / SSR)", "to": "framework/angular/examples/remote-data" },
             { "label": "Signal Input", "to": "framework/angular/examples/signal-input" },
+            { "label": "Row Selection (Signal)", "to": "framework/angular/examples/row-selection-signal" },
             { "label": "Editable data", "to": "framework/angular/examples/editable" },
             { "label": "Row Drag & Drop", "to": "framework/angular/examples/row-dnd" }
           ]

docs/framework/angular/guide/migrating.md

@@ -277,17 +277,23 @@ const v9Table = injectTable(() => ({
 
 ### Accessing State
 
-In v8, you accessed state via `table.getState()`. In v9, state is accessed via the store:
+In v8, you accessed state via `table.getState()`. In v9, read the specific
+state slice from `table.atoms.<slice>.get()` where possible. Use `table.state`
+when you need the full flat state shape, such as debug JSON.
 
 ```ts
 // v8
 const state = table.getState()
 const v8 = table.getState()
 const { sorting, pagination } = v8
 
-// v9 - via the store
-const fullState = table.store.state
-const v9 = table.store.state
+// v9 - per-slice reads, preferred for Angular render code
+const sorting = table.atoms.sorting.get()
+const pagination = table.atoms.pagination.get()
+
+// v9 - full-state flat proxy
+const fullState = table.state
+const v9 = table.state
 const { sorting: v9Sorting, pagination: v9Pagination } = v9
 ```
 
@@ -344,7 +350,7 @@ class TableCmp {
 
   // Provide an equality function for object slices
   readonly pagination = computed(
-    () => this.table.store.state.pagination,
+    () => this.table.atoms.pagination.get(),
     { equal: shallow },
   )
 
@@ -732,7 +738,7 @@ The `RowData` type is now more restrictive.
 - [ ] Migrate `get*RowModel()` options to `_rowModels`
 - [ ] Update row model factories to include `Fns` parameters where needed
 - [ ] Update TypeScript types to include `TFeatures` generic
-- [ ] Update state access: `table.getState()` → `table.store.state`
+- [ ] Update state access: `table.getState().slice` → `table.atoms.<slice>.get()` where possible; use `table.state` for full-state/debug reads
 - [ ] Update `createColumnHelper<TData>()` → `createColumnHelper<TFeatures, TData>()`
 - [ ] Replace `enablePinning` with `enableColumnPinning`/`enableRowPinning` if used
 - [ ] Rename `sortingFn` → `sortFn` in column definitions
@@ -747,7 +753,7 @@ The `RowData` type is now more restrictive.
 ## Examples
 
 Check out these examples to see v9 patterns in action:
-- [Basic](../examples/basic)
+- [Basic (Inject Table)](../examples/basic-inject-table)
 - [Basic (App Table)](../examples/basic-app-table)
 - [Filters](../examples/filters)
 - [Column Ordering](../examples/column-ordering)

docs/framework/angular/guide/table-state.md

@@ -28,7 +28,8 @@ A table instance has a few state surfaces:
 
 - `table.baseAtoms` are the internal writable atoms created from the resolved initial state.
 - `table.atoms` are readonly derived atoms exposed per registered state slice.
-- `table.store` is a readonly flat TanStack Store derived by putting all of the registered `table.atoms` together.
+- `table.state` is a readonly flat proxy over the registered `table.atoms`, useful for full-state debug output.
+- `table.store` is the underlying readonly flat TanStack Store. Prefer `table.atoms` or `table.state` in app code.
 
 The Angular adapter provides `angularReactivity(injector)` as the table's reactivity binding. Core readonly atoms are Angular `computed` values, writable atoms are Angular `signal` values, and subscriptions bridge through `toObservable(computed(...), { injector })`. `injectTable` reruns the options initializer when Angular signals read inside it change, then calls `table.setOptions`.
 
@@ -80,11 +81,11 @@ const pagination = this.table.atoms.pagination.get()
 const sorting = this.table.atoms.sorting.get()
 ```
 
-You can also read the current flat store snapshot:
+Use `table.state` when you need the current flat state shape, such as debug JSON:
 
 ```ts
-const tableState = this.table.store.state
-const pagination = this.table.store.state.pagination
+const tableState = this.table.state
+const stateJson = JSON.stringify(this.table.state, null, 2)
 ```
 
 Atom reads are signal reads in Angular. If `this.table.atoms.pagination.get()` is used in a template expression, `computed(...)`, or `effect(...)`, Angular tracks it and updates when that atom changes.
@@ -115,11 +116,11 @@ readonly pagination = computed(
 readonly pageIndex = computed(() => this.pagination().pageIndex)
 ```
 
-You can also select from the flat store if that is more convenient.
+You can also select from the flat state proxy if that is more convenient, but prefer direct atoms for narrow render reads.
 
 ```ts
 readonly pagination = computed(
-  () => this.table.store.state.pagination,
+  () => this.table.state.pagination,
   { equal: shallow },
 )
 ```

docs/framework/angular/reference/functions/injectTable.md

@@ -9,7 +9,7 @@ title: injectTable
 function injectTable<TFeatures, TData>(options): AngularTable<TFeatures, TData>;
 ```
 
-Defined in: [packages/angular-table/src/injectTable.ts:92](https://github.com/TanStack/table/blob/main/packages/angular-table/src/injectTable.ts#L92)
+Defined in: [packages/angular-table/src/injectTable.ts:106](https://github.com/TanStack/table/blob/main/packages/angular-table/src/injectTable.ts#L106)
 
 Creates and returns an Angular-reactive table instance.
 

docs/framework/angular/reference/type-aliases/AngularTable.md

@@ -6,10 +6,34 @@ title: AngularTable
 # Type Alias: AngularTable\<TFeatures, TData\>
 
 ```ts
-type AngularTable<TFeatures, TData> = Table<TFeatures, TData>;
+type AngularTable<TFeatures, TData> = Table<TFeatures, TData> & object;
 ```
 
-Defined in: [packages/angular-table/src/injectTable.ts:31](https://github.com/TanStack/table/blob/main/packages/angular-table/src/injectTable.ts#L31)
+Defined in: [packages/angular-table/src/injectTable.ts:33](https://github.com/TanStack/table/blob/main/packages/angular-table/src/injectTable.ts#L33)
+
+## Type Declaration
+
+### state
+
+```ts
+readonly state: Readonly<TableState<TFeatures>>;
+```
+
+The current table state exposed as a flat proxy. Prefer
+`table.atoms.<slice>.get()` when reading a specific slice.
+
+### ~~store~~
+
+```ts
+readonly store: Table<TFeatures, TData>["store"];
+```
+
+#### Deprecated
+
+Prefer `table.atoms.<slice>.get()` for template/render reads
+of a specific state slice, `table.state` for full-state debug snapshots, or
+Angular computed values around explicit selectors. `table.store.state` is a
+current-value snapshot and is easy to misuse in render code.
 
 ## Type Parameters
 

docs/framework/angular/reference/type-aliases/SubscribeSource.md

@@ -13,7 +13,7 @@ type SubscribeSource<TValue> =
 | ReadonlyStore<TValue>;
 ```
 
-Defined in: [packages/angular-table/src/injectTable.ts:25](https://github.com/TanStack/table/blob/main/packages/angular-table/src/injectTable.ts#L25)
+Defined in: [packages/angular-table/src/injectTable.ts:27](https://github.com/TanStack/table/blob/main/packages/angular-table/src/injectTable.ts#L27)
 
 ## Type Parameters
 

docs/framework/lit/reference/classes/TableController.md

@@ -5,7 +5,7 @@ title: TableController
 
 # Class: TableController\<TFeatures, TData\>
 
-Defined in: [TableController.ts:132](https://github.com/TanStack/table/blob/main/packages/lit-table/src/TableController.ts#L132)
+Defined in: [TableController.ts:139](https://github.com/TanStack/table/blob/main/packages/lit-table/src/TableController.ts#L139)
 
 A Lit ReactiveController for TanStack Table integration.
 
@@ -57,7 +57,7 @@ class MyTable extends LitElement {
 new TableController<TFeatures, TData>(host): TableController<TFeatures, TData>;
 ```
 
-Defined in: [TableController.ts:143](https://github.com/TanStack/table/blob/main/packages/lit-table/src/TableController.ts#L143)
+Defined in: [TableController.ts:150](https://github.com/TanStack/table/blob/main/packages/lit-table/src/TableController.ts#L150)
 
 #### Parameters
 
@@ -77,7 +77,7 @@ Defined in: [TableController.ts:143](https://github.com/TanStack/table/blob/main
 host: ReactiveControllerHost;
 ```
 
-Defined in: [TableController.ts:136](https://github.com/TanStack/table/blob/main/packages/lit-table/src/TableController.ts#L136)
+Defined in: [TableController.ts:143](https://github.com/TanStack/table/blob/main/packages/lit-table/src/TableController.ts#L143)
 
 ## Methods
 
@@ -87,7 +87,7 @@ Defined in: [TableController.ts:136](https://github.com/TanStack/table/blob/main
 hostConnected(): void;
 ```
 
-Defined in: [TableController.ts:244](https://github.com/TanStack/table/blob/main/packages/lit-table/src/TableController.ts#L244)
+Defined in: [TableController.ts:251](https://github.com/TanStack/table/blob/main/packages/lit-table/src/TableController.ts#L251)
 
 Called when the host is connected to the component tree. For custom
 element hosts, this corresponds to the `connectedCallback()` lifecycle,
@@ -111,7 +111,7 @@ ReactiveController.hostConnected
 hostDisconnected(): void;
 ```
 
-Defined in: [TableController.ts:248](https://github.com/TanStack/table/blob/main/packages/lit-table/src/TableController.ts#L248)
+Defined in: [TableController.ts:255](https://github.com/TanStack/table/blob/main/packages/lit-table/src/TableController.ts#L255)
 
 Called when the host is disconnected from the component tree. For custom
 element hosts, this corresponds to the `disconnectedCallback()` lifecycle,
@@ -136,7 +136,7 @@ ReactiveController.hostDisconnected
 table<TSelected>(tableOptions, selector?): LitTable<TFeatures, TData, TSelected>;
 ```
 
-Defined in: [TableController.ts:163](https://github.com/TanStack/table/blob/main/packages/lit-table/src/TableController.ts#L163)
+Defined in: [TableController.ts:170](https://github.com/TanStack/table/blob/main/packages/lit-table/src/TableController.ts#L170)
 
 Returns the Lit-backed table instance for the current render pass.
 

docs/framework/lit/reference/type-aliases/LitTable.md

@@ -6,7 +6,7 @@ title: LitTable
 # Type Alias: LitTable\<TFeatures, TData, TSelected\>
 
 ```ts
-type LitTable<TFeatures, TData, TSelected> = Table<TFeatures, TData> & object;
+type LitTable<TFeatures, TData, TSelected> = Omit<Table<TFeatures, TData>, "store"> & object;
 ```
 
 Defined in: [TableController.ts:30](https://github.com/TanStack/table/blob/main/packages/lit-table/src/TableController.ts#L30)
@@ -41,7 +41,7 @@ readonly state: Readonly<TSelected>;
 ```
 
 The selected state of the table. This state may not match the structure of
-`table.store.state` because it is selected by the `selector` function that
+the full table state because it is selected by the selector function that
 you pass as the 2nd argument to `controller.table()`.
 
 #### Example
@@ -54,6 +54,19 @@ const table = this.tableController.table(options, (state) => ({
 console.log(table.state.globalFilter)
 ```
 
+### ~~store~~
+
+```ts
+readonly store: Table<TFeatures, TData>["store"];
+```
+
+#### Deprecated
+
+Prefer `table.state` for render reads,
+`table.atoms.<slice>.get()` for slice snapshots, or `table.Subscribe` for
+explicit subscriptions. `table.store.state` is a current-value snapshot and
+is easy to misuse in render code.
+
 ### Subscribe()
 
 ```ts

docs/framework/preact/guide/create-table-hook.md

@@ -2,7 +2,7 @@
 title: createTableHook Guide
 ---
 
-`createTableHook` is an advanced API for building reusable, composable table configurations in Preact. It mirrors the [React `createTableHook` API](../react/guide/create-table-hook) — you define features, row models, and pre-bound components once, then reuse them across multiple tables with minimal boilerplate.
+`createTableHook` is an advanced API for building reusable, composable table configurations in Preact. It mirrors the [React `createTableHook` API](../../react/guide/create-table-hook) — you define features, row models, and pre-bound components once, then reuse them across multiple tables with minimal boilerplate.
 
 > **When to use it:** Use `createTableHook` when you have multiple tables that share the same configuration. For a single table, `useTable` is sufficient.
 
@@ -165,5 +165,5 @@ Same as React: `table.AppTable`, `table.AppHeader`, `table.AppCell`, and `table.
 
 ## See Also
 
-- [React createTableHook Guide](../react/guide/create-table-hook) — The React guide has more detailed examples and the same API.
-- [Composable Tables (React)](../react/examples/composable-tables) — Reference implementation (Preact API mirrors React).
+- [React createTableHook Guide](../../react/guide/create-table-hook) — The React guide has more detailed examples and the same API.
+- [Composable Tables (React)](../../react/examples/composable-tables) — Reference implementation (Preact API mirrors React).

docs/framework/preact/reference/functions/useTable.md

@@ -9,7 +9,7 @@ title: useTable
 function useTable<TFeatures, TData, TSelected>(tableOptions, selector?): PreactTable<TFeatures, TData, TSelected>;
 ```
 
-Defined in: [useTable.ts:103](https://github.com/TanStack/table/blob/main/packages/preact-table/src/useTable.ts#L103)
+Defined in: [useTable.ts:113](https://github.com/TanStack/table/blob/main/packages/preact-table/src/useTable.ts#L113)
 
 Creates a Preact table instance backed by TanStack Store atoms.