dash_table.DataTable resize image in markdown

Dash Python
1

Hello!

I was stoked to hear that markdown now works in Dash DataTable and you can even view images with it and it works.

That’s amazing, however I’ve run into the issue of having to resize images.
I’ve tried a few things and none of them seem to work:

  1. After a quick Google I’ve found this StackOverflow post: https://stackoverflow.com/questions/14675913/changing-image-size-in-markdown, I’ve tried using the HTML code but it didn’t work. Dash just showed me the HTML code without rendering the image.

  2. Using style_cell_conditional:

        style_cell_conditional=[
            {'if': {'column_id': 'image_url'},
            'width':'50px'},
            {'if': {'column_id': 'image_url'},
            'height':'50px'}
        ]

But that seems to have no effect on the images as well.

  1. I’ve also tried providing CSS for a column as shown here: dash_table.DataTable Embedded Links 
        css=[
            dict(selector='td table', rule='height: 50px;'),
            dict(selector='td[data-dash-column="image_url"] table', rule='height: 50%'),
            dict(selector='td[data-dash-column="image_url"] table', rule='width: 50%'),
        ],

I tried with percentages as well as fixed value (ie. “150px”) and that seems to have no effect as well.
However, the HTML code has the relevant parts:

<td tabindex="-1" class="dash-cell column-0" data-dash-column="image_url" data-dash-row="0" style="width: 50px; height: 50px; border-width: 1px; border-style: solid; border-color: rgb(211, 211, 211);"><div class="unfocused dash-cell-value cell-markdown"><p><img src="image.jpg" alt="SKU"></p>
</div></td>

I was wondering whether anyone has run into the same problem and has a solution or knows of a solution.

I can obviously resize the images beforehand but I figured it would be better to just resize the table.

2

Hi!

You can first create the table than using your browser inspect the elements of the table. The table will surely have some unique id and classes. Use that id and classes in your CSS to change the relative size of the table.

I had not tried images in table. You can check dash bootstrap components dbc (https://dash-bootstrap-components.opensource.faculty.ai/docs/components/table/). I guess it supports images. I would suggest if you don’t have much priority for markdown style and want to focus more on images than try dbc.

Thanks!