CODEWITHSUNDEEP
pythonpandasdatatableplotly-dash
Rajat
Rajat

Reputation: 121

Fields in Dash Datatable are joining

I have the below dataframe: enter image description here

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

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)

Upvotes: 0

Views: 216

Answers (1)

bas
bas

Reputation: 15462

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.

Upvotes: 1

Related Questions