CODEWITHSUNDEEP
pythonplotlydata-visualization
Vdoo
Vdoo

Reputation: 121

Displaying the values of a column in a vertical format - Plotly Dash

I am pretty new to dash.

Based on this question: https://community.plotly.com/t/how-to-populate-a-dropdown-from-unique-values-in-a-pandas-data-frame/5543 i am trying to create a table that is returning the unique values of the selected column via a dropdown menu.

My layout Div:

 html.Div(
     className = "section",
     children = [

         html.Div(className='section-title',children="Return the unique values of each column "),
         html.Div(
         dcc.Dropdown(
             id='keyword_dropdown',
             options=[{'label': i ,'value': i} for i in  df.columns],
             multi=True,

             placeholder='Filter by column:'
         ),style={}),
         html.Div(id='table-container')
 ]
 )

My function:

def generate_vert_values_datable(dataframe,max_rows=10):
    return html.Table(
        [html.Tr([html.Th(col) for col in dataframe.columns])] +
        [html.Tr([
            html.Td(dataframe[col]) for col in dataframe.columns
        ]) for i in range(min(len(dataframe), max_rows))]
    )

My callback:

@app.callback(
    Output('table-container','children'),
    [Input('keyword_dropdown','value')]
)
def update_dropdown(drop_down_value):
    if drop_down_value is None:
        return None
    return generate_vert_values_datable(df[drop_down_value])

What I get now is the values concatenated as shown below:

enter image description here

I would like to show each of the values in a vertical format when the dropdown is clicked with the preferred max rows :

EG

COMMON_ASSET_TYPE:
-------------------------------------------------

    SECURITY
    FORWARD
    ACCOUNT
    MISCELLANEOUS

Any hint of how i can change values to be shown vertically? Thanks in advance.

Upvotes: 0

Views: 730

Answers (1)

Vdoo
Vdoo

Reputation: 121

   return html.Table(
        [html.Tr([html.Th(row) ])] + 
        [html.Tr(i) for i in dataframe[row].values]

Posting this if someone has the same issues

Upvotes: 1

Related Questions