Obsidian dataviewjs でテーブルを作る（入門編）

いま頭の中がdataviewなのでまとめてみました。 知れば知るほど不思議な世界。 しばらく経てば絶対忘れる。 これは自信がある。

基本形

配列を並べると表になります。

```dataviewjs
k = ["力士", "勝ち", "負け"]
d = [
  ["照ノ富士", 10, 1],
  ["朝乃山", 10, 1],
  ["霧馬山", 9, 2]
]
dv.table(k ,d)
```

下図のように表示します。

ファイル一覧

ファイル名に「大相撲」を含むファイルを抽出する場合。

```dataviewjs
k = ["リンク", "作成日", "修正日"]
d = dv.pages('').file
  .filter(x => x.name.includes("大相撲"))
  .map(x => [x.link, x.cday, x.mday])
dv.table(k ,d)
```

map()で配列を作るのがポイント。 dv.pages('"フォルダ"') にするとフォルダを限定できます。 dv.pages('#タグ')だとタグで限定。

ソート

並べ替えはsort()を追加します。 降順は「"desc"」を追加。

```dataviewjs
k = ["リンク", "作成日", "修正日"]
q = dv.current().検索
d = dv.pages('').file
  .filter(x => x.name.includes("大相撲"))
  .sort(x => x.mday, "desc")
  .limit(10)
  .map(x => [x.link, x.cday, x.mday])
dv.table(k ,d)
```

表示数はlimit()で限定できます。

絞り込み

「key::なんたら」と書くと、そのkeyを使用できます。

検索:: 張り差し

```dataviewjs
k = ["リンク", "作成日", "修正日"]
q = dv.current().検索
d = dv.pages('').file
  .filter(x => x.name.includes(q))
  .map(x => [x.link, x.cday, x.mday])
dv.table(k ,d)
```

この「key::」がメタデータ。 検索対象にもできます。

csv読み込み

csvファイルを読み込みます。

```dataviewjs
p = "assets/data.md"
s = await dv.io.csv(p)
k = Object.keys(s.values[0])
d = s.map(x => Object.values(x))
dv.table(k, d)
```

csvが使えると汎用性が高くなる。

コピーボタン

Markdownの表に変換します。

```javascript
const e = dv.el("button", "copy")
e.onclick = function(){
  s = dv.markdownTable(k, d)
  navigator.clipboard.writeText(s)
}
```

ここまで来るとWebアプリ。

まとめ

変数に a や h を使うとHTMLタグと勘違いするみたい。 一文字変数ならバッティングしないと思ってたのになあ。 ここは要注意です。