In a dash_table.DataTable, with row_selectable="multi", the checkboxes column is cut off in the display

Dash Python
1

In a screenshot of this table, you can see that the row_selectable column is chopped off slightly. The code below is for the table and the styling of the table.

multi_select

`
table_style = {
‘maxHeight’: ‘30ex’,
‘overflowY’: ‘scroll’,
‘overflowX’: ‘scroll’,
‘minHeight’: ‘30ex’,
‘width’: ‘100%’,
‘minWidth’: ‘100%’,
‘color’: ‘#5d5151’
},

table_style_cell = {
‘overflow’: ‘auto’,
‘font_size’: ‘12px’,
‘text_align’: ‘center’,
‘color’: ‘#5d5151’,
},

table_style_cell_conditional = [
{
‘if’: {‘column_id’: ‘State’},
‘textAlign’: ‘left’
},
],

table_style_header = {
‘fontWeight’: ‘bold’,
‘backgroundColor’: ‘white’,
},

table_style_data_conditional = [
{
# stripped rows
‘if’: {‘row_index’: ‘odd’},
‘backgroundColor’: ‘rgb(248, 248, 248)’
},
{
# highlight one row
‘if’: {‘row_index’: 400},
“backgroundColor”: “#3D9970”,
‘color’: ‘white’
}
]

.
.
.

dash_table.DataTable(
id=‘table_dropdown_allocations_order’,

        editable=False,
        columns=col_list,
        style_table=table_style[0],
        style_cell=table_style_cell[0],
        style_cell_conditional=table_style_cell_conditional[0],
        style_header= table_style_header[0],
        style_data_conditional=[table_style_data_conditional[0]],

        row_selectable="multi",
    ),

`

There must be something wrong with my styling

2

Hi @maaxnaax

Are you using bootstrap? I was having the same issue and it was fixed by adding this to the css file in the assets folder:

.dash-table-container .row {
display: block;
margin: 0;
}

And thanks to @sislvacl for providing that solution: DataTable Incorrectly Displayed at Left and Right Edge and Distort after update columns

1 Like
3

Yes, result. Thank you :):):):slight_smile: