Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Rendering a pandas dataframe as HTML with same styling as Jupyter Notebook

I would like to render a pandas dataframe to HTML in the same way as the Jupyter Notebook does it, i.e. with all the bells and wistles like nice looking styling, column highlighting, and column sorting on click.

enter image description here

pandas.to_html outputs just a plain HTML table and requires manual styling etc.

Is the dataframe rendering code used by jupyter available as a standalone module that can be used in any web app?

Also, are the assets such as js/css files decoupled from jupyter so that they can be easily reused?

like image 749
ccpizza Avatar asked Aug 30 '18 20:08

ccpizza


People also ask

How do I display pandas DataFrame in HTML?

Pandas in Python has the ability to convert Pandas DataFrame to a table in the HTML web page. pandas. DataFrame. to_html() method is used for render a Pandas DataFrame.

How do I save DataFrame as HTML in Python?

DataFrame. to_html() method. The total DataFrame is converted to <table> html element, while the column names are wrapped under <thead> table head html element. And, each row of DataFrame is converted to a row <tr> in HTML table.


2 Answers

This works well for me

def getTableHTML(df):
    
    """
    From https://stackoverflow.com/a/49687866/2007153
    
    Get a Jupyter like html of pandas dataframe
    
    """

    styles = [
        #table properties
        dict(selector=" ", 
             props=[("margin","0"),
                    ("font-family",'"Helvetica", "Arial", sans-serif'),
                    ("border-collapse", "collapse"),
                    ("border","none"),
    #                 ("border", "2px solid #ccf")
                       ]),

        #header color - optional
    #     dict(selector="thead", 
    #          props=[("background-color","#cc8484")
    #                ]),

        #background shading
        dict(selector="tbody tr:nth-child(even)",
             props=[("background-color", "#fff")]),
        dict(selector="tbody tr:nth-child(odd)",
             props=[("background-color", "#eee")]),

        #cell spacing
        dict(selector="td", 
             props=[("padding", ".5em")]),

        #header cell properties
        dict(selector="th", 
             props=[("font-size", "100%"),
                    ("text-align", "center")]),


    ]
    return (df.style.set_table_styles(styles)).render()
iris = pd.read_csv('https://raw.githubusercontent.com/mwaskom/seaborn-data/master/iris.csv')
getTableHTML(iris)
like image 88
DougR Avatar answered Sep 21 '22 01:09

DougR


Some points to clarify first:

  • Pandas doesn't have anything to do with the styling, and the styling happens to all HTML tables, not only dataframes. That is easily checked by displaying an HTML table in Jupyter (example code at the end of the answer).
  • It seems that your Jupyter or one of your installed extensions is doing "extra" styling, the default style doesn't include column sorting or column highlighting. There is only odd/even rows coloring and row highlighting (checked on Jupyter source code and my local Jupyter installation). This means that my answer may not include all the styling you want.

The Answer

Is the dataframe rendering code used by jupyter available as a standalone module that can be used in any web app?

Not exactly a standalone module, but all the tables formatting and styling seem to be attached to the rendered_html class. Double-checked that by inspecting the notebook HTML in Firefox.
You can use the .less file linked above directly or copy the required styles to your HTML.

Also, are the assets such as js/css files decoupled from jupyter so that they can be easily reused?

Like any well-designed web project (and actually any software project), the packages and modules are well separated. This means that you can re-use a lot of the code in your project with minimal effort. You can find most of the .less styling files in Jupyter source code here.


An example to check if the styling happens to all HTML tables:

from IPython.display import HTML

HTML('''<table>
  <thead><tr><th></th><th>a</th><th>b</th></tr></thead>
  <tbody>
    <tr><th>0</th><td>1</td><td>3</td></tr>
    <tr><th>1</th><td>2</td><td>4</td></tr>
  </tbody>
</table>''')
like image 33
Qusai Alothman Avatar answered Sep 20 '22 01:09

Qusai Alothman