mdmark

表に機能を付ける

表を印で囲み、種類と機能を選ぶ手順

読む人が表を並べ替えたり絞り込んだりできるようにするとき、表を折り畳みに入れるときに実行する。

前提

手順

表を印で囲む

種類を選ぶ

<!-- table: data -->

| 名前 | 値 |
| --- | --- |
| りんご | 10 |
| みかん | 2 |

<!-- /table -->

表の前に <!-- table: 種類 -->、後ろに <!-- /table --> を書く。 種類は data(並べ替え・ピン止め・絞り込み)か plain(機能を付けない)。 囲まない表は既定の種類で、ピン止めだけが付く。 閉じの印を書き忘れると、印から文書の終わりまでが範囲になり、書き方の警告が出る。

機能を足し引きする

<!-- table: plain +sort -->

+機能 で種類の機能に足し、-機能 で外す。 機能は sort(並べ替え)・pin(ピン止め)・filter(絞り込み)・count・columns・total・copy・rowlink。 count 以降の 5 つはどの種類にも入っておらず、+機能 で足した表にだけ付く(付け方は次の節)。 知らない機能を書くと、その指定だけを当てずに描き、書き方の警告が出る。

絞り込む列を決める

<!-- table: data filter=名前,更新日:date -->

filter=列名:種類 で、絞り込みを付ける列を決める。 列名は表の見出しの文字で書き、複数の列はコンマで区切る。 種類は select(値を選ぶ)・text(文字を含む行)・date(期間)で、省くと select。 絞り込みのボタンは、ここで決めた列の見出しにだけ付く。 表に無い列名と知らない種類は、その列に絞り込みを付けずに描き、書き方の警告が出る。

表に件数・列の切り替え・集計・コピー・行へのリンクを付ける

件数を出す

<!-- table: data +count filter=名前:text -->

+count で、表の上に 2 / 3 件 のように、表示している行の数と全ての行の数を出す。 絞り込みで行が減ると、表示している行の数が変わる。

列の表示を切り替える

<!-- table: data +columns hide=説明 -->

+columns で、表の上に 列の表示 のボタンを置く。 ボタンから列ごとに表示・非表示を切り替えられる。 hide=列名 を書くと、その列を最初から隠す。複数の列はコンマで区切る。 メニューの「既定に戻す」で、hide= の状態に戻る。 先頭の列は隠せない。hide= に書くと書き方の警告が出て、その列は隠れない。 hide= は +columns を書いた表にだけ当たる。

集計の行を付ける

<!-- table: data +total total=数量:sum,単価:avg,名前:count -->

+total と total=列名:計算 で、表の末尾に集計の行を置く。 計算は sum(合計)・avg(平均)・count(空でないセルの数)で、題は 合計・平均・個数。 集計するのは表示している行で、絞り込みに合わせて計算し直す。 sum と avg は、数として読めないセルを除く。 total= は +total を書いた表にだけ当たる。+total を書いて total= を書かない表は、集計の行を出さない。 知らない計算と表に無い列名は、その指定だけを当てずに描き、書き方の警告が出る。

表をコピーする

<!-- table: data +copy -->

+copy で、表の上に 表をコピー のボタンを置く。 ボタンを押すと、見出しの行と表示している行を、セルをタブで、行を改行で区切ったテキストにしてクリップボードへ写す。 隠した列と絞り込みで隠れた行は含まれない。 写せたらボタンが コピーしました に変わり、写せなかったら コピーできませんでした に変わる。

行へのリンクを付ける

<!-- table: data +rowlink -->

+rowlink で、各行の先頭のセルに、その行を指す #ID のリンクを置く。 #ID は先頭の列の文字から作り、見出しのアンカーと同じ規則で、同じ文書の中で重なれば -1・-2 が付く。 URL の #ID が行を指すと、その行へ移って強調する。 閉じた表と閉じた節の中の行は開いてから、絞り込みで隠れた行は絞り込みを外してから移る。

表を折り畳みに入れる

closed か open を書く

<!-- table: data closed -->

表を折り畳みに入れる。 closed は閉じた状態で始め、open は開いた状態で始める。 折り畳みの見出しは 表を開く。 closed と open を両方書くと closed を当て、書き方の警告が出る。

反映

即時。mount と update で描くたびに、そのとき描く文書の印で決め直す。

確認

並べ替えが働く

並べ替えを付けた表の、数値の列の見出しを押す。 押すたびに昇順・降順・元の並びを繰り返す。

document.querySelector(".mdmark th[aria-sort]").getAttribute("aria-sort")

1 回押した後は ascending、2 回押した後は descending が出る。 3 回押して元の並びに戻ると、th から aria-sort が外れる。

絞り込みが働く

filter= で指定した列の見出しの絞り込みのボタンを押す。 ドロワーが開き、候補の検索欄にフォーカスがある。 値を選ぶと、その値の行だけが表に残る。 「絞り込みを外す」を押すと、全ての行が戻る。 ドロワーの外を押すか Esc を押すと、ドロワーが閉じる。

ピン止めが働く

表が幅からはみ出すときだけ、各列の見出しにピン止めのボタンが出る。 ボタンを押すと、その列までが表の左端に留まる。

document.querySelector(".mdmark .mdmark-pin").getAttribute("aria-pressed")

true が出る。

件数が働く

+count を付けた表の上に、3 / 3 件 のように件数が出ている。 絞り込みで行を減らすと、表示している行の数が変わる。

列の表示の切り替えが働く

+columns と hide=列名 を付けた表で、その列が隠れている。 表の上の 列の表示 のボタンを押すとメニューが開き、列名のチェックボックスを入れると列が出る。 先頭の列のチェックボックスは外せず、メニューに 先頭の列は隠せません が出ている。 「既定に戻す」を押すと、hide= の列だけが隠れた状態に戻る。

集計の行が働く

+total と total= を付けた表の末尾に、集計の行が出ている。 絞り込みで行を減らすと、集計が計算し直される。 並べ替えても、集計の行は表の末尾のままになる。

表のコピーが働く

表をコピー のボタンを押すと、ボタンが コピーしました に変わる。 貼り付けると、見出しの行と表示している行が、セルをタブで区切ったテキストで入る。

行へのリンクが働く

各行の先頭のセルのリンクの href が、# に続けて行の ID になっている。

document.querySelector(".mdmark .mdmark-row-anchor").getAttribute("href")

ページの URL の末尾にその #ID を付けて開くと、その行へ移って強調される。

印が本文に出ていない

表の前後に、印の文字が出ていない。

元に戻す

印を消すと、表は囲まない表の既定の種類に戻る。 表の機能を止めるときは、機能をオン・オフする で table をオフにする。