[英]How to make a Table's cell value hyperlinked in Dash ? (used Plotly, Dash, Pandas etc)
我想讓“JobLink”列下的單元格值超鏈接。 當我點擊它時,它應該導航到新標簽/窗口中的鏈接。 請幫助如何實現它? 該表格顯示在 Dash 中,我發現很難將其設為超鏈接。 附截圖: https : //i.stack.imgur.com/yIAqH.png [![在此處輸入圖像描述][2]][2] [![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
我們可以在 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()
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.