tabulator_example.html
· 1.2 KiB · HTML
Исходник
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabulator ESM 範例</title>
<!-- 引入 Tabulator 的 CSS -->
<link href="https://unpkg.com/tabulator-tables@6.3.1/dist/css/tabulator.min.css" rel="stylesheet">
</head>
<body>
<!-- 表格容器 -->
<div id="example-table"></div>
<!-- 使用 ESM 模組方式引入 Tabulator -->
<script type="module">
// 從官方提供的 ESM 檔案中，導入 Tabulator 的命名匯出
import { Tabulator } from 'https://unpkg.com/tabulator-tables@6.3.1/dist/js/tabulator_esm.min.js';
// 定義範例資料
const tableData = [
{ id: 1, name: "John", age: 29 },
{ id: 2, name: "Jane", age: 32 },
{ id: 3, name: "Steve", age: 40 },
];
// 初始化 Tabulator 表格，設定欄位與資料
new Tabulator("#example-table", {
data: tableData,
layout: "fitColumns",
columns: [
{ title: "ID", field: "id", width: 50 },
{ title: "Name", field: "name", width: 150 },
{ title: "Age", field: "age", align: "left" },
],
});
</script>
</body>
</html>
| 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> |
| 11 | <!-- 表格容器 --> |
| 12 | <div id="example-table"></div> |
| 13 | |
| 14 | <!-- 使用 ESM 模組方式引入 Tabulator --> |
| 15 | <script type="module"> |
| 16 | // 從官方提供的 ESM 檔案中，導入 Tabulator 的命名匯出 |
| 17 | import { Tabulator } from 'https://unpkg.com/tabulator-tables@6.3.1/dist/js/tabulator_esm.min.js'; |
| 18 | |
| 19 | // 定義範例資料 |
| 20 | const tableData = [ |
| 21 | { id: 1, name: "John", age: 29 }, |
| 22 | { id: 2, name: "Jane", age: 32 }, |
| 23 | { id: 3, name: "Steve", age: 40 }, |
| 24 | ]; |
| 25 | |
| 26 | // 初始化 Tabulator 表格，設定欄位與資料 |
| 27 | new Tabulator("#example-table", { |
| 28 | data: tableData, |
| 29 | layout: "fitColumns", |
| 30 | columns: [ |
| 31 | { title: "ID", field: "id", width: 50 }, |
| 32 | { title: "Name", field: "name", width: 150 }, |
| 33 | { title: "Age", field: "age", align: "left" }, |
| 34 | ], |
| 35 | }); |
| 36 | </script> |
| 37 | </body> |
| 38 | </html> |
| 39 |