tabulator_example.py
· 1.9 KiB · Python
Raw
import streamlit as st
import pandas as pd
import json
import streamlit.components.v1 as components
# 假設有一個 DataFrame
df = pd.DataFrame({
"訂單單別": ["A", "B", "C"],
"訂單單號": [101, 102, 103],
"客戶簡稱": ["客戶1", "客戶2", "客戶3"],
"備註": ["備註A", "備註B", "備註C"],
})
# 將 DataFrame 轉成 JSON 格式
data_json = df.to_json(orient="records")
# 撰寫 HTML 與 JavaScript，利用 Tabulator 顯示資料
html_code = f"""
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/tabulator-tables@5.4.4/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.4.4/dist/js/tabulator.min.js"></script>
</head>
<body>
<div id="tabulator-table" style="width: 100%;"></div>
<script type="text/javascript">
// 從 Streamlit 傳入的 JSON 資料
var tableData = {data_json};
// 定義欄位設定
var columns = [
{{title:"訂單單別", field:"訂單單別", headerFilter:"input"}},
{{title:"訂單單號", field:"訂單單號", headerFilter:"input"}},
{{title:"客戶簡稱", field:"客戶簡稱", headerFilter:"input"}},
{{title:"備註", field:"備註", headerFilter:"input", editor:"input"}},
];
// 初始化 Tabulator
var table = new Tabulator("#tabulator-table", {{
data:tableData,
columns:columns,
layout:"fitColumns",
pagination:"local",
paginationSize:5,
}});
// 若需要回傳編輯後的資料，可以透過 window.parent.postMessage 傳送回 Streamlit
// 這部分需要進一步開發與整合
</script>
</body>
</html>
"""
# 使用 Streamlit 的 components.v1.html 嵌入此 HTML 頁面
components.html(html_code, height=600, scrolling=True)
st.write("這是一個使用 Tabulator 顯示資料的基本範例。")
| 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 | |
| 59 |