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 in Javascript. Need to display a CSV as an HTML table before uploading it to the server? Or have a CSV file on the server that needs to be displayed in an HTML table? Well, it is possible with modern Javascript – Read on for the examples!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes CSV To Table Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download all the example 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.

 

 

CSV TO HTML TABLE

All right, let us now get into the examples of how to read a CSV file and display it in an HTML table in Javascript.

 

0) DUMMY CSV

0-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

First, let us begin with the dummy CSV file. For the guys who do not know how CSV (comma-separated values) work:

  • CSV files are essentially text files.
  • We use line breaks \r\n to indicate a new row.
  • We use commas , to indicate a new column.

 

1) READ CSV FROM FILE PICKER

1A) THE HTML

1a-read-csv.html
<!-- (A) PICK CSV FILE -->
<input type="file" accept=".csv" id="demoPick"/>
 
<!-- (B) GENERATE HTML TABLE HERE -->
<table id="demoTable"></table>

For this first example, we will select a CSV from an <input type="file"> and display it in <table id="demoTable">.

 

 

1B) THE JAVASCRIPT

1b-read-csv.js
// (A) GET HTML FILE PICKER & TABLE
let picker = document.getElementById("demoPick"),
    table = document.getElementById("demoTable");
 
// (B) ON SELECTING CSV FILE
picker.onchange = () => {
  // (B1) REMOVE OLD TABLE ROWS
  table.innerHTML = "";
 
  // (B2) READ CSV & GENERATE TABLE
  let reader = new FileReader();
  reader.addEventListener("loadend", () => {
    let csv = reader.result.split("\r\n");
    for (let row of csv) {
      let tr = table.insertRow();
      for (let col of row.split(",")) {
        let td = tr.insertCell();
        td.innerHTML = col;
      }
    }
  });
  reader.readAsText(picker.files[0]);
};

Not going to explain this line-by-line, but the important parts are:

  • reader.readAsText(SELECTED FILE) Read the selected CSV file as text.
  • let csv = reader.result.split("\r\n") Remember that CSV files uses \r\n to indicate new rows? We are just splitting the entire chunk of “CSV text” into rows.
  • for (let row of csv) { for (let col of row.split(",")) For each row, we further break down the columns and draw the table rows/cells.

Yep, that’s right. There’s no need to upload the CSV file to the server, modern Javascript is capable of reading files.

 

 

2) AJAX FETCH CSV FROM SERVER

2A) THE HTML

2a-ajax-csv.html
<!-- (A) GENERATE HTML TABLE HERE -->
<table id="demoTable"></table>

If the CSV file is on a server, we can use AJAX fetch to generate the table as well.

 

 

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) => { return res.text(); })
.then((csv) => {
  // (B1) REMOVE OLD TABLE ROWS
  table.innerHTML = "";
 
  // (B2) GENERATE TABLE
  csv = csv.split("\r\n");
  for (let row of csv) {
    let tr = table.insertRow();
    for (let col of row.split(",")) {
      let td = tr.insertCell();
      td.innerHTML = col;
    }
  }
});

Yep, this is pretty much the same as the file picker example. Except that we are using fetch(CSV FILE) to get the data from the server now.

 

USEFUL BITS & LINKS

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

 

PERFORMANCE ISSUES & LIMITATIONS

There are seemingly no ways to read CSV files line-by-line at the time of writing. So beware if you are dealing with massive CSV files – This can lead to “out of memory” problems and performance issues.

 

COMPATIBILITY CHECKS

The required features are well-supported in most modern browsers.

 

LINKS & REFERENCES

 

INFOGRAPHIC CHEAT SHEET

Javascript CSV To HTML Table (Click To Enlarge)

 

THE END

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

Leave a Comment

Your email address will not be published.