CodeX
Published in

CodeX

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.

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 templateregister = 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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Baysan

Baysan

321 Followers

Lifelong learner & Freelancer. I use technology that helps me. I’m currently working as a Business Intelligence & Backend Developer. mebaysan.com