Wie kann ich Tabellenzellenwerte in Dash mit einem Hyperlink versehen? (Verwendung von Plotly, Dash, Pandas usw.)

Question

Ich möchte den Zellenwert unter der Spalte „JobLink“ als Hyperlink festlegen. Wenn ich auf diesen Link klicke, sollte der Link in einem neuen Tab/Fenster angezeigt werden. Bitte helfen Sie, wie Sie dies erreichen können. Die Tabelle wird in Dash angezeigt und ich finde es schwierig, sie mit einem Hyperlink zu versehen. Angehängter Screenshot: https://i.stack.imgur.com/yIAqH.png [![Bildbeschreibung hier eingeben][2]][2] [![Datentabelle angezeigt in 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

我们可以在 Markdown 单元格中使用 HTML 内容。

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