# Tables civ

**URL:** <https://forums.realmacsoftware.com/t/tables-civ/49246>\
**Category:** Elements\
**Created:** [July 27, 2025, 9:04pm UTC](https://forums.realmacsoftware.com/t/tables-civ/49246 "2025-07-27T21:04:50Z")\
**Posts on this page:** 10\
**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:** [July 27, 2025, 9:04pm UTC](https://forums.realmacsoftware.com/t/tables-civ/49246/1 "2025-07-27T21:04:50Z")

</div>

Hello, I am trying out your Elements program and I have a specific stack that I use called table CSV. It’s where I take a spreadsheet and insert it into a stack and I get a table on my websites. I have one particular website that uses a lot of spreadsheets. I’m just wondering if you have a table CSV for Elements.

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [July 28, 2025, 8:53am UTC](https://forums.realmacsoftware.com/t/tables-civ/49246/2 "2025-07-28T08:53:35Z")

</div>

We don’t currently have a built in CSV component in Elements.

Could you send a link to the stack you’re using, and a link to a live URL using the stack, and we can see how you might be able to achieve the same thing in Elements 🙂

---

<div class="post-metadata">

**Author:** ![Ulrich](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ulrich/32/29764_2.png) [@Ulrich](https://forums.realmacsoftware.com/u/Ulrich)\
**Post date:** [July 28, 2025, 4:27pm UTC](https://forums.realmacsoftware.com/t/tables-civ/49246/3 "2025-07-28T16:27:09Z")

</div>

In `Pages` add a file `table.csv`

```auto
Name,Age,Type
Ulrich,59,Human
Banu,8,Grandma Dog
Asta,4,Mother Dog
Herr Blau, 28 Days,Baby Dog

```

add a HTML element

Template:

```auto
<csv-table src="/table.csv"></csv-table>

```

Styles:

```auto
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}
th, td {
  padding: 0.5em;
  border: 1px solid #bbb;
}
th {
  background: #f5f5f5;
}

```

Javascript:

```auto
class CsvTable extends HTMLElement {
  static get observedAttributes() { return ['src']; }

  connectedCallback() {
    // Prüfen, ob das Template schon eingefügt wurde
    if (!this.querySelector('table')) {
      this.innerHTML = `
        <table>
          <thead></thead>
          <tbody></tbody>
        </table>
      `;
    }

    const src = this.getAttribute('src');
    if (src) this.loadCsv(src);
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'src' && newValue && newValue !== oldValue) {
      this.loadCsv(newValue);
    }
  }

  async loadCsv(url) {
    try {
      const response = await fetch(url);
      if (!response.ok) {
        this.renderError('Fehler beim Laden der CSV-Datei.');
        return;
      }
      const text = await response.text();
      const rows = this.parseCsv(text);

      if (rows.length === 0) {
        this.renderError('Keine Daten gefunden.');
        return;
      }

      this.renderTable(rows);
    } catch (e) {
      this.renderError('Fehler beim Laden der CSV-Datei.');
    }
  }

  parseCsv(text) {
    return text.trim().split('\n').map(row =>
      row.split(',').map(cell => cell.trim())
    );
  }

  renderTable(rows) {
    const [header, ...body] = rows;
    const thead = this.querySelector('thead');
    const tbody = this.querySelector('tbody');

    thead.innerHTML = `<tr>${header.map(h => `<th>${h}</th>`).join('')}</tr>`;
    tbody.innerHTML = body.map(row =>
      `<tr>${row.map(cell => `<td>${cell}</td>`).join('')}</tr>`
    ).join('');
  }

  renderError(message) {
    const thead = this.querySelector('thead');
    const tbody = this.querySelector('tbody');
    if (thead && tbody) {
      thead.innerHTML = '';
      tbody.innerHTML = `<tr><td colspan="100%">${message}</td></tr>`;
    }
  }
}

customElements.define('csv-table', CsvTable);

```

You have to export it to a web server. Then it works.

I didn’t know JavaScript could do that. I need to learn more about JavaScript.

---

<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:** [November 23, 2025, 5:04am UTC](https://forums.realmacsoftware.com/t/tables-civ/49246/4 "2025-11-23T05:04:09Z")

</div>

Certainly, here is a webpage using the csv stack that was made by Elixir Graphics in Foundry 2, which was a very useful stack. I think it could have been improved with font options, line thickness, etc.

> **[Historical-Federal-Individual-Income-Tax-Rates-and-Brackets | The Logical Report](https://www.logicalreport.com/page-70/page-35/)**

---

<div class="post-metadata">

**Author:** ![Ulrich](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ulrich/32/29764_2.png) [@Ulrich](https://forums.realmacsoftware.com/u/Ulrich)\
**Post date:** [November 25, 2025, 6:19pm UTC](https://forums.realmacsoftware.com/t/tables-civ/49246/5 "2025-11-25T18:19:09Z")

</div>

I’m working on some components. So stay tuned when the shop is open for third party.

- Forms to Sheet
- Forms to SQL
- Sheet to Table
- SQL to Table
- Filters, Sorts and so on

…

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [November 25, 2025, 10:29pm UTC](https://forums.realmacsoftware.com/t/tables-civ/49246/6 "2025-11-25T22:29:49Z")

</div>

This sounds pretty exciting, cant wait!!!

…and yes, we’re working as fast as we can to get the store up and running for you guys 😅

---

<div class="post-metadata">

**Author:** ![dougsmithsr](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dougsmithsr/32/27288_2.png) [@dougsmithsr](https://forums.realmacsoftware.com/u/dougsmithsr)\
**Post date:** [November 26, 2025, 1:16pm UTC](https://forums.realmacsoftware.com/t/tables-civ/49246/7 "2025-11-26T13:16:04Z")

</div>

I also use a stack called [GridIron](https://chillidogsoftware.com/products/grid-iron) by Chillidog which allows me to use Google spreadsheets as well as Excel and CSV tables into responsive customizable live tables on my website. I can also use the sort feature which for me is a must have. I guess I could maybe do a lot of coding to accomplish something similar but having something built in or third party would be the one feature that would make me move completely to Elements.

---

<div class="post-metadata">

**Author:** ![fg8](https://avatars.discourse-cdn.com/v4/letter/f/6a8cbe/32.png) [@fg8](https://forums.realmacsoftware.com/u/fg8)\
**Post date:** [November 26, 2025, 8:50pm UTC](https://forums.realmacsoftware.com/t/tables-civ/49246/8 "2025-11-26T20:50:15Z")

</div>

@dougmaster I also used GridIron with an attached csv file for many years. I played around with AI (ChatGPT & Grok) and asked it to create a large table linked to the csv file, with a search function and pagination styled for desktop and mobile using tailwind.css and alphine.js. After a few tweaks, it came up with a workable Elements page linked to the CSV file. I would suggest you create a small blank Elements project and upload it with the CSV file to your server first to test it. If it works, you can cut and paste it into your Elements project. You will only be able to see the table working when the CSV file is uploaded and linked to the elements code.

---

<div class="post-metadata">

**Author:** ![dougsmithsr](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dougsmithsr/32/27288_2.png) [@dougsmithsr](https://forums.realmacsoftware.com/u/dougsmithsr)\
**Post date:** [November 26, 2025, 10:38pm UTC](https://forums.realmacsoftware.com/t/tables-civ/49246/9 "2025-11-26T22:38:38Z")

</div>

Thank you Frank, That sounds like a great idea for CSV or maybe even Excell spreadsheets that I could upload with the code. My problem is that I use Google live tables that I update constantly and are reflected on my website directly. You being a user of GridIron would be familiar with how this can be achieved by copying the shared embedded code and just plugging it into the stack. I am hoping that someone creates something similar that would just be plug and play without a lot of coding. Thanks for the suggestion, if I am forced to go that route it could be useful but for now I can only display the tables using shared embedded code in an HTML wrapper in Elements. I just lose the ability to sort, print and save to pdf or csv.

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [November 27, 2025, 2:18am UTC](https://forums.realmacsoftware.com/t/tables-civ/49246/10 "2025-11-27T02:18:48Z")

</div>

You might want to reach out to Chillidog, as I think they might be bringing Gridiron over to Elements.
