Display CSV In HTML Table With Python Flask

Welcome to a tutorial on how to display a CSV file as an HTML table in Python Flask. So you have a CSV file somewhere on the server? Want to read it, and display it in an HTML table? Well, it really isn’t that difficult. Read on for the example!

 

 

TABLE OF CONTENTS

 

 

EXAMPLE CODE DOWNLOAD

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.

 

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

 

 

 

QUICK SETUP

• Create a virtual environment virtualenv venv and activate it – venv\Scripts\activate (Windows) venv/bin/activate (Linux/Mac)
• Install required libraries – pip install flask
• For those who are new, the default Flask folders are –
  • static Public files (JS/CSS/images/videos/audio)
  • templates HTML pages

 

STEP 1) 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

For a start, here is a dummy CSV file that we will be working with. For those who are new:

• CSV files are literally just plain text files.
• But we use \r\n line breaks to indicate a new row.
• And comma , to indicate columns.
• If there are commas in the value, the column will be enclosed in quotes. E.G. "Doe, Joe".

 

STEP 2) FLASK SERVER

# (A) INIT
# (A1) LOAD MODULES
from flask import Flask, render_template
import csv
 
# (A2) FLASK SETTINGS + INIT
HOST_NAME = "localhost"
HOST_PORT = 80
app = Flask(__name__)
# app.debug = True
 
# (B) DEMO - READ CSV & GENERATE HTML TABLE
@app.route("/")
def index():
  with open("S1_dummy.csv") as file:
    reader = csv.reader(file)
    return render_template("S3_csv_table.html", csv=reader)
 
# (C) START
if __name__ == "__main__":
  app.run(HOST_NAME, HOST_PORT)

The Flask server script should be pretty straightforward once you trace through it.

1. Load the required modules, and define the Flask settings.
2. Serve the demo “CSV to HTML” page. Take note of how this is done – We open S1_dummy.csv and pass it into the HTML template.
3. Start the Flask server. Captain Obvious at your service.

 

 

STEP 3) HTML TEMPLATE

<table id="demo">
{% for row in csv %}
  <tr>
  {% for col in row %}
  <td>{{ col }}</td>
  {% endfor %}
  </tr>
{% endfor %}
</table>

Yep, that is all we need in the HTML. Loop through the CSV file and generate the rows/columns. The end.

 

 

 

THE FIRST ROW IS THE HEADER

with open("S1_dummy.csv") as file:
  reader = csv.reader(file)
  header = next(reader)
  return render_template("S3_csv_table.html", header=header, rows=reader)

Separate the first/following rows in the flask server script, and pass both into the HTML template.

<table id="demo">
  <!-- HEADER ROW -->
  <tr>
    {% for col in header %}
    <th>{{ col }}</th>
    {% endfor %}
  </tr>
 
  <!-- DATA ROWS -->
  {% for row in rows %}
  <tr>
    {% for col in row %}
    <td>{{ col }}</td>
    {% endfor %}
  </tr>
  {% endfor %}
</table>

Draw the rows in the HTML template accordingly.

 

LINKS & REFERENCES

For you guys who are thinking along the lines of “upload the CSV file to the server, then generate the table” – There’s no need to do so. Modern Javascript can actually read the CSV file directly, see “display CSV as a table in Javascript” below.

• Display CSV As Table In Javascript – Code Boxx
• How to Read a Text file In Python Effectively – Python Tutorial