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
[vue table] row values cache doesn't play well with vue proxy-based reactivity #4876
Comments
This library won't reprocess |
That reading makes sense but I'm having trouble pinpointing where in the core package this limitation is introduced as the only instances of Do you think it's possible to fix this by only touching the vue adapter, or is the issue with the |
As far I can see there is no way to do it in the adapter without taking a performance penalty. Vue reactivity makes use of proxy objects to trace dependency changes. the memo function essentially only does this to track changes. const depsChanged =
newDeps.length !== deps.length ||
newDeps.some((dep: any, index: number) => deps[index] !== dep) So it only will notice a change if it's a primitive value that has changed or the reference of an object/array changed. Maybe exposing a manual trigger that you can hook up with a "watch" function could be a useful api |
That all makes sense, thanks for discussing. |
Hello, circling back to this comment as this becomes a deal breaker for our project now. I'd like to ask the maintainer @tannerlinsley whether this issue can be acknowleged. I'll try and get an approval to work on it in tanstack. I just like to have a prospect of this being merged into upstream. I'm suspecting I'll need some changes in the core module, not only the wrapper. |
Okay I revisited the issue and came to the conclusion that it's actually not the memo function. The objects in tanstack are still the proxies so vue reactivity is well maintained. So what's the issue? the It'll cache the value and never invalidates, unless the row gets rebuild, which happens only if the reference to the object in the This sandbox i made visualized the problem quite well: https://codesandbox.io/p/github/jonatan-zint-tfs/vue-tanstack-example/main?file=/src/components/Table.vue:97,10&workspaceId=14f3e36b-abb4-4b1a-96c2-08e79b17d539 I don't know how this problem doesn't replicate in react apparently. I'd ask @tannerlinsley if we can turn this cache off with a flag, or pass a custom |
Actually I just pushed an example where you would return a However that's not really intuitive |
@tannerlinsley @KevinVandy could you please take a look at this issue and associated offer to help develop a patch (if it has a chance of being merged)? There are a few vue issues that I think are all related to this.. |
When using tanstack table with proxy objects as row data, copying cell values to the cache is unwanted behavior as they are no longer connected to the row proxy object. In these scenarios i'd like to turn off the value cache. ref TanStack#4876
Sadly this issue seems to be completely disregarded - I guess we need to move forward using a fork |
This may not be the right place for this but it looks related..... I have a very large table and I'm literally just trying to update a single row within the table after the user uploads a file. So far the only way I can trigger an update in the table is by redoing the http fetch data call, which changes the root reference and the entire table re-renders...... how do I just update a single row, or force a refresh of the data? This is insanely confusing for something so simple |
Describe the bug
While creating table component with vue using @tanstack/table I realized that the tanstack table doesn't play well with reactivity using
If you change the contents of props.data (like push a new element) it's perfectly fine for the vue reactivity model. Even the data() function does get reexcecuted - so I'm guessing that the memo() function in the utils of tanstack table decides that props.data did not actually change and it won't get propagated to the row model. See the codesandbox attached, which will make the issue clear I think.
Your minimal, reproducible example
https://codesandbox.io/p/sandbox/busy-browser-61p7of?welcome=true
Steps to reproduce
get data()
when setting up the table withuseVueTable
Expected behavior
I'd like to harmonize vue reactivity with the tanstack reactivity at this point.
I can workaround this issue by copying the data before using it in data() - but that'd create an unnecessary extra copy step:
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
OS: Windows11 with WSL2 on Ubuntu 22.04
Browser: FF 113
react-table version
8.7.9
TypeScript version
5.0.4
Additional context
No response
Terms & Code of Conduct
The text was updated successfully, but these errors were encountered: