「跟著黑蛋用Streamlit速成天文資料分析Web App」系列文[11]:用streamlit-aggrid美化系外行星資料表

黑蛋接通PM貳婰舞的來電,背景傳來《給愛麗絲》。

「黑…黑蛋,抱歉,我現在人在外面,有點吵,我剛跟客戶開完會,他滿意現在已能連上『太陽系外行星資料分析app』的網頁自行操作,但希望我們能調整系外行星資料表的呈現。首先,他要求表格要滿版、欄位名稱要清楚顯示不要擠在一起、最前面不要顯示index數字。再來,『行星名稱』欄位中的文字要加上超連結。最後,若有橫向卷軸,在捲動時,『行星名稱』欄位要釘在左側隨時可見。我等下會傳給你修改項目示意圖,以及要超連結的網址,先這樣囉,掰。」

黑蛋收到資料表修改任務所需要的資訊後,了解到原本呈現表格所用的內建元件st.dataframe已經不敷使用,於是開始進行搜尋研究。他找到streamlit-aggrid這個可以方便他完成表格修改任務的第三方Streamlit擴充元件(Streamlit components),streamlit-aggrid整合JavaScript的表格元件AG Grid,可讓Streamlit app呈現更美觀的表格並提供更多的互動。

當黑蛋瀏覽完streamlit-aggrid所提供的表格範例程式,以及關於AG Grid欄位性質調整的文件後,便開始進行資料表修改任務。他先藉由streamlit-aggrid的GridOptionsBuilder物件,將「行星名稱」欄位設定釘在左側,然後用JsCode物件插入一小段JavaScript程式,替欄位中的文字加上超連結,最後用AgGrid物件將資料表呈現在頁面上。

黑蛋覺得streamlit-aggrid功能強大,或許之後會有不少機會再用到。

# 02_Exoplanet_table_filter.py
from st_aggrid import AgGrid, GridOptionsBuilder, JsCode

# 前略
gb = GridOptionsBuilder.from_dataframe(exoplanet_table)
gb.configure_column('行星名稱', pinned='left')
gb.configure_column(
    '行星名稱',
    cellRenderer=JsCode('''
    function(params) {
        return '<a href="https://exoplanets.nasa.gov/eyes-on-exoplanets/#/planet/' + params.value.replaceAll(" ", "_") + '" target="_blank">' + params.value + '</a>'
    };
    ''')
)
for col in exoplanet_table.columns.values.tolist():
    gb.configure_column(col, suppressMovable=True, suppressMenu=True)

gridOptions = gb.build()
AgGrid(
    exoplanet_table,
    gridOptions=gridOptions,
    allow_unsafe_jscode=True,
    height=400,
    theme='balham'
)
# 後略

此系列文由蘇羿豪撰寫,以「創用CC 姓名標示 4.0(CC BY 4.0)國際版授權條款」釋出。

Subscribe to 天文背包黑客
Receive the latest updates directly to your inbox.
Mint this entry as an NFT to add it to your collection.
Verification
This entry has been permanently stored onchain and signed by its creator.