Comments (7)
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.
from active-table.
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 :)
from active-table.
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.
from active-table.
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.
from active-table.
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.
from active-table.
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
from active-table.
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!
from active-table.
Related Issues (20)
- navigator is not defined when using with NextJs HOT 5
- Table becomes laggy when displaying a long table HOT 1
- ERROR: ResizeObserver loop completed with undelivered notifications. HOT 1
- Restoring table with column types HOT 5
- CSV export is missing formatting options to be useful
- Improvement Suggestion: Change Cursor Type for Non-Editable Select Cells
- Custom buttons
- Data and display issues HOT 1
- Feature request: Range Selection and Copy Paste
- Component not loading inside Shadow DOM. Throws: Cannot read properties of null (reading 'offsetWidth') HOT 1
- Non-editable table HOT 1
- Active table column options are not working
- Pasting on windows machine leaves "\r" at the end of each cell
- How to get inputted data HOT 6
- Persist table's column types HOT 1
- Add complex data to select or label HOT 2
- Active Table removes/auto moves up empty columns
- SvelteKit - Unable to set availableDefaultColumnTypes={['Number']} HOT 2
- When using activetable within vue and setting tablestyle getting following error HOT 4
- How to use Methods HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from active-table.