Fields in Dash Datatable are joining

Question

I have the below dataframe:

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

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)

Answer 1

Instead of this:

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

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

do something like this:

drivers = [["driver1", "driver2"], ["driver3", "driver14"]]
drivers_comma_separated = [x[0] + ", " + x[1] for x in drivers]

df = pd.DataFrame({"brand_name": brand_name, "driver": drivers_comma_separated})

---

So the idea is if you loop through all elements in the drivers array, each element will be an array of two elements. Since each element in the outer array looks something like this ["driver1", "driver2"] we can simply concatenate the first and second element in the subarray with eachother with a comma in between.