DataTable cell image display?

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

@Luoxcat

@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.

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

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

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

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

It would be very nice to have this

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`

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

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')

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 ?

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

Navigation Menu

Repository navigation

DataTable cell image display? #383

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.

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

DataTable cell image display? #383

Description

Activity

Marc-Andre-Rivet commented on Feb 25, 2019

mflevine commented on Apr 8, 2019

ovdavid28 commented on Apr 25, 2019

CentreForRiskStudies commented on Jun 13, 2019

JacobDPeters commented on Aug 18, 2019

smallstepman commented on Aug 21, 2019

ricky1192 commented on Aug 22, 2019

alexcjohnson commented on Jan 13, 2020

muzamalrana commented on Feb 29, 2020

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.

muzamalrana commented on Feb 29, 2020

vedistar commented on Apr 30, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions