feat: add support for reactivity in Vue-adapter #5687
Conversation
|
Why not add ref support for all the other options as well? as of writing I'm really struggling with making it respect changes to the (sorry for the small side tangent rant) |
|
We've been looking into improvements for both Vue and Solid reactivity. Would want to confirm that this brings no breaking changes for v8. Alternatively, we could have breaking changes if larger parts of the reactivity needed to be rethought for v9 in the alpha branch. |
|
Based on my simple (and limited) testing, this should not be a breaking change. The only thing it does is allow and add support for reactivity, using Vue's I have just started using this library, so I created this PR to fix some bugs I experienced when using JS getters (as per the documentation) together with Tanstack Query. Adding support for reactivity fixed my issue, so I made a PR for that 😄 I do agree that the library should have reactivity on the other options as well, and I might be able to fix that in another PR another time in the future 🚀 Maybe we should create an issue with a list of improvements that should be made to the Vue-adapter? I would be happy to have a look at it! |
☁️ Nx Cloud ReportCI is running/has finished running commands for commit 0baf66c. As they complete they will appear below. Click to see the status, the terminal output, and the build insights. 📂 See all runs for this CI Pipeline Execution ✅ Successfully ran 2 targetsSent with 💌 from NxCloud. |
|
@OlaAlsaker @jariz I think we should look at making all possible table options that need to be reactive reactive, but possibly save it for v9. A pr to alpha could be made now for that though. The alpha branch is in heavy development right now. Can ship the change for reactive data now. |
|
I don't know if it's this PR, or #5694 this one, but this has made vue-datatable beyond unusable. My table crashes 100% of the time in chrome with 100+ GB of memory. I have ~20,000-50,000 rows which is handled with absolute zero effort normally. IMO the benefit of tanstack table is this feature... it's the same as if i use a So yeah - I dont know if this is technically "breaking" but i had to revert this, and it definitely broke my current use case. I havent gotten a chance to look at how to actually turn this feature off or read the code/changes, but just wanted to make a comment now while im here reverting it. I'll look more in detail later. This is the current way I use it: const table = useVueTable({
get data() {
return data.value;
},
get columns() {
return columns.value;
},
state: {
get expanded() {
return expanded.value;
},
get sorting() {
return sorting.value;
},
get rowSelection() {
return rowSelection.value;
},
},
initialState: {
pagination: {
pageIndex: 0,
pageSize: 250,
},
},
enableRowSelection: true,
getCoreRowModel: getCoreRowModel(),
getExpandedRowModel: getExpandedRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getRowId: row => row[rowKey.value],
getSortedRowModel: getSortedRowModel(),
getSubRows: row => row.sub_rows,
onExpandedChange,
onSortingChange,
onRowSelectionChange,
debugTable: false,
}); |
Thanks for the report! Can you check if the latest version (#5698) fixes the problem? If not, I think I will just revert the reactivity-changess all together and instead push it to the v9 branch. Or, at least put it behind a This was of course not meant to be a breaking change. Sorry for the inconvenience 😇 (cc @KevinVandy ) |
|
@OlaAlsaker first thanks for looking into adding reactivity support for Vue. It would be amazing to eventually get to a point where all table properties can be reactive (e.g. expanded, selection, etc.). I quickly tried the latest version with reactive data support and something is still feels off about reactivity. Here's my stackblitz: https://stackblitz.com/edit/tanstack-table-dv5fcj?file=src%2FApp.vue&preset=node
But strangely table will update if data is coming from Although in my actual project data flows through computed, Table still doesn't seem to re-render even though computed value is changing. We use |
Thanks for the report! Took a look at your Stackblitz, and it looks like you have small error in your example: <button class="border p-2" @click="addRow">Add row</button>
<button class="border p-2" @click="addRow">Add row immutable</button>Both of your test-buttons triggers the same function on click. Also your function Test out your We use const data = ref([{ id: 1, name: 'John' }]);
// This will NOT work ❌
data.value.push({ id: 2, name: 'Doe' });
// This will work ✅
data.value = [...data.value, { id: 2, name: 'Doe' }];As for the use together with Tanstack Query (vue-query), I find myself having to use const { data } = useQuery(...);
const table = useVueTable({
data: computed(() => data.value ?? []),
columns,
getCoreRowModel: getCoreRowModel(),
}); |
|
Hey @OlaAlsaker cool deal! I will have to try that later as I just came down with covid so now im lying in bed. Hopefully someone else is able to take over with help in the meantime. thanks for your quick response checking into it! |
This PR updates the
useVueTablecomposable in the TanStack Table Vue adapter to support reactive data. Now, when you pass a reactive ref to the data option, the table will automatically update when the data changes.Changes
useVueTableto check if the data option is a ref and handle it correctly.Example usage
Related issues or discussions
This will resolve discussion #5102