List elements are joining in dash datatable

Dash Python
1

I have the below dataframe

        brand_name               driver
0        merc                 [driver1, driver2]
1        bmw                 [driver3, driver14]

When I convert this to a dict and then use it to populate a dash datatable, the field driver becomes joined as below

image
image2249Ă—323 15.3 KB

I want the elements in the driver field to be comma-separated. How can I do this? My current code is below:

import dash
import dash_table
import pandas as pd
import dash_bootstrap_components as dbc
import dash_html_components as html

## Display Settings
pd.set_option("max_columns",20)
pd.set_option("max_colwidth", 50)
pd.set_option("display.width", 2000)
pd.set_option("max_rows", 100)

import dash
import dash_html_components as html
import pandas as pd

brand_name = ['merc', 'bmw']

driver = [['driver1', 'driver2'], ['driver3', 'driver14']]

df = pd.DataFrame({'brand_name':brand_name, 'driver': driver})
print(df)

df_dict = df.to_dict('records')


app = dash.Dash(__name__)
app.layout = dbc.Card(
    dbc.CardBody(
        [
            dash_table.DataTable(
                id='homepage-table',
                data=df_dict,
                columns=[
                    {'name': 'brand_name', 'id':'brand_name'},
                    {'name': 'driver', 'id':'driver', },

            ],
style_cell={'textAlign': 'left', 'padding': '5px'},
                        style_data={
                            'whiteSpace': 'normal',
                            'height': 'auto',
                            'lineHeight': '18px',
                            'width': '22px',
                            'fontSize': '14px'
                        },
                        style_header={
                            'backgroundColor': 'rgb(230, 230, 230)',
                            'fontWeight': 'bold',
                            'lineHeight': '40px',
                            'fontSize' : '18px',
                            'padding-left': '5px'
                        },
                        style_data_conditional=[
                            {'if':
                                {
                                'row_index': 'odd'
                                },
                            'backgroundColor': 'rgb(248, 248, 248)'
                            },
                        ],
            )]))


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

Hi @rajatsaxena

The way the list of strings is displayed in the table makes them appear as though they are joined. The easiest work-around I have found so far is to change the column definition to include 'presentation':'markdown' This will display a comma between the elements of the list:

    columns=[
            {'name': 'brand_name', 'id':'brand_name'},
            {'name': 'driver', 'id':'driver', 'presentation':'markdown'}
    ],

However, this only gets you part way there. It will display a comma between the strings, but not a comma and a space, so it doesn’t look that great. The advantage is that you don’t have to change any of your data.

Another solution is to format the list of strings in the driver column as a single string:

df['driver'] = df['driver'].str.join(', ')

I hope this helps.

3

Thanks @AnnMarieW , I sincerely believed I had replied to the post but didn’t see my comment. Anyway, your solutions works perfectly, thank you.

1 Like