DataTable cell image display?

[Luoxcat]

How to show the picture in DataTable's cell?
I try to use html.Img that get is a blank table.

[Marc-Andre-Rivet]

@Luoxcat The table does not currently supports displaying images, markdown, or embedded components. Linking to the data type / presentation epic for follow up.

Transferring the issue over to the dash-table repo.

[mflevine]

Is there any update on when this feature might be available?

[ovdavid28]

Any news about this? Interested on displaying a local image in a cell of datatable :)

[CentreForRiskStudies]

We need this feature as well please. Increasingly dashboard tables are expected to have icons and image thumbnails in their cells.

[JacobDPeters]

Any updates on this? It is a great use case.

[smallstepman]

It would be very nice to have this

[ricky1192]

I don't know if this is what you are looking for but I managed to put the images in a table (bootstrap component) through a workaround.
Through the following function I transformed them into thumbnails and then wrote them in html components.

def get_thumbnail(path):   
   i = Image.open(path)
   i.thumbnail((100, 100), Image.LANCZOS)
   buff = BytesIO()
   i.save(buff, format="PNG")
   encoded_image = base64.b64encode(buff.getvalue()).decode('UTF-8')
   return (html.Img(src='data:image/png;base64,{}'.format(encoded_image)))

At this point I put them in a column of a pandas dataframe in the layout.

html.Div([
        dbc.Table.from_dataframe(pandas_df, striped=True, bordered=True, hover=True, responsive="sm")
        ],
        style = {'margin-right':'90px','margin-left':'90px'})

This is the result:

P.S.

import dash_html_components as html
import dash_bootstrap_components as dbc`

[alexcjohnson]

This is supported via markdown #606 - to be included in dash 1.8 (due out this week)

[muzamalrana]

hi Can anyone help me here ? I am totally stuck. Trying to embedd image from link into dash table cell. Following is the code snippet.

            html.Div([dt.DataTable(id='my-data',
                 columns=[
            {"id": 'artist_image', "name": "artist_image", "presentation": "markdown"},
            {"id": 'song_artist', "name": "song_artist"},
            {"id": 'monthly_listeners', "name": "monthly_listeners"},
            {"id": 'artist_followers', "name": "artist_followers"},
            {"id": 'artist_popularity', "name": "artist_popularity"}]
                                   ,style_as_list_view=True,
                                           filter_action="native",
    sort_action="native",
    sort_mode="multi",
    column_selectable="single",
                                   style_data_conditional=[
                                                {
                                                    'if': {'row_index': 'odd'},
                                                    'backgroundColor': '#000000'
                                                }
                                            ],
                                   style_cell={'textAlign': 'center','padding': '5px','backgroundColor':'#00FF00',
                                              'color':'white'},
                                                style_header={
                                                    'backgroundColor': '#202020',
                                                    'fontWeight': 'bold','color':'white'
                                                })],className='ten columns')])],className='row')], style=tab_style, selected_style=tab_selected_style)

---

@app.callback(
dash.dependencies.Output('my-data','data'),
[dash.dependencies.Input('my-graph1', 'clickData'),
dash.dependencies.Input('my_dropdown1', 'value'),
dash.dependencies.Input('radio_buttons', 'value'),
dash.dependencies.Input('my_dropdown3', 'value')]
)
def update_graph(click_data,dropdown,radio_button,dropdown3):
try:
genre1=click_data['points'][0]['customdata'][1]
except:
genre1='pop'
artist_data1=sm.artist_dataFrame(songs,artist,click_data,dropdown,radio_button)
print(artist_data1.head(1))
artist_data1=artist_data1[['artist_image','song_artist','monthly_listeners','artist_followers','artist_popularity','date_x']]
artist_data1['date_x']=pd.to_datetime(artist_data1['date_x'])
artist_data1=artist_data1[artist_data1['date_x']==artist_data1['date_x'].max()]
artist_data1=artist_data1.sort_values(by=radio_button,ascending=False).reset_index(drop=True)
artist_data1=artist_data1.drop(['date_x'],axis=1)
if dropdown3==0 or dropdown3=='All':
artist_data1=artist_data1
else:
artist_data1=artist_data1.head(dropdown3)
artist_data1['artist_image']=[html.Img(src=i) for i in artist_data1['artist_image']]
return artist_data1.to_dict('records')

[muzamalrana]

it shows object Object in artist_image column of dash data table instead of image. please suggest what should I do or am I missing something ?

[vedistar]

html.Div([
dbc.Table.from_dataframe(pandas_df, striped=True, bordered=True, hover=True, responsive="sm")
],
style = {'margin-right':'90px','margin-left':'90px'})

many thanks