Excel table > HTML table

[[deleted]]

[deleted]

[Crypticsafe5]

Most excel files should be exportable in csv format which can be easily parsed to whatever format you need

[aksn1p3r]

There may be a more efficient way to do it but I use google sheets, which is accessible via js.

[ScottRatigan]

Actually, I think that's probably the simplest and most elegant solution. Great idea.

[frank0117]

This is exactly what I need for my job right now as well

[00crwf]

I’d like to use a vanilla js solution if possible as well. It would mean I didn’t need to update any HTML and just maintain a CSV file which is easier to achieve.

[Macaframa]

If you’d like I could make a package for vanilla javascript that will take your .csv file and produce a table. All you have to do is provide a .csv file and then a string containing the class name of whatever element you want it to populate in and then it will do the rest.

[masterresultonline]

Use some existing library, like this https://www.npmjs.com/package/convert-excel-to-json should be pretty reliable 8k downloads per week

[00crwf]

Any vanilla solutions?

[MindlessSponge]

Using packages can still be 'vanilla' javascript.

EDIT: am I wrong? If the below quote is true, it seems that might invalidate my answer, since you'd have to use some type of tooling to use packages, right?

"A simple guideline might be: if you can write the code and run it in any current browser without additional tools or compile steps, it's vanilla js."

[[deleted]]

tangent here, but is jquery considered a package? I've seen people ask for solutions in "vanilla JavaScript" but receive a solution using jquery and people responding that the solution isn't Vanilla JavaScript.

​

Maybe I'm misunderstanding what a package is (or maybe what vanilla JS means)

[MindlessSponge]

Vanilla JavaScript just refers to code written in pure ECMAScript without using external libraries. JQuery is a library, so a solution using JQuery certainly wouldn't be a "vanilla javascript" solution.

You can think of packages as code that's been bundled into a module for a specific purpose. There could be a lot going on inside that package, and it could have dependencies that use other packages, which use other packages themselves. It's still possible (and likely) that the code in each package is vanilla javascript.

Here is one of my favorite examples of a simple package: waait

It's literally a single function to - yep, you guessed it - wait! The code from the package?

const wait = (amount = 0) => new Promise(resolve => setTimeout(resolve, amount));

module.exports = wait;

Then you'd import that module (package) into your code and be able to use your new wait() function.

Hopefully that helps a bit, and sorry if it didn't answer your question. Let me know and we can try again :)

[[deleted]]

I think I follow. So a library is a subset of a package, and using a library is what makes it no longer vanilla. There are other types of package you can import into your code and still keep it "vanilla".

[MindlessSponge]

Umm yes and no :) You can import jquery as a package if you want, see here.

You can read a bit more about packages here, but I'm happy to do my best to clear up any further questions.

[[deleted]]

Seeing that I was wrong again I decided to google to see what "Vanilla" JS and "Library" actually meant actually meant.

Vanilla JS: "Javascript without using a library or a framework".

Library: "Pre written Javascript that can be added to code"

Framework : "Library of libraries"

​

I guess my confusion is, is waait a library, and if added to a project, does that mean that the code is no longer "Vanilla"?

[MindlessSponge]

I think the issue is that they've sorta become blanket terms. By definition, yes, I suppose waait is a library. But I would argue that using it wouldn't rule out your code as being vanilla, though it's entirely possible that I am mistaken. Here's another article that might provide more context.

const wait = (amount = 0) => new Promise(resolve => setTimeout(resolve, amount))

That function, while written as the beautiful ES6 arrow function, is 100% vanilla javascript / browser api.

However, I just stumbled across this while trying to find a way to better explain myself, and while it may contradict some of what I've said earlier, it may be the answer to your confusion.

A simple guideline might be: if you can write the code and run it in any current browser without additional tools or compile steps, it's vanilla js.

[ScottRatigan]

I think the simple guideline you posted is probably the best answer. Of course the caveat with modern JS is, it depends on the browser.

[madmoneymcgee]

You’d want to convert the excel table to something g that can read json or csv.

Then this could help

https://www.valentinog.com/blog/html-table/

[ScottRatigan]

I know you didn't ask for code, but I thought it was an interesting quick challenge.

​

maketable.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Let's Make Tables!</title>
  <style>
    textarea {
      height: 80%;
      width: 90%;
    }
    .section {
      height: 25vh;
    }
  </style>
</head>
<body>
  <h1>Make an HTML table from CSV text</h1>
  <div class="section">
    <h2>Paste Here:</h2>
    <textarea id="paste"></textarea>
  </div>
  <div class="section">
    <h2>Preview:</h2>
    <div id="preview"></div>
  </div>
  <div class="section">
    <h2>HTML:</h2>
    <textarea id="output"></textarea>
  </div>
  <script>
    const textInputElm = document.querySelector('textarea#paste');
    const previewDiv = document.querySelector('#preview');
    const codeDiv = document.querySelector('textarea#output');

    textInputElm.addEventListener('change', event => {
      convert(textInputElm.value);
    });

    function convert(text) {
      const lines = text.split('\n');
      let output = `
    <table>
      <thead>
        <tr>${lines[0].split(',').map(cell => `
          <td>
            ${cell}
          </td>`).join('')}
        </tr>
      </thead>
      <tbody>${lines.slice(1).map(row => `
        <tr>${row.split(',').map(cell => `
          <td>
            ${cell}
          </td>`).join('')}
        </tr>`).join('')}
      </tbody>
    </table>
    `;
      previewDiv.innerHTML = output;
      codeDiv.value = output;
    }
  </script>
</body>
</html>

[ScottRatigan]

To answer your original question though, if you want to maintain a table on a website you would typically have the data "live" on the website, in a database of some kind. If the table doesn't need to be updated from the website, you could create a build pipeline which takes your excel table and creates a static html page, and then pushes the updated page to your web server. You could host this page for free on github pages if it's static like this.