timmy 已修改 8 months ago. 還原成這個修訂版本
沒有任何變更
timmy 已修改 8 months ago. 還原成這個修訂版本
1 file changed, 58 insertions
tabulator_example.py(檔案已創建)
| @@ -0,0 +1,58 @@ | |||
| 1 | + | import streamlit as st | |
| 2 | + | import pandas as pd | |
| 3 | + | import json | |
| 4 | + | import streamlit.components.v1 as components | |
| 5 | + | ||
| 6 | + | # 假設有一個 DataFrame | |
| 7 | + | df = pd.DataFrame({ | |
| 8 | + | "訂單單別": ["A", "B", "C"], | |
| 9 | + | "訂單單號": [101, 102, 103], | |
| 10 | + | "客戶簡稱": ["客戶1", "客戶2", "客戶3"], | |
| 11 | + | "備註": ["備註A", "備註B", "備註C"], | |
| 12 | + | }) | |
| 13 | + | ||
| 14 | + | # 將 DataFrame 轉成 JSON 格式 | |
| 15 | + | data_json = df.to_json(orient="records") | |
| 16 | + | ||
| 17 | + | # 撰寫 HTML 與 JavaScript，利用 Tabulator 顯示資料 | |
| 18 | + | html_code = f""" | |
| 19 | + | <!DOCTYPE html> | |
| 20 | + | <html> | |
| 21 | + | <head> | |
| 22 | + | <link href="https://unpkg.com/tabulator-tables@5.4.4/dist/css/tabulator.min.css" rel="stylesheet"> | |
| 23 | + | <script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.4.4/dist/js/tabulator.min.js"></script> | |
| 24 | + | </head> | |
| 25 | + | <body> | |
| 26 | + | <div id="tabulator-table" style="width: 100%;"></div> | |
| 27 | + | <script type="text/javascript"> | |
| 28 | + | // 從 Streamlit 傳入的 JSON 資料 | |
| 29 | + | var tableData = {data_json}; | |
| 30 | + | ||
| 31 | + | // 定義欄位設定 | |
| 32 | + | var columns = [ | |
| 33 | + | {{title:"訂單單別", field:"訂單單別", headerFilter:"input"}}, | |
| 34 | + | {{title:"訂單單號", field:"訂單單號", headerFilter:"input"}}, | |
| 35 | + | {{title:"客戶簡稱", field:"客戶簡稱", headerFilter:"input"}}, | |
| 36 | + | {{title:"備註", field:"備註", headerFilter:"input", editor:"input"}}, | |
| 37 | + | ]; | |
| 38 | + | ||
| 39 | + | // 初始化 Tabulator | |
| 40 | + | var table = new Tabulator("#tabulator-table", {{ | |
| 41 | + | data:tableData, | |
| 42 | + | columns:columns, | |
| 43 | + | layout:"fitColumns", | |
| 44 | + | pagination:"local", | |
| 45 | + | paginationSize:5, | |
| 46 | + | }}); | |
| 47 | + | ||
| 48 | + | // 若需要回傳編輯後的資料，可以透過 window.parent.postMessage 傳送回 Streamlit | |
| 49 | + | // 這部分需要進一步開發與整合 | |
| 50 | + | </script> | |
| 51 | + | </body> | |
| 52 | + | </html> | |
| 53 | + | """ | |
| 54 | + | ||
| 55 | + | # 使用 Streamlit 的 components.v1.html 嵌入此 HTML 頁面 | |
| 56 | + | components.html(html_code, height=600, scrolling=True) | |
| 57 | + | st.write("這是一個使用 Tabulator 顯示資料的基本範例。") | |
| 58 | + | ||
上一頁
下一頁