-
-
Notifications
You must be signed in to change notification settings - Fork 3.4k
feat(angular): improvements to angularReactivityFeature, try to remove proxies #5921
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
|
| Command | Status | Duration | Result |
|---|---|---|---|
nx affected --targets=test:format,test:eslint,t... |
❌ Failed | 54s | View ↗ |
nx run-many --targets=build -p @tanstack/table-... |
✅ Succeeded | <1s | View ↗ |
☁️ Nx Cloud last updated this comment at 2026-01-06 18:37:23 UTC
01cf821 to
961a7df
Compare
- rename `_setRootNotifier` to `_setTableNotifier` - add strict typings to `toComputed` - add test case for reactivity utils
…skip custom fn from table options
d226238 to
878e7cc
Compare
878e7cc to
b3badb7
Compare
|
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
* progress on rewriting tanstack table with tanstack store * poc for new solid table adapter * fix solid examples * remove temp * fix header groups bug * refactor assignAPIs * svelte somewhat working * feat: move row, cell, headers, and column methods to the prototype save tons of memory * update vue adapter and examples * more vue stuff * update angular table kind of * lit adapter refactor * fix(angular): update test config and added missing injector context * injector context is now needed since we use injectStore * update some unit tests and fix sherif * fix some more tests - angular focussed * update experimental virtualized examples * fix linting and react/preact adapters * disable all but react and preact and table-core for now * fix some shadcn issues * css * test react/preact example tsc * fix a lot of react examples * omg I fixed a tvalue column helper issue! * add tanstack forma example * small make state updater type fix even though it might be removed soon * Use baseStore and derived store to allow external state again * rename a bunch of examples * fix example names * feat(angular): improvements to angularReactivityFeature (#5921) * fix array types and imports * toComputed return a named function, add more granular flags * remove table proxy implementation, improve angular reactivity feature * wip: add flex render custom notifier when table state change * ci: apply automated fixes * wip: angularReactivityFeature replace _rootNotifier with get * ci: apply automated fixes * wip: some renames, types improvements and test cases - rename `_setRootNotifier` to `_setTableNotifier` - add strict typings to `toComputed` - add test case for reactivity utils * ci: apply automated fixes * wip: fix types, add reactive symbol to detect whether a property is reactive * wip: setup benchmark test * wip: skipBaseProperties skip properties that ends with Handler * wip: skipBaseProperties skip properties that ends with Handler, pass skip custom fn from table options * align base branch, fix lazy init * fix table helper types * cleanup lazy signal initializer * table reactivity feature cleanup * flex render cleanup and export FlexRender as directive * refactor injectTable to work with tanstack store reactivity * fix injectTable test * fix test utils test * refactor reactivity handling in angular features and improve prototype assignments * fix row-dnd tsconfig * fix test --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> * chore(angular): using signals into flexRender to avoid re-rendering * feat(angular): flex-render switch to 'tableChange' notifier mode for performance improvements * feat: createTableHook * more createTableHook flex render improvements and fixed some tests * fix other table-core tests * fix more lint errors in react examples * fix preact typeconfig issues in examples * ci: apply automated fixes * fix knip, disable preact-table publishing for now --------- Co-authored-by: riccardoperra <[email protected]> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Those are some experiments with
angularReactivityFeature. The goal of this pr is to remove the proxies and make the table reactive with signals directly via a custom feature.createAngularTable/injectTable return value is currently a proxy into a proxy :
tableproperties and make them reactive when the table signal changesUsing
proxifyTabledoesn't directly lead in issues after the new FlexRender implementation, but the returned table it's just a different object compared to the one obtained via (header|cell).getContext(), which the latter is not reactive.Thanks to table features added in v9, we could move away from
proxyTableby just overriding table/cell/header/column/row props recursively viaTableFeatureinterface.This allows to make all properties reactive via the same logic used by the table proxy right now using
toComputed.Overriding all properties can be costly because if there are a lot of elements, a potential reactive signal would be created for each property of each header/row/column/cell. To work around this, we can disable reactive properties via table options (name to be decided).
skipBasePropertiesnow check via string indexs instead of endsWith/startsWith to improve performance a little when there are many rowsenableExperimentalReactivitywith a newreactivityobject that allows to make reactive properties based on the type of objectsetReactivePropwill now override with a getter that will create the computed lazily. This may improve performance a bit since previously a computed was created synchronously, while now it is created only once the getter is invoked for the first timetable()to handle the entire table as a signal, you now need to calltable.get()// todo
Still in draft, so there may be changes about this.
FlexRender now relies on
ngDoCheckto check if the content is dirtyI introduced a new input (named
flexRenderNotifier, note: tbd) that allows to change this behavior. This can be used to run view checks introduced in the previous release only when the state of the table changes, instead of every time angular determine the view is dirty.Benchmarks
On average, no reactivity takes about 34.11% less time than enabling all reactivity flags