How to include an Image in a dash datatable header?

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)

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

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

5 posts - 2 participants

Read full topic