如何在 Dash 中制作表格单元格值超链接？（使用 Plotly、Dash、Pandas 等）答案

【问题标题】：How to make a Table's cell value hyperlinked in Dash ? (used Plotly, Dash, Pandas etc)如何在 Dash 中制作表格单元格值超链接？（使用 Plotly、Dash、Pandas 等）
【发布时间】：2021-09-28 16:59:56
【问题描述】：

我想将“JobLink”列下的单元格值设为超链接。当我单击它时，它应该导航到新选项卡/窗口中的链接。请帮忙怎么实现呢？该表格以 Dash 显示，我发现很难将其设为超链接。附截图：https://i.stack.imgur.com/yIAqH.png [![在此处输入图像描述][2]][2] [![DataTable 显示在 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

【问题讨论】：

标签： python pandas plotly-dash

【解决方案1】：

We can use HTML content in markdown cells.

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

【讨论】：