Riot.jsで複雑なテーブルを作ろうとしたら、ハマったところがありました。
eachで回す
Riotには、タグにeach={item in items}のように書くことで、要素1つごとにそのタグを作る、という機能があります。
また、「1つの<dl>の中で、要素ごとに<dt>と<dd>のペアを作りたい」というような、要素ごとに1つのタグを繰り返すのではない場合も、<virtual each={...}>のような<virtual>タグを使うことで、複数タグをセットでループさせられます。
限られたタグしか入らない場所
ところが、そうは問屋がおろさない場所があります。それはテーブルの中で、<table>タグの中には決まった要素しか入れられないので、Riotのカスタムタグや<virtual>を置こうとしても、うまく動かなくなってしまいます。
とりあえずの解決策
<table>内で<virtual>がうまく回らないことはriotのissueにも投げられていましたが、そこでは**<tbody>でeachする**という解決策が紹介されていました。<tbody>を複数書いていい、というのは知らなかったのですが、とりあえずはこれで動くようにはできました。