# CSV spreadsheet

**URL:** <https://forums.realmacsoftware.com/t/csv-spreadsheet/44715>\
**Category:** Elements API\
**Created:** [September 22, 2024, 11:56pm UTC](https://forums.realmacsoftware.com/t/csv-spreadsheet/44715 "2024-09-22T23:56:37Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![SaturnWeb](https://avatars.discourse-cdn.com/v4/letter/s/839c29/32.png) [@SaturnWeb](https://forums.realmacsoftware.com/u/SaturnWeb)\
**Post date:** [September 22, 2024, 11:56pm UTC](https://forums.realmacsoftware.com/t/csv-spreadsheet/44715/1 "2024-09-22T23:56:37Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![logrunner](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@logrunner](https://forums.realmacsoftware.com/u/logrunner)\
**Post date:** [September 23, 2024, 10:39am UTC](https://forums.realmacsoftware.com/t/csv-spreadsheet/44715/2 "2024-09-23T10:39:51Z")

</div>

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?](https://forums.realmacsoftware.com/t/custom-component-using-php-to-read-csv/44677)

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?

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [September 23, 2024, 12:48pm UTC](https://forums.realmacsoftware.com/t/csv-spreadsheet/44715/3 "2024-09-23T12:48:16Z")

</div>

i need to import some data so i asked chatgtp to create this but now i am stuck

[https://play.tailwindcss.com/taidL3SPUc](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

---

<div class="post-metadata">

**Author:** ![logrunner](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@logrunner](https://forums.realmacsoftware.com/u/logrunner)\
**Post date:** [September 23, 2024, 1:11pm UTC](https://forums.realmacsoftware.com/t/csv-spreadsheet/44715/4 "2024-09-23T13:11:42Z")

</div>

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:

![id_name_age](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/5/9/59344840b510370cc6d4e0591c1157454821272b.png)

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [September 23, 2024, 3:51pm UTC](https://forums.realmacsoftware.com/t/csv-spreadsheet/44715/5 "2024-09-23T15:51:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![SaturnWeb](https://avatars.discourse-cdn.com/v4/letter/s/839c29/32.png) [@SaturnWeb](https://forums.realmacsoftware.com/u/SaturnWeb)\
**Post date:** [September 24, 2024, 8:54am UTC](https://forums.realmacsoftware.com/t/csv-spreadsheet/44715/6 "2024-09-24T08:54:57Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![logrunner](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@logrunner](https://forums.realmacsoftware.com/u/logrunner)\
**Post date:** [September 24, 2024, 9:27am UTC](https://forums.realmacsoftware.com/t/csv-spreadsheet/44715/7 "2024-09-24T09:27:46Z")

</div>

@SaturnWeb What sort of output are you looking to create on a webpage? Is it something similar to the example above?

---

<div class="post-metadata">

**Author:** ![Bill](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bill/32/107_2.png) [@Bill](https://forums.realmacsoftware.com/u/Bill)\
**Post date:** [September 24, 2024, 2:45pm UTC](https://forums.realmacsoftware.com/t/csv-spreadsheet/44715/8 "2024-09-24T14:45:17Z")

</div>

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:

```auto
{
  "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

---

<div class="post-metadata">

**Author:** ![logrunner](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@logrunner](https://forums.realmacsoftware.com/u/logrunner)\
**Post date:** [September 24, 2024, 5:43pm UTC](https://forums.realmacsoftware.com/t/csv-spreadsheet/44715/9 "2024-09-24T17:43:30Z")

</div>

I have posted about an updated generalised CSV Table Custom Component here: [CSV Table Component](https://forums.realmacsoftware.com/t/custom-component-using-php-to-read-csv/44677/4).

---

<div class="post-metadata">

**Author:** ![logrunner](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@logrunner](https://forums.realmacsoftware.com/u/logrunner)\
**Post date:** [September 24, 2024, 5:46pm UTC](https://forums.realmacsoftware.com/t/csv-spreadsheet/44715/10 "2024-09-24T17:46:46Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Bill](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bill/32/107_2.png) [@Bill](https://forums.realmacsoftware.com/u/Bill)\
**Post date:** [September 24, 2024, 6:16pm UTC](https://forums.realmacsoftware.com/t/csv-spreadsheet/44715/11 "2024-09-24T18:16:55Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [September 25, 2024, 6:29am UTC](https://forums.realmacsoftware.com/t/csv-spreadsheet/44715/12 "2024-09-25T06:29:00Z")

</div>

AI is ok if you ask it to load from local rather than web, error checking and success

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [September 25, 2024, 4:41pm UTC](https://forums.realmacsoftware.com/t/csv-spreadsheet/44715/13 "2024-09-25T16:41:16Z")

</div>

kind of working in Elements now, only view in browser

---

<div class="post-metadata">

**Author:** ![logrunner](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@logrunner](https://forums.realmacsoftware.com/u/logrunner)\
**Post date:** [September 25, 2024, 4:56pm UTC](https://forums.realmacsoftware.com/t/csv-spreadsheet/44715/14 "2024-09-25T16:56:30Z")

</div>

Have you tried my [CSV Table Example](elementsapp://downloadDocument/o4gRkbwfWPmg) 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](https://www.cursor.com) 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.

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [September 25, 2024, 5:30pm UTC](https://forums.realmacsoftware.com/t/csv-spreadsheet/44715/15 "2024-09-25T17:30:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [September 25, 2024, 5:33pm UTC](https://forums.realmacsoftware.com/t/csv-spreadsheet/44715/16 "2024-09-25T17:33:53Z")

</div>

here is the current state, I have no idea re js, still trying to grasp the basics

[elementsapp://downloadDocument/vs4AyvBDGe5u](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

---

<div class="post-metadata">

**Author:** ![SaturnWeb](https://avatars.discourse-cdn.com/v4/letter/s/839c29/32.png) [@SaturnWeb](https://forums.realmacsoftware.com/u/SaturnWeb)\
**Post date:** [September 26, 2024, 9:28am UTC](https://forums.realmacsoftware.com/t/csv-spreadsheet/44715/17 "2024-09-26T09:28:00Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![trinube](https://avatars.discourse-cdn.com/v4/letter/t/df788c/32.png) [@trinube](https://forums.realmacsoftware.com/u/trinube)\
**Post date:** [September 26, 2024, 12:58pm UTC](https://forums.realmacsoftware.com/t/csv-spreadsheet/44715/18 "2024-09-26T12:58:08Z")

</div>

> [@SaturnWeb](#):
>
> Yes, except my tables would be way more complicated than that.

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.

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [September 26, 2024, 2:02pm UTC](https://forums.realmacsoftware.com/t/csv-spreadsheet/44715/19 "2024-09-26T14:02:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![logrunner](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@logrunner](https://forums.realmacsoftware.com/u/logrunner)\
**Post date:** [September 26, 2024, 8:18pm UTC](https://forums.realmacsoftware.com/t/csv-spreadsheet/44715/20 "2024-09-26T20:18:46Z")

</div>

Coming to a Custom HTML Component shortly, here is a preview:

![CleanShot 2024-09-26 at 20.59.30](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/3/6/366ba37d1531eed3056ca155f5b93da54880b606.gif)

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](https://cursor.com), 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.

[Next page](https://forums.realmacsoftware.com/t/csv-spreadsheet/44715.md?page=2)
