Pandas DataFrame to Bootstrap Table

Question

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:

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
– mmenschig, Commented Aug 15, 2017 at 21:29

mmenschig · Accepted Answer · 2017-08-15 21:37:42Z

21

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

answered Aug 15, 2017 at 21:37

mmenschig

1,12814 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

anderish Over a year ago

Okay, how would I modify individual elements?

mmenschig Over a year ago

What do you mean modify individual elements. Can you provide an example of what you would want to do?

mmenschig Over a year ago

to_html() is the last step of the process. If you require different field/column names or other ways of categorizing and grouping the data then you should make these changes within pandas' domain

Arun Over a year ago

Put the classes as classes=["table table-bordered table-striped table-hover"] instead of comma separated. I had issues with Bootstrap 3.4.1.

Suraj Rao · Accepted Answer · 2021-10-21 07:46:09Z

-1

#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)

edited Oct 21, 2021 at 7:46

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

answered Oct 21, 2021 at 7:40

Akash Dwivedi

1

Collectives™ on Stack Overflow

Pandas DataFrame to Bootstrap Table

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related