I have successfully passed a DataFrame table to html by converting it to a Json Object. Here is what the Json object looks like.

accrued_income:{1501545600000: 236368.08, 1501632000000: 239957.09, Pct_Change: 1.5183987618}
nav:{1501545600000: 24.37265947, 1501632000000: 24.43271182, Pct_Change: 0.2463922744}
outstanding_shares_par:{1501545600000: 865725.234, 1501632000000: 865725.234, Pct_Change: 0}
security_value:{1501545600000: 19863626.03, 1501632000000: 19938086.06, Pct_Change: 0.3748561813}
shareholder_equity:{1501545600000: 21100026.32, 1501632000000: 21152015.16, Pct_Change: 0.2463922993}
total_assets:{1501545600000: 21198382.3, 1501632000000: 21250293, Pct_Change: 0.2448804785}

Now I want to display this on a Bootstrap Table. There are three columns: 1501545600000, 1501632000000, and 'Pct_Change'. The first two columns basically are DateTime converted into a unix format. Furthermore, I want the the keys to be row labels. Essentially I want a table that looks like this:

I have successfully passed a DataFrame table to html by converting it to a Json Object. Here is what the Json object looks like.

accrued_income:{1501545600000: 236368.08, 1501632000000: 239957.09, Pct_Change: 1.5183987618}
nav:{1501545600000: 24.37265947, 1501632000000: 24.43271182, Pct_Change: 0.2463922744}
outstanding_shares_par:{1501545600000: 865725.234, 1501632000000: 865725.234, Pct_Change: 0}
security_value:{1501545600000: 19863626.03, 1501632000000: 19938086.06, Pct_Change: 0.3748561813}
shareholder_equity:{1501545600000: 21100026.32, 1501632000000: 21152015.16, Pct_Change: 0.2463922993}
total_assets:{1501545600000: 21198382.3, 1501632000000: 21250293, Pct_Change: 0.2448804785}

Now I want to display this on a Bootstrap Table. There are three columns: 1501545600000, 1501632000000, and 'Pct_Change'. The first two columns basically are DateTime converted into a unix format. Furthermore, I want the the keys to be row labels. Essentially I want a table that looks like this:

• javascript
• python
• json

• Correct me if I'm wrong, I understand you've parsed the DataFrame to JSON with the dataframe to_json() method? [pandas.pydata.org/pandas-docs/stable/generated/…. And now you're attempting to turn that into a regular table (and style it with bootstrap?) – mmenschig Commented Aug 15, 2017 at 21:29
• That is correct – anderish Commented Aug 15, 2017 at 21:30

2 Answers 2

Unless you're doing something with JSON that you cannot perform with pandas, you can directly parse your DataFrame from pandas into an HTML table and assign the appropriate CSS classes while doing it.

# Creates the dataframe
df = pd.DataFrame(myData)

# Parses the dataframe into an HTML element with 3 Bootstrap classes assigned.
html = df.to_html(classes=["table-bordered", "table-striped", "table-hover"])

More info about the to_html() method: https://pandas.pydata.org/pandas-docs/stable/generated/pandas.DataFrame.to_html.html

#name of the table class

classes = 'table table-striped table-bordered table-hover table-sm'

#table type inside the classes

html_table = df.to_html(classes=classes)