I create webpages that have a lot of data that’s derived from Microsoft excel spreadsheets. HTML Tables are very aggravating to work with. Which is why it’s great to have a nice CSV, I dare to say, stack. Maybe I’m using the wrong terminologies, but I have a stack that I use on RapidWeaver classic that is a CSV stack that has been put great big spreadsheet of information on my webpage. Can you create something that will allow me to use a CSV spreadsheet?
I have created a Custom Component that demonstrates how a CSV file can be read and displayed on an Elements webpage, see the thread:
Custom Component using PHP to read CSV?
While it is fairly specific at the moment, to test out the concept, it shouldn’t be difficult to modify it to be more generalised. It depends on what output format you want?
i need to import some data so i asked chatgtp to create this but now i am stuck
https://play.tailwindcss.com/taidL3SPUc
alpine js and tailwind, my spreadsheet is not read, no idea to set up spreadsheet
might not work anyway sometimes chat is not perfect
I tried it and it didn’t work for me. 
I am working on a more generalised CSV version and have just produced this, as an example:
2 Likes
Cool I asked 3 different ais none worked even asked just using js rather than alpine even asked it to include error checking they reported multiple areas not working
It didn’t work for me either. But I wasn’t sure if I made an error, so I was going to wait until I posted this. I am looking for an element that will use a CSV file created in Excel or Numbers. Foundry had a good one and when they upgraded to F3, that went away. Weaver Space had a good one. But I still use the original foundry because I have no errors when I use it.
@SaturnWeb What sort of output are you looking to create on a webpage? Is it something similar to the example above?
Hey guys,
I was mulling this over & I was wondering what you guys thought would be the easiest way for the general public and the 95% of the user-base to modify data (using an online file) ie. for a client that doesn’t use rapidweaver/elements/etc or someone that doesn’t want to have to republish.
On one hand you have csv, but you have extra steps to modify and save it out in a spreadsheet program.
Or json file, which can be directly edited in an ftp program (which the user will need anyway) It would look like this:
{
"people": [
{
"name": "John Smith",
"age": "21"
},
{
"name": "Emma Johnson",
"age": "24"
}
]
}
I would appreciate as much feedback as I can get on this.
Thanks,
Bill
Stack-Its
I have posted about an updated generalised CSV Table Custom Component here: CSV Table Component.
Hi @Bill
I am not sure what you are asking here?
Comparing CSV to JSON?
Creating JSON, I would think is more complicated than just exporting a CSV file from a spreadsheet or a database App like Panorama?
I guess it depends where the data to be used to modify an online file is sourced from?
@logrunner
No I think a starter json file should be created for an end user, but if they wanted to edit it, they would just use a simple text editor.
AI is ok if you ask it to load from local rather than web, error checking and success
kind of working in Elements now, only view in browser
1 Like
Have you tried my CSV Table Example upload? You do have to correct the filename in the Filename Property. This works in Preview (which I assume is what you mean by a Browser?).
I used Cursor to provide the base code for mine and then massaged it into a Custom Component. Cursor seems to be really good.
My next step is to change it to handle JSON as well as CSV.
yes tried your example excellent, I do not like to stop until it works, I just used cursor, added the path, so not played much more, it works once I click preview and view in safari
I was amazed it worked after trying web address version
here is the current state, I have no idea re js, still trying to grasp the basics
elementsapp://downloadDocument/vs4AyvBDGe5u
I did just leave it in the same folder and use the local address and it works so could just work on external to Elements
Yes, except my tables would be way more complicated than that. I am using tables that come from the federal government. And I found that there is a stack from elixir graphics that was under foundry to that works very well. I was able to use it with large tables. And I didn’t have to do a lot of programming, which is the point of using stacks with RapidWeaver. I just left the stack to the table in my resources and it worked perfectly.
It would be helpful if you explained this a little further. Number of columns, headings, totals, row count, colours, formatting etc
If it can be done in a stack in Rapidweaver it’s likely some clever person could do it in Elements - probably not as a standard element but a custom component.
just for my check not sure sure how big a file could be read, I added more columns and data, still not good enough for your requirement though, but for my purpose it answers my question and need, now to see how it can view it in Elements and not just the browser
all I had to do was add - ./resources/data.csv
3 Likes
Coming to a Custom HTML Component shortly, here is a preview:
It’s in a Custom HTML Element already but I need to setup the Properties so that the table can be configured to a user’s requirements.
This handles: any number of columns, multi-column sorting, search|filtering and pagination. It is currently reading a JSON file but will support CSV as well.
It’s fantastic what we can do with Elements, there is an awful lot of potential here. Looking forward to being able to package up these Custom Components. 
This was created with a lot of assistance from Cursor, which I am getting more impressed with as I am using it. It seems very “human” in nature.
A small example of part of the chat to create the code:
Me: The multi-column sort is working but to sort by column1, then column2 and finally column3, you have to select column3 first, then column2 and finally column1. so it is back to front.
Cursor: I understand the issue. The current implementation adds new sort columns to the beginning of the list, which results in the reverse order of selection. Let’s modify the logic to add new sort columns to the end of the list instead, so the order of selection is preserved.
3 Likes