Published in


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 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}}
{{table_data | convert_data_frame_to_html_table_rows | safe}}


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




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



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