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!

 

 

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

 

DUMMY CSV FILE

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

<!-- (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

// (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

<!-- (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

// (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.

 

 

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 for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

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

• Arrow Functions – CanIUse
• File Reader API – CanIUse
• Fetch – CanIUse

These examples will work well in most modern browsers.

 

LINKS & REFERENCES

• csv.js – GitHub
• Display CSV As HTML Table In PHP – Code Boxx
• Javascript Export Array To CSV File – Code Boxx
• Javascript Read & Parse CSV File (Into Array Object) – Code Boxx

 

YOUTUBE TUTORIAL

 

INFOGRAPHICS CHEAT SHEET