Display CSV As Table In Javascript (Simple Examples)

Welcome to a tutorial on how to read a CSV file and display it in an HTML table with Javascript. Yes, you read that right. Modern Javascript is actually capable of reading CSV files and directly outputting them. No server-side required. Read on for the examples!

 

 

TABLE OF CONTENTS

 

 

CSV TO HTML TABLE IN JAVASCRIPT

All right, let us now get into the examples of reading a CSV file, and displaying it in an HTML table with Javascript.

 

DUMMY CSV FILE

x-dummy.csv
Jo Doe,jo@doe.com,465785
Joa Doe,joa@doe.com,123456
Job Doe,job@doe.com,234567
Joe Doe,joe@doe.com,345678
Jog Doe,jog@doe.com,578456
Joh Doe,joh@doe.com,378945
Joi Doe,joi@doe.com,456789
Jon Doe,jon@doe.com,987654
Jor Doe,jor@doe.com,754642
Joy Doe,joy@doe.com,124578

Let us start with a dummy CSV file, a list of dummy users. For the folks who are new to “comma separated values”:

  • CSV files are just plain text.
  • We use line breaks \r\n to indicate rows.
  • We use commas , to indicate columns.
  • If the cell contains a comma, the value will be enclosed in quotes. E.g. "Joy, Doe"

 

 

EXAMPLE 1) CSV FILE PICKER TO HTML TABLE

1A) THE HTML

1a-read-csv.html
<!-- (A) JS -->
<script defer src="csv.min.js"></script>
<script defer src="1b-read-csv.js"></script>
 
<!-- (B) PICK CSV FILE -->
<input type="file" accept=".csv" id="demoPick">
 
<!-- (C) GENERATE HTML TABLE HERE -->
<table id="demoTable"></table>
  1. To make things easy, we will load a lightweight csv.js library to handle the CSV.
  2. <input type="file"> A file picker, restricted to CSV files only.
  3. <table id="demoTable"> Empty table to show the CSV contents.

 

1B) THE JAVASCRIPT

1b-read-csv.js
// (A) FILE READER + HTML ELEMENTS
let reader = new FileReader(),
    picker = document.getElementById("demoPick"),
    table = document.getElementById("demoTable");

// (B) READ CSV ON FILE PICK
picker.onchange = () => reader.readAsText(picker.files[0]);

// (C) READ CSV & GENERATE TABLE
reader.onloadend = () => {
  table.innerHTML = "";
  for (let row of CSV.parse(reader.result)) {
    let tr = table.insertRow();
    for (let col of row) {
      let td = tr.insertCell();
      td.innerHTML = col;
    }
  }
};

Yep, that’s all. This should be pretty straightforward.

  1. reader = new FileReader() We will use this file reader object to read the selected CSV file.
  2. reader.readAsText() When the user picks a CSV file, we will read it as plain text.
  3. When reader has fully loaded the selected CSV file.
    • for (let row of CSV.parse(reader.result)) { let tr = table.insertRow(); } Loop through the rows of the parsed CSV file, and insert the table rows.
    • for (let col of row) { let td = table.insertCell(); } Loop through the columns of each row, and add the table cells.

 

EXAMPLE 2) AJAX READ CSV FILE

2A) THE HTML

2a-ajax-csv.html
<!-- (A) JS -->
<script defer src="csv.min.js"></script>
<script defer src="2b-ajax-csv.js"></script>
 
<!-- (B) GENERATE HTML TABLE HERE -->
<table id="demoTable"></table>

For this example, we only need an empty table.

 

 

2B) THE JAVASCRIPT

2b-ajax-csv.js
// (A) GET HTML TABLE
let table = document.getElementById("demoTable");

// (B) AJAX FETCH CSV FILE
fetch("0-dummy.csv")
.then(res => res.text())
.then(csv => {
  table.innerHTML = "";
  for (let row of CSV.parse(csv)) {
    let tr = table.insertRow();
    for (let col of row) {
      let td = tr.insertCell();
      td.innerHTML = col;
    }
  }
});

Look no further, this is pretty much the same.

  • fetch("0-dummy.csv") Gets the CSV file on the server.
  • .then(res => res.text()) Reads the CSV as plain text.
  • .then(csv => { ... }) Pretty much the same as above. Loop through rows/columns, and generate the HTML table.

 

DOWNLOAD & NOTES

Here is the download link to the example code, so you don’t have to copy-paste everything.

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

EXTRA BITS & LINKS

That’s all for this project, and here is a small section on some extras that may be useful to you.

 

A NOTE ABOUT THE PERFORMANCE

As you can see, we are reading an entire CSV file into a string. This works, but you will run into performance issues and “out of memory” problems with massive CSV files. At the time of writing, there are no ways to read a CSV file line-by-line… At least in client-side Javascript. So just be aware of this, and work with it carefully.

P.S. If you are using the file picker, you can get the selected file size with picker.files[0].size.

 

 

THE FIRST ROW ARE HEADERS

let first = true;
for (let row of CSV.parse(csv)) {
  let tr = table.insertRow();
  for (let col of row) {
    if (first) {
      let th = document.createElement("th");
      th.innerHTML = col;
      tr.appendChild(th);
    } else {
      let td = tr.insertCell();
      td.innerHTML = col;
    }
  }
  first = false;
}

Introduce a first flag – Append th instead of td for the first row only.

 

COMPATIBILITY CHECKS

These examples will work well in most modern browsers.

 

LINKS & REFERENCES

 

YOUTUBE TUTORIAL

 

INFOGRAPHICS CHEAT SHEET

CSV To HTML Table In Javascript (Click to Enlarge)

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

4 thoughts on “Display CSV As Table In Javascript (Simple Examples)”

  1. Hi, it works perfectly but how can I make it read automatically csv placed somewhere on url? is there a tutorial or template?
    I have 10 different csv that I would like to automatically display as tables in html
    Thank you

Leave a Comment

Your email address will not be published. Required fields are marked *