title: How to display elements of a list from a dataframe column as multiple rows/lines in a dash data table?
body: <p>I have a data frame where one column (Top_users) is a list. I want to create a dash data table out of it but I can't display the list elements as rows of their own or at least as multiple lines of the same row. To build the dash data table easier I pivoted the dataframe as below.</p>
  <pre><code>top_users = top_users.pivot_table(index='App', columns='Week', values='Top_users', aggfunc=lambda x: list(x), fill_value=0)
  
  
  app_options = []
  for apps in top_users.index:
     app_options.append({'label':str(apps), 'value':apps})
  
  weeks = []
  for week in top_users.columns:
    weeks.append(week)
  
   app = dash.Dash()
  
   app.layout = html.Div(children=[
                  dash_table.DataTable(
                  id='top-user',
                  columns=[{&quot;name&quot;: i, &quot;id&quot;: i} for i in weeks],
                  fixed_rows={'headers': True}
                  ),
                  dcc.Dropdown(id='app-picker', options=app_options),                               
                  ])
  
  @app.callback(
  Output('user-sessions', 'data'),
  Input('app-picker', 'value'))
  def update_table(selected_app):    
      data = top_users.loc[top_users.index==selected_app]
      return data.to_dict('records')
  </code></pre>
  <p>The result this produces is</p>
  <p><a href="https://i.stack.imgur.com/iXj4J.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iXj4J.png" alt="enter image description here" /></a></p>
  <p>Where the names are adjacent to each other. I could manage to add space between the names but I'm not able to put them into multiple lines/rows</p>