Formatting markdown cells in a DataTable

Dash Python
1

I’m using a Dash DataTable in which I want to have links. For this, I am setting the cells that have the link in them to
'presentation':'markdown'. The links work as expected, so that’s great. The issue that I have is that this messes up the table’s formatting: The cell with the link in it (Time (UTC) in the image below) has the text moved to the top left corner. The whole row is also taller (to accommodate the dead space below the markdown text).

With markdown:
image

Without markdown:
image

I’d like to fix two things:

  1. Get the text of the markdown cell to be centered within its cell
  2. Prevent the rows from taking up more space than they would without markdown

The second point is less critical I suppose.

The styling I am applying to the datatable is as follows:

            style_header={
                'fontWeight': 'bold',
                'backgroundColor': '#375a7f',
            },
            style_cell={
                'backgroundColor': '#303030',
                'color': 'white',
                'maxWidth': '180px',
                'border-top': '0px solid black',
                'border-bottom': '0px solid black',
                'border-left': '1px solid #505050',
                'border-right': '1px solid #505050',
            },
            style_data_conditional=[
                {
                    'if': {'row_index': 'odd'},
                    'backgroundColor': '#444'
                }
            ],
        ),

I also have a CSS based on Bootswatch: Darkly in my assets folder.

Here are my dash versions:

dash==1.19.0
dash-bootstrap-components==0.11.1
dash-core-components==1.15.0
dash-daq==0.5.0
dash-html-components==1.1.2
dash-renderer==1.9.0
dash-table==4.11.2

Does anybody have any advice?
Thanks!

1 Like