CODEWITHSUNDEEP
pythonplotly-dash
mikelowry
mikelowry

Reputation: 1727

Python Dash how to create two column table?

I'm trying to create a table for a Plotly Dash webapp.

From the data in the dataframe I want to create the following table (Two column table, column name on one side, and values on the other):

Column Name | Value

I'm using the logic below but its just giving me a table with one column and stacks values and columns names in the same column. 

  return html.Table(
        # Header
        [html.Tr([html.Tr(col) for col in dataframe.columns])] +

        # Body
        [html.Td([
            html.Tr(dataframe.iloc[i][col]) for col in dataframe.columns
        ]) for i in range(min(len(dataframe), max_rows))]
    )

For those familiar with html this is what I'm trying to do:

<table>
<tr>
<td>Column Name:</td>
<td>Values:</td>
</tr>
</table>

@brokenfoot i tried using your example, but it's telling me the comma is a syntax error:

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

Upvotes: 0

Views: 2519

Answers (2)

mikelowry
mikelowry

Reputation: 1727

This is what ended up working for me:

 fig = go.Figure(data=[go.Table(
    # header=dict(values=['A Scores', 'B Scores'],
    #             line_color='darkslategray',
    #             fill_color='lightskyblue',
    #             align='left'),
    cells=dict(values=[dataframe.columns.values.tolist(), # 1st column
                       df_cohort_3.iloc[0:1].values.tolist()[0]  # 2nd column
                      ],
               line_color='darkslategray',
               fill_color='lightcyan',
               align='left'))
                        ])
    #fig.update_layout(width=500, height=600)
    return fig.show()

Upvotes: 1

brokenfoot
brokenfoot

Reputation: 11629

You can pass header data with:

html.Th()

and actual table data with:

html.Td()

Example usage:

 ... 
            html.Table(className='table',
                children = 
                [
                    html.Tr( [html.Th('Attribute'), html.Th("Value")] )
                ] +
                [
                    html.Tr( [html.Td('OS'),         html.Td('{}'.format(get_platform()))] ),
                    html.Tr( [html.Td('#CPUs'),      html.Td('{}'.format(ps.cpu_count()))] ),
                    html.Tr( [html.Td('CPU Clock'),  html.Td('{} MHz'.format(int(ps.cpu_freq().current)))] ),
                    html.Tr( [html.Td('RAM'),       html.Td('{} GB'.format(ps.virtual_memory().total >> 30))] ),
                    html.Tr( [html.Td('#processes'), html.Td('{}'.format(len(ps.pids())))] ),
                ]
            ),
. . .

You can checkout following file for html table, graph usage:
https://github.com/tarun27sh/dash-on-heroku/blob/master/app.py

Edit: You can try (not tested!):

html.Table(className='table',
    children = 
    [
        html.Tr( [html.Th(col) for col in dataframe.columns] )
    ] +
    [
        for i in range(min(len(dataframe), max_rows)):
            html.Tr( [html.Td('{}' .format(dataframe.iloc[i][col])) for col in dataframe.columns])
    ]
),

Upvotes: 1

Related Questions