How to Easily Transform Any Pandas DataFrame to HTML Tables in Django

A real-world example and custom Django template tag

Hi, everyone. Nowadays, I am a member of a team that is consulting on a cloud BI infrastructure project for one of the biggest construction companies in Turkey. In this article, I will write about a real-world example that I faced this morning.

Photo by Helena Hertz on Unsplash

I am developing a Django project for this project. The Django app will be used as a gateway to show some of the tables from the data warehouse to board members. I have to develop 4 data table pages to filter the tables and display them. The data has to be read from CSV files.

Custom template tags that I developed to handle this task worked well. You can get more details by following the link below.

How to create custom template tags and filters | Django documentation | Django

Also, you can read the second part of this article by following the link below.

A Boilerplate to Self-Hosted Continuous Delivery Django Apps (Part-2)

Custom Template Tags

Firstly, I created templatetags folder under my app folder. Then, I created datagateway_template_tags.py file. In my template files, I will directly load this file.

from django import template
register = template.Library()
def convert_data_frame_to_html_table_headers(df):
  html = "<tr>"
  for col in df.columns:
  html += f"<th>{col}</th>"
  html += "</tr>"
  return html

def convert_data_frame_to_html_table_rows(df):
   html = ""
   for row in df.values:
      row_html = "<tr>"
      for value in row:
         row_html += f"<td>{value}</td>"
      row_html += "</tr>"
   html += row_html
   return html

register.filter("convert_data_frame_to_html_table_rows", convert_data_frame_to_html_table_rows)
register.filter("convert_data_frame_to_html_table_headers", convert_data_frame_to_html_table_headers)

These template tag functions need to get at least 1 argument which is a data frame for our task. Then, I create an HTML string to render on the template files.

Using The Tags

In my template file, I am loading the module that I created.

{% extends 'partials/base.html' %}
{% load static %}
# this is the file that I created to store my template tags
{% load datagateway_template_tags %}

Then, I use the tags by passing the data frame which is sent from the backend view function to the template.

<table id="efficiency-hub-table" class="table table-bordered dt-responsive nowrap w-100">
 <thead>
  {{ table_data | convert_data_frame_to_html_table_headers | safe}}
 </thead>
 <tbody>
   {{table_data | convert_data_frame_to_html_table_rows | safe}}
 </tbody>
</table>

Finally

It is an example short way to transform Pandas DataFrames to HTML tables. Hopefully, it helps you to develop your own projects and embed your data frames into your web pages. Also, I could use mark_safe function on the template functions. However, I preferred to use |safe tag on the templates.

Image by Author

Regards

Also, you can read the second part of this article by following the link below.

A Boilerplate to Self-Hosted Continuous Delivery Django Apps (Part-2)