I have an app where I would like to stream Table data updates (add additional rows & update cells)
Displayed table data only updates when
data changes reference. In other words, the table does not visually change despite table.options.data being reactive and up-to-date with changes.
I've taken the Vue basic example and forked it to demonstrate periodically adding a new Person to the table data.
https://codesandbox.io/p/sandbox/admiring-hypatia-hgsgwt
In my example I get the table to show the new data by re-assigning the data object but the documentation leads me to believe this is not the correct way.
🧠Make sure your data option is only changing when you want the table to reprocess. Providing an inline [] or constructing the data array as a new object every time you want to render the table will result in a lot of unnecessary re-processing. This can easily go unnoticed in smaller tables, but you will likely notice it in larger tables. (https://tanstack.com/table/v8/docs/api/core/table)My overall objective is to replace VuePrime DataTable with TanStack Table in my existing application. My application displays a table of support tickets synced over websocket. The websocket pushes out new tickets that should be added to the current table data and displayed. Additionally the websocket pushes out updates to a existing tickets where the table cell data should be updated. This allows us to live-stream a ticket queue that a pool of users work on together. I am plagued by my lack of understanding here and it is driving me crazy. Any advice or discussion would be greatly appreciated. Thank you for your time and best of luck with your projects. Possibly related questions: https://discord.com/channels/719702312431386674/1157489464499773451 https://discord.com/channels/719702312431386674/1030132003116421170
Table | TanStack Table Docs
useReactTable / createSolidTable / useVueTable / createSvelteTable
`tsx
0 Replies