Html dash table

Question

I am trying to use dash to create a html table

My dataframe looks like this :

   Cap non-cap
0   A   a
1   B   b
2   C   c
3   D   d
4   E   e
..
26  Z   z

I want to display an html table just like the dataframe, but without the 0 - 26 index. The structure is

{'Cap' : ['A', 'B', 'C',....], 'non-Cap' : ['a','b','c',...]}

I tried :

return html.Table(
  [html.Tr([html.Th(col) for col in dataframe.columns])] +
  [html.Tr([
    html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
  ]) for i in range(min(len(dataframe), max_rows))]  
)

user_3049953 · Answer

import dash
import dash_html_components as html
import pandas as pd

data = {'Cap' : ['A', 'B', 'C', ], 'non-Cap' : ['a','b','c', ]}
df = pd.DataFrame(data)

def generate_table(dataframe, max_rows=26):
    return html.Table(
        # Header
        [html.Tr([html.Th(col) for col in dataframe.columns]) ] +
        # Body
        [html.Tr([
            html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
        ]) for i in range(min(len(dataframe), max_rows))]
    )

app = dash.Dash(__name__, )

app.layout = html.Div(children=[
    html.H4(children='StackOverflow - Html dash table'),
    generate_table(df)
])

if __name__ == '__main__':
    app.run_server(debug=True)

Html dash table

1 Answers