表を印で囲み、種類と機能を選ぶ手順
読む人が表を並べ替えたり絞り込んだりできるようにするとき、表を折り畳みに入れるときに実行する。
<!-- 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 をオフにする。