How can I display a picture in a cell?

Hi,everyone!

Recently I’ve been trying to build some models using dash-tables. Meanwhile, I encountered some elusive questions, and I would like to ask you whether there is any experience of resolution. I would be very grateful.

1.How can I display a picture in a cell? I tried this link method, but it doesn’t work.

2.One of the first requirements I have to achieve is to fill in the database.Does anyone know some of the existing cases?

3.When I have multiple ’ DCC ’ components registered the callback function. Strange things have happened. After the page has just been loaded, only one of the buttons or the drop-down box is activated, and only after I have clicked the first button will the other buttons work properly. But which one of the first buttons will be, I can’t find the law.

4.According to the current design, an output can only have a single callback function. But I want to implement the Refresh button and the other buttons coexist and work separately, and the refresh button can overwrite the results of other buttons.

Thanks in advance!

import dash
import dash_auth
import dash_core_components as dcc
import dash_html_components as html
import dash_table
from sqlalchemy import create_engine
import numpy as np
import pandas as pd
import time
from dash.dependencies import Input, Output, Event, State
from dash.exceptions import PreventUpdate

app = dash.Dash(__name__)
server = app.server
app.config.suppress_callback_exceptions = True

app.css.config.serve_locally = True
app.scripts.config.serve_locally = True

# engine = create_engine('')

# df = pd.read_sql( )

app.layout = html.Div([
    html.H3('4Testing'),
    html.Div([
        html.Div(
            dcc.Dropdown(
                id='stock-type-dropdown',
                options=[{
                    'label': '{}'.format(i),
                    'value': i
                } for i in ['column1', 'column2']],
                multi=True,
                searchable=True,
                value=''),
            style={
                'width': '48%',
                'height': '50',
                # 'overflow': 'hidden',
                # 'display': 'inline-block'
                'display': 'none'
            }),
        html.Div([html.Div(id='test1', children='abc')],
                 style={
                     'width': '48%',
                     'float': 'right',
                     'display': 'inline-block'
                 }),
        html.Div(style={'height': '50px'})
    ]),
    html.Button('Refresh', id='refresh-rows-button', n_clicks=0),
    dash_table.DataTable(
        id='adding-rows-table',
        columns=[
            {
                'name': '{}'.format(i),
                'id': '{}'.format(i),
                'deletable': True

                #'editable_name': True
            } for i in ['column1', 'column2']
        ],
        style_cell_conditional=[{
            'if': {
                'column_id': 'Region'
            },
            'textAlign': 'left'
        }],
        data=[{
            'User': 'accc'
        }],  # df.to_dict('records'),
        filtering=True,
        sorting=True,
        sorting_type="multi",
        row_selectable="multi",
        row_deletable=True,
        editable=True,
        selected_rows=[],
        style_as_list_view=True,
    ),
    # html.Button('Refresh', id='refresh-rows-button', n_clicks=0),
    html.Button('Add Row', id='editing-rows-button', n_clicks=0),
    html.Button(
        'Submit Selected',
        id='submit-button',
        n_clicks=0,
        n_clicks_timestamp=0),
    html.Button('Delete Selected', id='delete-button', n_clicks=0),
])


@app.callback(
    Output('adding-rows-table', 'data'), [
        Input('refresh-rows-button', 'n_clicks_timestamp'),
        Input('editing-rows-button', 'n_clicks_timestamp')
    ], [
        State('adding-rows-table', 'data'),
        State('adding-rows-table', 'columns')
    ])
def add_row(refresh_t, row_t, rows, columns):

    if int(row_t) > int(refresh_t):
        rows.append({c['id']: '' for c in columns})
        timestamp = int(row_t)
        return rows

    elif int(refresh_t) > int(row_t):

        rows.clear()

        newdf = ({'a': '1'}, {'b': '2'})
        rows = [{'column1': '5'}, {'column2': '6'}]
        # rows = newdf.to_dict('records')
        timestamp = int(refresh_t)
        return rows


'''
@app.callback(
    Output('test1', 'children'), [
        Input('submit-button', 'n_clicks_timestamp'),
        Input('delete-button', 'n_clicks_timestamp')
    ], [
        State('datatable-interactivity', "derived_virtual_data"),
        State('datatable-interactivity', "derived_virtual_selected_rows")
    ])
def add_row(sub_t, del_t, rows, selected_rows):

    dff = pd.DataFrame(rows)

    if int(sub_t) > int(del_t):

        return 1

    elif int(del_t) > int(sub_t):
        return

    return 2

'''
if __name__ == '__main__':
    app.run_server(host='localhost', port='8008', debug=True)

In this code, the first activated button is Addrow.

Have you found any solution? I posted a similar question recently Display local image in datatable cell dash Thank you :slight_smile:

Now it supports markdown text, you can view the documents.