How to include an Image in a dash datatable header?

Dash Python
1

Hi!
I am new to dash and python in general. I am building a DSS dash webapp for Twitter analysis in which I show the most liked tweet in a dash data table. I have the twitter account, number of likes for this tweet and a “likes” static word as 3 columns in the header (see below image)
1

I want to replace the static word “likes” with a like image similar to below image
2

I use the below code for the datatable

d_columns_imp_h1 = [{'name':top_tweets_by_imp[['author_name']].iloc[0,].values,'id':'author_name'},
                  {'name':top_tweets_by_imp[['like_count_1m']].iloc[0,].values,'id':'like_count_1m','type':'numeric', 'format':Format().group(True)},
                  {'name':'likes','id':'likes'}]

d_table_imp_h1 = DataTable(id = 'imp_h1',
                           columns = d_columns_imp_h1,
                           cell_selectable = False,
                           style_cell = {'whiteSpace':'normal',
                                            'fontSize':18,
                                            'font-family':'Calibri',
                                            'color':'black','height':'40px',
                                            'border':'none',
                                            'box-shadow': '2px 2px 2px lightgrey',
                                            'background-color':'#F7F7F7'
                                        },
                           style_cell_conditional=[{'if':{'column_id':'author_name'},'textAlign':'left',
                                                    'width':'70%','padding':'0px 0px 0px 10px',
                                                   'color':'#AA322F','font-style':'bold'},
                                                   {'if':{'column_id':'like_count_1m'},'textAlign':'right',
                                                     'width':'20%','padding':'0px 10px 0px 0px',
                                                     'type':'numeric', 'format':Format().group(True),
                                                      'color':'#AA322F'},
                                                   {'if':{'column_id':'likes'},'textAlign':'left',
                                                     'width':'10%','font-style':'italic',
                                                     'padding':'0px 10px 0px 0px',
                                                     'color':'#AA322F'}]
                                                                                  
                           )

And my div is

html.Div(children=
        [d_table_imp_h1,
         d_table_imp_d1
        ],
        style = {'width':'340px','height':'140px', 
                'border':'none', 'display':'inline-block',
                'margin':'0px 0px 0px 10px'})

Assuming my image is in ‘path/like-icon.png’

I also want to format the number of likes to add thousand separator (for example: 23128 becomes 23,128, 1569 becomes 1,569)

Does anyone know how to do this?

Thanks

2

Hi, you can just copy and paste the emoji you want to use

d_columns_imp_h1 = [{'name':top_tweets_by_imp[['author_name']].iloc[0,].values,'id':'author_name'},
                  {'name':top_tweets_by_imp[['like_count_1m']].iloc[0,].values,'id':'like_count_1m','type':'numeric', 'format':Format().group(True)},
                  {'name':'❤️','id':'likes'}]

You can check the available hearts here

As for the separators

import pandas as pd
your_dataframe.your_column**.apply(lambda x : "{:,}".format(x))
3 Likes
3

Thanks a lot @jgomes_eu for your reply.
For the like icon it perfectly worked! However, What about a retweet icon? or basically any other icon that is not listed in the emoji? I tried just to copy the image and paste but it didn’t work.

for the formatting part, it worked but displayed decimals as well. Do you know how can I eliminate the decimals?

4

Hey, no problem
As for the numbers you can use:
your_dataframe.round()
that will round up all the numbers.

If instead of a emoji you want to place an image just do this

html.Img(src="https://www.pikpng.com/pngl/m/16-169951_retweet-twitter-png-retweet-icon-clipart.png", width=25),

However for this to work you will have to modify your html.Div
Have you considered using dash bootstrap components? I’m not connected with the developing team in any way but it really makes the process of building apps easier.

Edit Sorry, I didn’t include the link
https://dash-bootstrap-components.opensource.faculty.ai/docs/components/table/

1 Like
5

Hey @jgomes_eu ,
Thanks for your reply.
For the decimals. the rounding didn’t work. However, I tried the below and it worked!

your_dataframe.your_column.apply(lambda x : "{:,.0f}".format(x))

For the html.Img. as you mentioned, applying it as-is didn’t work. So I will explore the ash bootstrap components and will give another try.

Thanks again!

1 Like