Treegrid

columns の先頭は行の題名（label）の列で、2列目以降に各行の cells を順に入れます。children を渡した行には開閉ボタンを付け、子の行を一つ深い階層として12pxずつ字下げして続けます。見出しの灰色の帯・行・罫線は Table と同じ見た目で、行の題名は通常の太さです。value は全ての階層で一意にします。空の value と、重複した value の行は、その子孫ごと描きません。

expanded に最初に開いておく行、selection に選択の方式、selected に最初に選んでおく行を、それぞれ value で渡します。開閉と選択はその後controllerが持つので、保存したい時はイベントで受け取ります。開閉ボタンを押すと行を開閉し、selection が none 以外の時はセルを押すと行を選びます。選んだ行は Table と同じ黄色で塗ります。

href は子を持たない行だけでリンクになります。disabled の行はリンクにせず、題名の文字だけを灰色にし、押してもShift + Spaceでも選べません。キーでの移動には残ります。

state は ready・loading・empty・error です。items が0件なら ready でも empty として扱います。ready 以外では見出しの行だけを残して状態の文（または stateContent）を出し、controllerを付けません。

TreegridController を treegrid として登録します。JavaScriptなしでは、全ての行を開いた状態で表示し、動かない開閉ボタンは隠します。選択もできません。行のデータ・開閉と選択の保存は利用側が持ちます。