Comment créer un lien hypertexte entre les valeurs des cellules d'un tableau dans Dash ? (En utilisant Plotly, Dash, Pandas, etc.)

Question

Je souhaite définir la valeur de la cellule sous la colonne "JobLink" comme lien hypertexte. Lorsque je clique sur ce lien, il devrait accéder au lien dans un nouvel onglet/fenêtre. S'il vous plaît, aidez-moi, comment y parvenir ? Le tableau est affiché dans Dash et j'ai du mal à créer un lien hypertexte. Capture d'écran ci-jointe : https://i.stack.imgur.com/yIAqH.png [![Entrez la description de l'image ici][2]][2] [![Tableau de données affiché dans Dash http://127.0.0.1:80/ ][1]][1]

for sheet in all_sheets_df.keys():
    df1 = pd.read_excel(filePath, sheet)
    joblink = "http://" + sheet + ".googletest.org:8080/bob/" + df1['Name']
  
    df1['Job Link'] = joblink
   
    dftable = [
        dash_table.DataTable(
            columns=[{"name": i, "id": i} for i in df1.columns],
            data=df1.to_dict('records'),
            page_action='none',
            #filter_action="native",
            style_table={'overflowX': 'auto','overflowY': 'auto','width': '80%','margin-left': 'auto','margin-right': 'auto','height': '200px'},
            style_cell={'whiteSpace': 'normal','height': 'auto','textAlign': 'left'},
            style_header={'backgroundColor': '#1e4569','fontWeight': 'bold','color': 'white'},
            style_cell_conditional=[
                {'if': {'column_id': 'Status'},
                 'width': '120px'},
                {'if': {'column_id': 'Passed'},
                 'width': '120px'},
                {'if': {'column_id': 'Last Build Date'},
                 'width': '150px'},
            ],
            style_data_conditional=[
                {
                    'color': 'blue',
                    'fontWeight': 'bold'
                },
                {
                    'if': {
                        'filter_query': '{Status} = "Success" ||  {Status} = "SUCCESS"',
                        'column_id': 'Status'
                    },
                    'color': 'green',
                    'fontWeight': 'bold'
                },
                {
                    'if': {
                        'filter_query': '{Status} = "Failure" ||  {Status} = "FAILURE"',
                        'column_id': 'Status'
                    },
                    'color': 'red',
                    'fontWeight': 'bold'
                },

            ]


        )
    ]


    sheet_list.append(dcc.Tab(dftable,label=sheet,id=sheet,value=sheet,selected_className='custom-tab--selected'))
   # print(sheet_list)

    for tab_name, df in all_sheets_df.items():
        df['sheet_name'] = tab_name
        all_dfs.append(df)
        final_df = pd.concat(all_dfs, ignore_index=True)
        fig = px.pie(final_df.to_dict('records'), names="Status", hole=.5, , color='Status')
    pieChart = dcc.Graph(id='pie', figure=fig)

app.layout = html.Div([
    
    dcc.Tabs(sheet_list,
             id="tabs-with-classes",
             value='tab-1',
             parent_className='custom-tabs',
             className='custom-tabs-container',
             colors={
                 "border": "white",
                 "primary": "grey",
                 "background": "silver"
             },

    ),
   html.Div(id="tab-content", className="p-4"),
   html.Div(pieChart)

])```


  [1]: https://i.stack.imgur.com/yIAqH.png
  [2]: https://i.stack.imgur.com/gVwFj.png

Answer 1

Nous pouvons utiliser du contenu HTML dans les cellules Markdown.

MWE :

from dash import Dash
from dash_table import DataTable
import pandas as pd

df = pd.DataFrame(
    {
        "Job Link": [
            "<a href='https://www.google.com/' target='_blank'>https://www.google.com/</a>",
            "<a href='https://www.google.com/' target='_blank'>https://www.google.com/</a>",
            "<a href='https://www.google.com/' target='_blank'>https://www.google.com/</a>",
        ]
    }
)

app = Dash(__name__)

app.layout = DataTable(
    id="table",
    data=df.to_dict("records"),
    columns=[
        {"id": "Job Link", "name": "Job Link", "presentation": "markdown"},
    ],
    markdown_options={"html": True},
)

if __name__ == "__main__":
    app.run_server()