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>を複数書いていい、というのは知らなかったのですが、とりあえずはこれで動くようにはできました。