Tables civ

Elements
1

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.

1 Like
2

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 :slight_smile:

3

In Pages add a file table.csv

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:

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

Styles:

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

Javascript:

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.

1 Like
4

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.

5

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

…

2 Likes
6

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 :sweat_smile:

7

I also use a stack called GridIron 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.

8

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

9

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.

1 Like
10

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

2 Likes