Bagaimana untuk membuat nilai sel jadual hyperlink dalam Dash? (Menggunakan Plotly, Dash, Panda, dll.)

Question

Saya mahu menetapkan nilai sel di bawah lajur "JobLink" sebagai hiperpautan. Apabila saya mengklik pautan ini, ia harus menavigasi ke pautan dalam tab/tetingkap baharu. Tolong bantu bagaimana untuk mencapai ini? Jadual dipaparkan dalam Dash dan saya mendapati sukar untuk menjadikannya hiperpautan. Tangkapan skrin yang dilampirkan: https://i.stack.imgur.com/yIAqH.png [![Masukkan huraian imej di sini][2]][2] [![Jadual data dipaparkan dalam 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

Kita boleh menggunakan kandungan HTML dalam sel 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()