資料表格（Data tables）

Zensical 為資料表格提供了預設樣式，很適合用來呈現表格化的資料。搭配第三方函式庫，還能做出可排序的表格。

`zensical.toml` 設定

表格語法通常預設就是啟用的，為了保險起見，可以明確寫上：

[project.markdown_extensions]
tables = {}

基本用法

表格內容可以包含任意行內 Markdown，包括行內程式碼、圖示與 Emoji：

原始程式

| 方法     | 說明                                 |
| -------- | ------------------------------------ |
| `GET`    | :lucide-check: 取得資源              |
| `PUT`    | :lucide-check-check: 更新資源        |
| `DELETE` | :lucide-x: 刪除資源                  |

輸出結果

方法	說明
`GET`	取得資源
`PUT`	更新資源
`DELETE`	刪除資源

欄位對齊

用分隔線（第二列）裡的 : 決定對齊方式：

靠左置中靠右

| 方法     | 說明                          |
| :------- | :---------------------------- |
| `GET`    | 取得資源                      |
| `DELETE` | 刪除資源                      |

方法	說明
`GET`	取得資源
`DELETE`	刪除資源

|  方法    |             說明              |
| :------: | :---------------------------: |
| `GET`    |           取得資源            |
| `DELETE` |           刪除資源            |

方法	說明
`GET`	取得資源
`DELETE`	刪除資源

|     方法 |                          說明 |
| -------: | ----------------------------: |
| `GET`    |                      取得資源 |
| `DELETE` |                      刪除資源 |

方法	說明
`GET`	取得資源
`DELETE`	刪除資源

可排序的表格

想讓讀者點擊欄位標題就能排序，可以加入 tablesort。它可以和 Zensical 的 instant navigation 搭配運作。

步驟 1：建立 docs/js/tablesort.js

docs/js/tablesort.js

document$.subscribe(function() {
  var tables = document.querySelectorAll("article table:not([class])")
  tables.forEach(function(table) {
    new Tablesort(table)
  })
})

步驟 2：在 zensical.toml 載入

[project]
extra_javascript = [
  "https://unpkg.com/tablesort@5.3.0/dist/tablesort.min.js",
  "js/tablesort.js",
]

之後，所有資料表格的欄位標題都可以點擊排序。tablesort 也支援數字、檔案大小、日期與月份名稱等不同的比較方式，詳見它的文件。

為什麼用 document$.subscribe？

document$ 是 Zensical 提供的可觀察物件，每次頁面載入（包含 instant navigation 切換頁面）都會觸發，所以換頁之後排序功能依然有效。

總結

想做的事	做法
表格	`tables = {}`
靠左 / 置中 / 靠右	分隔線加上 `:`
表格內放圖示、程式碼	直接寫 shortcode 與反引號
可排序	載入 `tablesort` 與一小段 JavaScript

參考資料

Data tables - Zensical