timmy / 📊 Tabulator ESM 範例：純瀏覽器也能輕鬆玩表格！
0 喜歡
0 分支
1 檔案
最後活躍 8 months ago
使用 ES Module 方式導入 Tabulator.js，不靠打包工具就能打造互動表格，支援排序、欄位配置，超輕巧前端神器 ✨
| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh-TW"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | <title>Tabulator ESM 範例</title> |
| 7 | <!-- 引入 Tabulator 的 CSS --> |
| 8 | <link href="https://unpkg.com/tabulator-tables@6.3.1/dist/css/tabulator.min.css" rel="stylesheet"> |
| 9 | </head> |
| 10 | <body> |
timmy / 📊 Streamlit + Tabulator：打造互動式資料表格超簡單
0 喜歡
0 分支
1 檔案
最後活躍 8 months ago
用 Streamlit + Tabulator.js 展示 DataFrame，支援欄位過濾、分頁、編輯，前端美觀又實用 🚀
| 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"], |
上一頁
下一頁