Multiple values in cell not well displayed

Dash Python
1

Hello, i’m really new to Dash.

I am building a datatable with Dash.

My data for certain columns has multiple values contained in a list.
When the data table is displayed all the values are concatenate and join together.
It’s displayed as a single value without spacing.

I wanted to separate each value, at least with space or carriage return.

Here are some code and pictures to illustrate my problem:

My data :

[{‘cluster’: [‘value’],
‘domaineA’: [‘value’, ‘value’, ‘value’],
‘tel’: [‘value’],
‘typeA’: None,
‘societe’: ‘value’},
{‘cluster’: [‘value’],
‘domaineA’: [‘value’, ‘value’],
‘tel’: ['value],
‘typeA’: None,
‘societe’: ‘value’},
{‘cluster’: [‘value’],
‘domaineA’: [‘value’, ‘value’],
‘tel’: [‘value’],
‘typeA’: None,
‘societe’: ‘value’}]

My columns :

([{‘name’: ‘cluster’, ‘id’: ‘cluster’},
{‘name’: ‘domaineA’, ‘id’: ‘domaineA’},
{‘name’: ‘tel’, ‘id’: ‘tel’},
{‘name’: ‘typeA’, ‘id’: ‘typeA’},
{‘name’: ‘societe’, ‘id’: ‘societe’}])

My code :

dash_table.DataTable(
                                style_data_conditional=[{
                                                        'if': {'row_index': 'odd'},
                                                        'backgroundColor': 'rgb(248, 248, 248)'}],
                                style_data={ 'border': 'solid 1px #A2B1C6','height': '150px', 'width': '200px' },
                                style_header={'fontWeight': 'bold', 'border': '1px solid pink'},
                                data=df1,
                                columns=[{"name": i, "id": i} for i in df2.columns],
                                fixed_rows={'headers': True, 'data': 0 },
                                style_cell={#'height': '50px', 'width': '200px',
                                            'textAlign': 'left',
                                            'padding': '5px',
                                            'whiteSpace': 'normal'},
                                style_table={'overflowX': 'scroll',
                                             'overflowY': 'scroll',
                                             'maxHeight':'800px',
                                             'maxWidth': '1200px',
                                             'whiteSpace': 'normal'},
                                css=[{
                                        'selector': '.dash-cell div.dash-cell-value',
                                        'rule': 'display: inline; white-space: inherit; overflow: inherit; text-overflow: inherit;'
                                    }],
                                style_as_list_view=True,
                                editable=True,
                                filter_action="native",
                                sort_action="native",
                                sort_mode="multi",
                                row_selectable="multi",
                                row_deletable=True,
                                selected_rows=[],
                                page_action="native",
                                page_current= 0,
                                page_size= 30,
                                virtualization=True
                                )

table table returned (as you can see in domaineA values are join together):

datatable
datatable498×561 47.6 KB

2

Hey Enzo,

So what I would do is to handle the nested objects before you pass them to the data-table.
So I would do something like:

data['domianeA'] = ' '.join(data['domineA'])

Then passing in the values should have a space.

3

Thanks for your reply.

Yes i thought about that, but i don’t think it’s the best solution in my case.

I was wondering if there was a way to indicate to my table that some of my data have list of values.