lit table data not reactive
I'm trying to set up a table using the lit adapter with my data stored as a nanostore atom. In my console.log output, I can see that my lit element's render function is being called when the nanostore that contains the data updates, and that the render function does in fact see the updated values for the data. However, the table continues to dispaly the initial values.
I tried, as part of debugging, using the vanilla js createTable function from @tanstack/table-core with as close to the same options as I could (that function seems to require a few things be present in the options that the lit controller doesn't?). When I run the table this way, the data is reactive, but the table is not (clicking headers does not resort the data).
I'm having trouble figuring out what I might be doing wrong, and would appreciate any pointers on how to debug this. also, please forgive the bad tagging, a tag is required but none seem appropriate.
I tried, as part of debugging, using the vanilla js createTable function from @tanstack/table-core with as close to the same options as I could (that function seems to require a few things be present in the options that the lit controller doesn't?). When I run the table this way, the data is reactive, but the table is not (clicking headers does not resort the data).
I'm having trouble figuring out what I might be doing wrong, and would appreciate any pointers on how to debug this. also, please forgive the bad tagging, a tag is required but none seem appropriate.
18 Replies
optimistic-gold•8mo ago
these examples seem reactive: https://tanstack.com/table/latest/docs/framework/lit/examples/row-selection
I guess you'd have to share an example of it not working
Lit TanStack Table Row Selection Example | TanStack Table Docs
An example showing how to implement Row Selection in Lit using TanStack Table.
eastern-cyanOP•8mo ago
https://github.com/lschierer/EvonyTKRTips/blob/astrov5_try1/packages/starlight/src/components/generals/generalTable.ts
the tip of this branch is a reactive table with non-reactive data. if I change out the contents of the nanostore, the table will reflect old data, but the table sorts correctly.
GitHub
EvonyTKRTips/packages/starlight/src/components/generals/generalTabl...
MonoRepo for Evony TKR Tips Tools. Contribute to lschierer/EvonyTKRTips development by creating an account on GitHub.
eastern-cyanOP•8mo ago
I can see at line 163 that the render() function does in fact have the new data, so I'm very confused about why the table doesn't render with it
optimistic-gold•8mo ago
I see
optimistic-gold•8mo ago
so this is how it works internally (roughly). Looks like a
host.requestUpdate() needs to be called, which we currently on have setup for state updates
eastern-cyanOP•8mo ago
ah!
optimistic-gold•8mo ago
does calling
this.tableController.host.requestUpdate(); work somewhere?eastern-cyanOP•8mo ago
https://github.com/lschierer/EvonyTKRTips/blob/astrov5_try1/packages/starlight/src/components/generals/generalTable.ts commit
f43dab4
I tried it on lines 114, 146, and 220 in succession (I didn't remove them so you can see where I put them) I don't see a change.
114 is the one I expected to work.
eastern-cyanOP•8mo ago
I ended up switching from the lit adapter to the vanilla js adapter. at commit https://github.com/lschierer/EvonyTKRTips/tree/2389cb630257e9974d72759b0e62637c2869b22c I have it working as I need it to.
the key difference appears to be line 78 to 82 of PairingTable.ts where I get the current options then immediately set them with the fresh data. Looking at the screenshot @KevinVandy shared, it appears that the reactive controller that the lit adapter uses doesn't touch the data
the key difference appears to be line 78 to 82 of PairingTable.ts where I get the current options then immediately set them with the fresh data. Looking at the screenshot @KevinVandy shared, it appears that the reactive controller that the lit adapter uses doesn't touch the data
GitHub
EvonyTKRTips/packages/starlight/src/components/generals/PairingTabl...
MonoRepo for Evony TKR Tips Tools. Contribute to lschierer/EvonyTKRTips development by creating an account on GitHub.
optimistic-gold•8mo ago
If we need to pr to the lit adapter to make data and columns reactive, we can do that
eastern-cyanOP•8mo ago
I'm not sure how to test that? I'm not quite sure how to patch an npm
I just wanted to share my results in case its useful for anyone else
I do have to say that despite the learning curve and the trouble I had with getting the data reactive, I'm super impressed with the table library, I've been struggling with performance for months now displaying a bunch of data that I transform based on form options and this has solved nearly all of those problems.
optimistic-gold•8mo ago
contributing a fix would be as easy as making a pr for this file: https://github.com/TanStack/table/blob/main/packages/lit-table/src/index.ts
GitHub
table/packages/lit-table/src/index.ts at main · TanStack/table
🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table - TanStack/table
eastern-cyanOP•8mo ago
and to test it, I'd copy that manually into place into my node_modules directory?
optimistic-gold•8mo ago
we have examples that can be run in the repo
optimistic-gold•8mo ago
here's a full contributing guide https://github.com/TanStack/table/blob/main/CONTRIBUTING.md
GitHub
table/CONTRIBUTING.md at main · TanStack/table
🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table - TanStack/table
eastern-cyanOP•8mo ago
GitHub
fix dynamic data updates in the Lit Table Adapter by lschierer · Pu...
this fixes an issue I discussed in discord where with the lit table
adapter, updating a data array did not get reflected by the table.
It is a one-line change to the TableController, and a new exam...
optimistic-gold•8mo ago
Awesome. Thanks for spending time to make this better for everyone
eastern-cyanOP•8mo ago
of course. that's how open source works. I just need help getting there because I'm honestly not great with typescript so figuring out even simple fixes like this on my own is sometimes a stretch