Obs154｜Obsidian交互式表格！超強表格控制：視覺美化、分頁、排序、過濾、搜尋

由 · 發表於: · 更新於: | 瀏覽數: 3 / 630

標籤：

Obsidian v1.5添加的視覺化表格已經提供了表格的編輯功能，而Enhanced Tables外掛則為閱讀模式式的表格強化了更多的控制功能，例如：

  1. 資料美化，能以更直覺的方式呈現內容
  2. 表格分頁：分頁控制讓我們在查看多筆資料時不必一直捲動
  3. 欄位排序：能指定某個欄位以升冪或降冪排列
  4. 資料過濾：能指定過濾的欄位條件
  5. 資料搜尋：輸入關鍵字以過濾出資料

雖然EnhancedTable外掛最近才推出，但功能已算完成，雖尚有些美中不足之處，但它的便利性仍指日可待。

gh|900

1. Templater Hotkeys增加Refresh快捷鍵

目前在使用了Enhanced Table後的表格，當修改了表格屬性後，經常會有渲染(Render)失敗的狀況，尤其是以左右雙面板（左側面板是預覽模式，右側是閱讀模式）時，右側經常會無法正確顯示。

此時需要重新整理（刷新）頁面，但目前Obsidian並未提供Refresh頁面的命令，我們必須使用Templater腳本再綁定快捷鍵來解決（可查看相關鏈接的網頁，有另一個使用User Plugins外掛的解決方案）。

  1. 開啟Templater外掛設定視窗，查看Template folder location，在該資料下附加建立腳本檔 Cmd-reload-page.md
  2. Cmd-reload-page.md內容如下：
<%*
  app.workspace.activeLeaf.rebuildView();
%>
  1. 在Templater外掛設定視窗內的Template Hotkeys清單處，點擊Add new hotkey for templatge→找到Cmd-reload-page.md後按Enter
  2. 設定→快速鍵→找到Cmd-reload-page.md後指定按鍵，例如 Ctrl+R
  3. 順便給【放棄儲存並重新載入程式】設定按鍵，例如Ctrl+Alt+R，日後需要重新啟動Obsidian應用程式時，就可直接按鍵操作

2. 程式碼區塊設定

要使用Enhanced Tables則在表格上方新增一個程式碼區塊，區塊與表格之間必須有一個空行，區塊是YAML格式，基本結構如下：

2.1. 表格結構

```yaml enhanced-tables
date-format: YYYY-MM-DD
datetime-format: YYYY-MM-DD HH:mm
yes-format: "Y"
no-format: "N"
editable: [true | false] 能否編輯
columns:
  表格欄位定義
filter: 預設過濾條件
filters:
  過濾選單設定
sort: 預設排序欄名
pagination
  page-size: 每頁筆數
  page-sizes:
   - 筆數選項
style: |
  自訂樣式(多行)
hide-controls: [true | false] 是否隱藏控制行
hide-configuration: [true | fasle] 是否隱藏程式碼區塊

2.2. 欄位設定

表格第一列的欄名定義：

  欄名:
    alias: 代名
    type: 型別 [[string] | number | date | datetime | time | enum | bool]
    hidden: [true | false]
    nowrap: [true | false]
    editable: [true | false]
    searchable: [true | false]    
    number-format: "style:'currency', currency: 'TWD', minimumFractionDigits:0"
    date-format: "YYYY年MM月DD日"
    yes-format: "✅"
    no-format: "❌"
    formatter: "格式化字串，可為JavaScript運算式或Template literals"
    searchable: true

2.3. 運算式

  • 變數：$row，$cell
  • 欄位取存：$row.欄名

2.4. 範例

date-format: YYYY-MM-DD
yes-format: "Y"
no-format: "N"
# editable: true

columns:
  Amount:
    alias: amount
    type: number
    number-format: "style:'currency', currency: 'TWD', minimumFractionDigits:0"
    searchable: true
  UnitPrice:
    alias: price
    type: number
  Quantity:
    alias: qty
    type: number
  SubTotal:
    alias: subtotal
    type: number
    number-format: "style:'currency', currency: 'TWD', minimumFractionDigits:0"
    formatter: "eval(`${$row.price}*${$row.qty}`)"
  Date:
    type: date
    date-format: YYYY年MM月DD日
  Color:
    formatter: "`<span style='color:${$cell}'>${$cell}</span>`"    
    nowrap: true
  Formatted:
    formatter: "`#${$row.Id}) ${$cell}`"
    nowrap: true
  Hidden:
    hidden: true
  Rating:
    type: enum
    enum:
      '1': '⭐️'
      '2': '⭐️⭐️'
      '3': '⭐️⭐️⭐️'
      '4': '⭐️⭐️⭐️⭐️'
      '5': '⭐️⭐️⭐️⭐️⭐️'
    searchable: true
  真假值:
    type: bool
    yes-format: "✔️"
    no-format: "❌"
filter: $row.amount > 1200
filters:
 Small numbers: $row.amount < 1200
 High rating: Number($row.Rating) > 3
sort: Rating
# sort: -Rating
pagination:
  page-size: 3
  page-sizes:
   - 3
   - 10
style: |
   th {
     background-color: var(--color-base-50) !important;
     color: var(--color-base-70) !important;
   }
# hide-controls: true
hide-configuration: true
| Id  | Amount | UnitPrice | Quantity | SubTotal | Date       | Rating | Color  | Formatted                        |       Hidden       |   真假值    |
| :-: | -----: | --------: | -------: | -------: | ---------- | :----- | ------ | -------------------------------- | :----------------: | :------: |
|  1  |    500 |       500 |       10 |          | 2024-03-05 | 2      | red    | _**bold**_                       | Text you won't see |          |
|  2  |   1000 |      1000 |       12 |          | 2024-04-10 | 5      | orange |                                  |                    |    N     |
|  3  |   1504 |      1504 |        9 |          | 2024-03-15 | 1      | yellow | <font color="#ff0000">red</font> |                    |    Y     |
|  4  |  10000 |     10000 |        4 |          | 2024-05-01 | 4      | green  | ~~strike~~                       |                    | whatever |
|  5  |  12000 |     12000 |        7 |          | 2024-05-02 | 3      | blue   | $1\frac {4}{5}+\frac {2}{3}=?$   |                    |    Y     |
|  6  |  13000 |     13000 |       22 |          | 2024-05-03 | 4      | purple | `{js} alert('123');`             |                    |    N     |

2.5. formatter

formatter使用JavaScript的樣板字面值（Template literals）。

樣板字面值是允許嵌入運算式的字串字面值（string literals）。${變數}取出變數的值。

`Template literals example: string text ${expression} string text`

SubTotal的formatter：

formatter: "eval(`${$row.price}*${$row.qty}`)"

$row.price是500，$row.qty是10，字面值字串是 \500\*100\
用eval(\500\*100\)執行JavaScript運算。

3. 相關鏈接

✅ obsidian-enhanced-tables: https://github.com/pistacchio/obsidian-enhanced-tables
✅ NumberFormat: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
✅ Creating command to reload page: https://forum.obsidian.md/t/creating-command-to-reload-page/57906

4. 教學影片

＃＃

您可能也會有興趣的類似文章

您可能也會喜歡…

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *