How to implement server related features with active-table ?
insidesmart opened this issue · 7 comments
Great work on the project so far. Kudos for your efforts.
-
Is there a way to interact with server data with active-table component.
- For eg. if I would like to paginate data or filter data in a database via an api
- For eg. if I would like to save data shown in active-table component to database via an api
-
will active-table work in SSR mode. for eg. can I render a page in sveltekit SSR mode with active-table component in it ?
Wish you good luck for your efforts.
Hey @insidesmart, thankyou for raising the issue.
Rendering pagination pages procedurally is something that we have on our roadmap and plan to start in the near future (that goes for filtering too).
In terms of saving things to the db - you can use any of the event listeners or the methods to retrieve the latest table data and save it to your database that way. I think save logic depends on how your website works and ultimately how you want to deal with it so the aforementioned options are your best shot, nevertheless if you have something else in mind let me know!
SSR is one of those tricky subjects for web components as the tools (document/window) that we use to build/manipulate it are not present during build time. However, in short to answer your question - YES you can use it with SSR frameworks such as SvelteKit and NextJS, but the table will need to be built in the browser (it will not be pre-rendered), which in most cases is usually just fine. I have an example for NextJS, but currently don't have one for SvelteKit. Because this component is created using the LIT framework, it should hopefully work similarly to the Svelte example, but let me get back to you on that.
Here is a working example for SvelteKit.
One problem is that the values need to be stringified when passed into properties that use camel case names e.g. frameComponentsStyles. I have tried to fix this problem but believe it has something to do with the Lit element framework - hence I have raised the following discussion.
Let me know if you have any questions.
Thanks for the quick turnaround. Nice to see an example for sveltekit.
SSR limitation (around prerendering) is clear now. Will explore events/methods for saving data via api. Thanks for the pointers.
Looking forward for the new features - Paginating/Filtering of data via api. I am sure that makes active-table - superactive :)
Update on the Svelte problem:
It appears that the problem is on the Svelte/Sveltekit side of things as it expects property names to be lower cased - which by convention is incorrect as property names are case sensitive. Following this I have raised the following issue in the Svelte repo.
We will have to see how quickly it will be solved, but if it takes too long - I can always migrate this component to an alternative web component framework that I have developed but haven't released yet (it is already being used in the Deep Chat component) as it takes care of the Svelte problem. So let's stay tuned and see where things progress.
Thanks for the followup and taking efforts to fix it in right places.
Interesting to know about your custom web component framework. Hope we will learn about it publicly soon.
Hi, Svelte has made the necessary changes and component data can now be used in camel cased properties without the need for stringification. To note, this is available for Svelte version 4.2.2 and above, the older versions will need their values to be stringified.
I have updated the documentation with the following examples:
Svelte
SvelteKit
I will close this issue for now as I am currently working on fixing a couple of styling bugs and finishing off adding a new feature for dragging rows and columns. Once these are done, I will be able to proceed with creating the ability for procedurally updating table data when using filtering/pagination with server requests.
I will update this issue once the work for that begins and when it finishes. Thanks!