なでしこさんにグリッドが欲しい❗️　後編　～行選択・自動ソート・セル幅変更～

　昨日に引き続き、なでしこ３のテーブル部品に、なでしこ１のグリッド部品で出来る機能を色々追加しようと頑張る話。
　編集機能については昨日の記事をご覧下さい。

https://qiita.com/snowdrops89/items/dd0ad18c4197b132bcfa

#  行選択機能を追加
　v1のグリッドは、「行選択」がオンになっていると、クリックした行の色が変わり、どの行を選択しているのか見やすくなります。
　なでしこさんのテーブルでは、「DOM部品オプション」の「テーブル背景色」で[ヘッダ色,偶数行色,奇数行色]の配列を指定して、テーブル作成時「tr」の背景色にその色がスタイル設定されています。
　クリックした時にその行のtrの背景色を変更してやるだけで出来そうですね。

## クリックした位置の色を変える
　クリックした位置と書いてきましたが、クリックだと押して離すがセットなので、色が変わるのはマウスを離した時。
　押した時すぐに色が変わってくれた方が気分がいいので、「マウス押した時」のイベントを使うことにします。
　マウスのイベントは、行(tr)に設定してもテーブルそのものに設定しても発生するのですが、どこに設定してもイベントが発生した時に対象に入るのはセル(td)です。
　セルの親部品(parentNode)であるtrが、色を変えるべきtrということになります。

<blockquote><font color="black">テストデータ</font><font color="#cc0099">＝</font><font color="maroon">「名前,ふりがな,点数<br>太郎,たろう,55<br>花子,はなこ,100<br>一郎,いちろう,80」</font><font color="#cc0000">を</font><font color="#660099">CSV取得</font>。<br><font color="black">テストテーブル</font><font color="#cc0099">＝</font><font color="black">テストデータ</font><font color="#cc0000">の</font><font color="#660099">テーブル作成</font>。<br><br><font color="black">テストテーブル</font><font color="#cc0000">を</font><font color="#660099">マウス押した時</font><font color="#cc0000">には</font>、<font color="#cc0099">:<br>&nbsp;&nbsp;&nbsp;&nbsp;</font><font color="#cc0099">もし</font>、<font color="#cc0099">対象</font><font color="#cc0099">.</font><font color="black">nodeName</font><font color="#cc0099">＝</font><font color="maroon">「TD」</font><font color="#cc0000">ならば</font>、<font color="#cc0099">:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font><font color="black">クリック行</font><font color="#cc0099">＝</font><font color="#cc0099">対象</font><font color="#cc0099">.</font><font color="black">parentNode</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">クリック行</font><font color="#cc0000">の</font><font color="maroon">「背景色」</font><font color="#cc0000">に</font><font color="maroon">「#CCF」</font><font color="#cc0000">を</font><font color="#660099">DOMスタイル設定</font>。</blockquote>

　DOM部品はこのように親要素や子要素の参照がプロパティに入っているので、ずっと辿って行くことが出来るんですよ✨

## 前にクリックした行の色を戻す
　一回目はコレだけで良いのですが、また別の行をクリックした時には、前にクリックしていた行の色を元に戻してやらないと、どんどん選択行色が増えていってしまいますよね💦
　ということは前の位置を覚えておかなきゃならない。
　とりあえず、グローバルに「前クリックセル」変数を作っておき、行色変更が発生したらその時クリックしたセルの参照を入れておくことにします。
　そしてその行数が奇数か偶数かで、DOM部品オプションのテーブル背景色を参照して塗り分けます。

<blockquote>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">もし</font>、<font color="black">前クリックセル</font><font color="#cc0000">が</font><font color="#660099">空</font><font color="#cc0000">でなければ</font>、<font color="#cc0099">:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font><font color="#cc0099">変数</font>&nbsp;<font color="black">前クリック行</font><font color="#cc0099">＝</font><font color="black">前クリックセル</font><font color="#cc0099">.</font><font color="black">parentNode</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">前行数</font><font color="#cc0099">＝</font><font color="black">前クリック行</font><font color="#cc0099">.</font><font color="black">rowIndex</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">行色情報</font><font color="#cc0099">＝</font><font color="#660099">DOM部品オプション</font><font color="#cc0099">.</font><font color="black">テーブル背景色</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">前背景色</font><font color="#cc0099">＝</font><font color="black">行色情報</font><font color="#cc0099">[</font><font color="black">前行数</font><font color="#cc0099">%</font><font color="#0000cc">2</font><font color="#cc0099">+</font><font color="#0000cc">1</font><font color="#cc0099">]</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">前クリック行</font><font color="#cc0000">の</font><font color="maroon">「背景色」</font><font color="#cc0000">に</font><font color="black">前背景色</font><font color="#cc0000">を</font><font color="#660099">DOMスタイル設定</font>。</blockquote>

　「%」は割った余りを求める演算子です。
　行数を2で割った余りが0なら偶数、1なら奇数。
　テーブル背景色は、偶数行の色が[1]に、奇数行の色が[2]に入っているので+1してやれば取得できるって寸法です。

### オブジェクトプロパティ構文
※記述時のナデシコバージョンはv3.6.37です。
#### 配列の中身は直接参照できないっぽい
　オブジェクトプロパティ構文、途中で内容が配列だったりするとうまく行きませんでした。
　配列の前で一旦変数に入れるか、オブジェクトプロパティ構文を使わず["  "]を使えば大丈夫デス。

<blockquote>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">前背景色</font><font color="#cc0099">＝</font><font color="#660099">DOM部品オプション</font><font color="#cc0099">.</font><font color="black">テーブル背景色</font><font color="#cc0099">[</font><font color="#0000cc">0</font><font color="#cc0099">]</font>。&nbsp;&nbsp;&nbsp;<font color="#009900">#&nbsp;できない</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">前背景色</font><font color="#cc0099">＝</font><font color="#660099">DOM部品オプション</font><font color="#cc0099">[</font><font color="maroon">"テーブル背景色"</font><font color="#cc0099">]</font><font color="#cc0099">[</font><font color="#0000cc">0</font><font color="#cc0099">]</font>。<font color="#009900">#&nbsp;できる</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">テーブル背景色</font><font color="#cc0099">＝</font><font color="#660099">DOM部品オプション</font><font color="#cc0099">.</font><font color="black">テーブル背景色</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">前背景色</font><font color="#cc0099">＝</font><font color="black">テーブル背景色</font><font color="#cc0099">[</font><font color="#0000cc">0</font><font color="#cc0099">]</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">#&nbsp;できる&nbsp;</font></blockquote>

#### テーブルのナゾ（？）
　実は、クリック行の背景色をオブジェクトプロパティ構文で指定してみようとしたら、出来ませんでした。
 
<blockquote><font color="black">テストテーブル</font><font color="#cc0000">を</font><font color="#660099">マウス押した時</font><font color="#cc0000">には</font>、<font color="#cc0099">:<br>&nbsp;&nbsp;&nbsp;&nbsp;</font><font color="#cc0099">もし</font>、<font color="#cc0099">対象</font><font color="#cc0099">.</font><font color="black">nodeName</font><font color="#cc0099">＝</font><font color="maroon">「TD」</font><font color="#cc0000">ならば</font>、<font color="#cc0099">:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font><font color="black">クリック行</font><font color="#cc0099">＝</font><font color="#cc0099">対象</font><font color="#cc0099">.</font><font color="black">parentNode</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">クリック行</font><font color="#cc0099">.</font><font color="black">背景色</font><font color="#cc0099">＝</font><font color="maroon">「#CCF」</font>　<font color="#009900">#&nbsp;できない！？</font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">//クリック行の「背景色」に「#CCF」をDOMスタイル設定。　#&nbsp;できる</font></blockquote>

[ちゅーとりある](https://www.nadesi.com/v3/doc/index.php?%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB%2F%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E6%A7%8B%E6%96%87&show#hdd0b2986
)を見ても、背景色の設定はこれであってるはずなのに、ナゼ～。

　parentNodeの参照だから？　とか、イベントの中だから？　とかとか色々なやむワケですけど、DOM部品作成でいっこいっこ作っていった場合には、イベントの中だろうがparentNodeだろうが、ちゃんと出来たんです。

<blockquote><font color="#009900">＃できる</font><br><font color="black">A</font><font color="#cc0099">=</font><font color="maroon">「table」</font><font color="#cc0000">の</font><font color="#660099">DOM部品作成</font>。<br><font color="black">A</font><font color="#cc0000">に</font><font color="#660099">DOM親部品設定</font>。<br><font color="maroon">「tr」</font><font color="#cc0000">の</font><font color="#660099">DOM部品作成</font>。<br><font color="#cc0099">それ</font><font color="#cc0099">$</font><font color="black">背景色</font><font color="#cc0099">＝</font><font color="#660099">DOM部品オプション</font><font color="#cc0099">[</font><font color="maroon">"テーブル背景色"</font><font color="#cc0099">]</font><font color="#cc0099">[</font><font color="#0000cc">0</font><font color="#cc0099">]</font>。<br><font color="#cc0099">それ</font><font color="#cc0000">に</font><font color="#660099">DOM親部品設定</font>。<br><font color="maroon">「th」</font><font color="#cc0000">の</font><font color="#660099">DOM部品作成</font>。<br><font color="#cc0099">それ</font><font color="#cc0000">に</font><font color="#0000cc">１</font><font color="#cc0000">を</font><font color="#660099">テキスト設定</font>。<br><font color="maroon">「th」</font><font color="#cc0000">の</font><font color="#660099">DOM部品作成</font>。<br><font color="#cc0099">それ</font><font color="#cc0000">に</font><font color="#0000cc">２</font><font color="#cc0000">を</font><font color="#660099">テキスト設定</font>。<br><font color="black">A</font><font color="#cc0000">に</font><font color="#660099">DOM親部品設定</font>。<br><font color="maroon">「tr」</font><font color="#cc0000">の</font><font color="#660099">DOM部品作成</font>。<br><font color="#cc0099">それ</font><font color="#cc0099">$</font><font color="black">背景色</font><font color="#cc0099">＝</font><font color="#660099">DOM部品オプション</font><font color="#cc0099">[</font><font color="maroon">"テーブル背景色"</font><font color="#cc0099">]</font><font color="#cc0099">[</font><font color="#0000cc">2</font><font color="#cc0099">]</font>。<br><font color="#cc0099">それ</font><font color="#cc0000">に</font><font color="#660099">DOM親部品設定</font>。<br><font color="maroon">「td」</font><font color="#cc0000">の</font><font color="#660099">DOM部品作成</font>。<br><font color="#cc0099">それ</font><font color="#cc0000">に</font><font color="maroon">「あいう」</font><font color="#cc0000">を</font><font color="#660099">テキスト設定</font>。<br><font color="maroon">「td」</font><font color="#cc0000">の</font><font color="#660099">DOM部品作成</font>。<br><font color="#cc0099">それ</font><font color="#cc0000">に</font><font color="maroon">「えお」</font><font color="#cc0000">を</font><font color="#660099">テキスト設定</font>。<br><br><font color="black">A</font><font color="#cc0000">を</font><font color="#660099">クリックした時</font><font color="#cc0000">には</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">対象</font><font color="#cc0000">を</font><font color="#660099">表示</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">対象</font><font color="#cc0099">.</font><font color="black">parentNode</font><font color="#cc0000">を</font><font color="#660099">表示</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">対象</font><font color="#cc0099">$</font><font color="black">背景色</font><font color="#cc0099">＝</font><font color="#660099">緑色</font>。<font color="#009900">#&nbsp;できる</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">対象</font><font color="#cc0099">.</font><font color="black">parentNode</font><font color="#cc0099">$</font><font color="black">背景色</font><font color="#cc0099">＝</font><font color="#660099">水色</font>。<font color="#009900">#&nbsp;できる</font><br><font color="#cc0099">ここまで</font>。</blockquote>

　長っ💦
　テーブル作成のありがたみを感じますねｗ
 
　でも、同じことがテーブル作成ではできないのねん。

<blockquote><font color="#009900">＃できない</font><br><font color="black">A</font><font color="#cc0099">=</font><font color="maroon">「1,2<br>あいう,えお」</font><font color="#cc0000">の</font><font color="#660099">テーブル作成</font>。<br><br><font color="black">A</font><font color="#cc0000">を</font><font color="#660099">クリックした時</font><font color="#cc0000">には</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">対象</font><font color="#cc0000">を</font><font color="#660099">表示</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">対象</font><font color="#cc0099">$</font><font color="black">parentNode</font><font color="#cc0000">を</font><font color="#660099">表示</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">対象</font><font color="#cc0099">$</font><font color="black">背景色</font><font color="#cc0099">＝</font><font color="#660099">緑色</font>。<font color="#009900">#&nbsp;できない</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">対象</font><font color="#cc0099">$</font><font color="black">parentNode</font><font color="#cc0099">$</font><font color="black">背景色</font><font color="#cc0099">＝</font><font color="#660099">水色</font>。<font color="#009900">#&nbsp;できない</font><br><font color="#cc0099">ここまで</font>。</blockquote>

　ナゾだわ～。
　さっぱり分からにゃいのでもうフツーにDOMスタイル設定😅

 :::note info
[v3.6.38](https://github.com/kujirahand/nadesiko3/releases/tag/3.6.38)にて、オブジェクトプロパティ構文の動作ロジックが変更され、バッチリ出来るようになりました！

```
# v3.6.38 以降で出来る
A=「1,2
あいう,えお」のテーブル作成。

Aをクリックした時には
    対象を表示。
    対象$parentNodeを表示。
    対象$背景色＝緑色。# できる！
    対象$parentNode$背景色＝水色。# できる！
ここまで。
```

:::


## 行選択できました
　それはさておき、できました。
　こんな感じ？

<blockquote><font color="black">テストデータ</font><font color="#cc0099">＝</font><font color="maroon">「名前,ふりがな,点数<br>太郎,たろう,55<br>花子,はなこ,100<br>一郎,いちろう,80」</font><font color="#cc0000">を</font><font color="#660099">CSV取得</font>。<br><font color="black">テストテーブル</font><font color="#cc0099">＝</font><font color="black">テストデータ</font><font color="#cc0000">の</font><font color="#660099">テーブル作成</font>。<br><br><font color="black">選択行色</font><font color="#cc0099">＝</font><font color="maroon">「#CCF」</font><br><font color="black">前クリックセル</font><font color="#cc0099">＝</font><font color="#660099">空</font>。<br><font color="black">テストテーブル</font><font color="#cc0000">を</font><font color="#660099">マウス押した時</font><font color="#cc0000">には</font>、<font color="#cc0099">:<br>&nbsp;&nbsp;&nbsp;&nbsp;</font><font color="#cc0099">もし</font>、<font color="#cc0099">対象</font><font color="#cc0099">.</font><font color="black">nodeName</font><font color="#cc0099">＝</font><font color="maroon">「TD」</font><font color="#cc0000">ならば</font>、<font color="#cc0099">:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font><font color="#cc0099">変数</font>&nbsp;<font color="black">クリック行</font><font color="#cc0099">＝</font><font color="#cc0099">対象</font><font color="#cc0099">.</font><font color="black">parentNode</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">もし</font>、<font color="black">前クリックセル</font><font color="#cc0000">が</font><font color="#660099">空</font><font color="#cc0000">でなければ</font>、<font color="#cc0099">:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font><font color="#cc0099">変数</font>&nbsp;<font color="black">前行数</font><font color="#cc0099">＝</font><font color="black">前クリックセル</font><font color="#cc0000">の</font><font color="black">セル行番号</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">前クリック行</font><font color="#cc0099">＝</font><font color="black">前クリックセル</font><font color="#cc0099">.</font><font color="black">parentNode</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">行色情報</font><font color="#cc0099">＝</font><font color="#660099">DOM部品オプション</font><font color="#cc0099">.</font><font color="black">テーブル背景色</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">前背景色</font><font color="#cc0099">＝</font><font color="black">行色情報</font><font color="#cc0099">[</font><font color="black">前行数</font><font color="#cc0099">%</font><font color="#0000cc">2</font><font color="#cc0099">+</font><font color="#0000cc">1</font><font color="#cc0099">]</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">前クリック行</font><font color="#cc0000">の</font><font color="maroon">「背景色」</font><font color="#cc0000">に</font><font color="black">前背景色</font><font color="#cc0000">を</font><font color="#660099">DOMスタイル設定</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">クリック行</font><font color="#cc0000">の</font><font color="maroon">「背景色」</font><font color="#cc0000">に</font><font color="black">選択行色</font><font color="#cc0000">を</font><font color="#660099">DOMスタイル設定</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">前クリックセル</font><font color="#cc0099">＝</font><font color="#cc0099">対象</font>。<br><br><strong><font color="#cc0099">●(セルの)セル行番号</font></strong><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">セル</font><font color="#cc0099">.</font><font color="black">parentNode</font><font color="#cc0099">.</font><font color="black">rowIndex</font><font color="#cc0000">を</font><font color="#cc0099">戻す</font>。<br><font color="#cc0099">ここまで</font>。</blockquote>

行選択のサンプルです👇

https://n3s.nadesi.com/id.php?2918

　クリックしたらその行の色が変わります。そんだけ！

# 自動ソート機能を追加
　自動と言っても本当の自動ではなく、ヘッダ部分をクリックすることでソートが行われる機能です。

　なでしこさんには「表ソート」という命令があり、二次元配列の列番号を指定することで、その列をキーにソートしてくれます。
　クリックしたセルの列番号を取得して、元データを表ソートし、そのデータでテーブル更新すれば良いだけ！
　編集の時とは逆に、まずデータの方に変更を加え、テーブルに反映させる形です。
　同様にしてサーチ機能なども実装できるはずです(今回はやりません)

　注意点としては、テーブル作成は一番最初の行がタイトル行（ヘッダ）になっているので、それをソートに含めてはいけないので、データの０行目を一度切り取って待避し、ソート後また戻しています。

<blockquote><font color="black">テストデータ</font><font color="#cc0099">＝</font><font color="maroon">「名前,ふりがな,点数<br>太郎,たろう,55<br>花子,はなこ,100<br>一郎,いちろう,80」</font><font color="#cc0000">を</font><font color="#660099">CSV取得</font>。<br><font color="black">テストテーブル</font><font color="#cc0099">＝</font><font color="black">テストデータ</font><font color="#cc0000">の</font><font color="#660099">テーブル作成</font>。<br><br><font color="black">昇順</font><font color="#cc0099">＝</font><font color="#660099">はい</font>。<br><font color="black">テストテーブル</font><font color="#cc0000">を</font><font color="#660099">クリックした時</font><font color="#cc0000">には</font>、<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">もし</font>、<font color="#cc0099">対象</font><font color="#cc0099">.</font><font color="black">nodeName</font><font color="#cc0099">＝</font><font color="maroon">「TH」</font><font color="#cc0000">ならば</font>、<font color="#cc0099">:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font><font color="black">ヘッダ</font><font color="#cc0099">＝</font><font color="black">テストデータ</font><font color="#cc0000">の</font><font color="#0000cc">0</font><font color="#cc0000">を</font><font color="#660099">配列切り取り</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">列</font><font color="#cc0099">＝</font><font color="#cc0099">対象</font><font color="#cc0000">の</font><font color="black">セル列番号</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">テストデータ</font><font color="#cc0000">の</font><font color="black">列</font><font color="#cc0000">を</font><font color="#660099">表ソート</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">もし</font>、<font color="black">昇順</font><font color="#cc0099">＝</font><font color="#660099">はい</font><font color="#cc0000">でなければ</font>、<font color="black">テストデータ</font><font color="#cc0000">を</font><font color="#660099">配列逆順</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">昇順</font><font color="#cc0099">=</font><font color="black">昇順</font><font color="#cc0099">*</font><font color="#cc0099">-</font><font color="#0000cc">1</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">テストデータ</font><font color="#cc0000">の</font><font color="#0000cc">0</font><font color="#cc0000">へ</font><font color="black">ヘッダ</font><font color="#cc0000">を</font><font color="#660099">配列挿入</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">テストテーブル</font><font color="#cc0000">を</font><font color="black">テストデータ</font><font color="#cc0000">に</font><font color="black">テーブル更新</font>。<br><font color="#cc0099">ここまで</font>。<br><br><strong><font color="#cc0099">●(セルの)セル列番号</font></strong><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">セル</font><font color="#cc0099">.</font><font color="black">cellIndex</font><font color="#cc0000">を</font><font color="#cc0099">戻す</font>。<br><font color="#cc0099">ここまで</font>。</blockquote>

　できました！

## 表ソートと表数値ソート
　表ソートは文字列順、表数値ソートは数値順ということなので、数値だけの列は表数値ソートになるようにしなきゃダメかな？　と思ったのですが、あれれ～？　表ソートのままでも数値の列もいい感じにソートされてるっぽい？

　v1のグリッドでは「55,100,80」などを自動ソートすると、「100,55,80」とかになっちゃうんです。数字の大小ではなく文字として、1は5の前ということですよねー。
　v1にも表数値ソートはあるので、数値の列でソートしたい場合は自分で何とかする必要がありました。
　でも、なでしこ３の表ソートではちゃんと「55,80,100」になりますよ。
　とりあえずこのままでいいかも？

## ソート記号をつける
　v1のグリッドでは、どの列でソート中なのか、昇順なのか降順なのかが分かるよう、ヘッダに「▲」「▼」の記号が付きます。
　なんかCSSで上下に三角の矢印出すなどもあったのですが、むじゅかしくてよく分かんなかったので、フツーに昇順降順で「▲」か「▼」の文字を表示させることにしとく。

<blockquote><font color="black">テストテーブル</font><font color="#cc0000">を</font><font color="#660099">クリックした時</font><font color="#cc0000">には</font>、<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">#&nbsp;三角のラベルをクリックした時も動くようにする</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">もし</font>、<font color="#cc0099">(</font><font color="#cc0099">対象</font><font color="#cc0099">.</font><font color="black">nodeName</font><font color="#cc0099">＝</font><font color="maroon">「TH」</font><font color="#cc0099">)</font><font color="black">また</font><font color="#cc0000">は</font><font color="#cc0099">(</font><font color="#cc0099">対象</font><font color="#cc0099">.</font><font color="black">nodeName</font><font color="#cc0099">＝</font><font color="maroon">「SPAN」</font><font color="#cc0099">)</font><font color="#cc0000">ならば</font>、<font color="#cc0099">:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font><font color="black">セル</font><font color="#cc0099">＝</font><font color="#cc0099">対象</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">もし</font>、<font color="#cc0099">(</font><font color="#cc0099">対象</font><font color="#cc0099">.</font><font color="black">nodeName</font><font color="#cc0099">＝</font><font color="maroon">「SPAN」</font><font color="#cc0099">)</font><font color="#cc0000">ならば</font>、<font color="black">セル</font><font color="#cc0099">＝</font><font color="#cc0099">対象</font><font color="#cc0099">.</font><font color="black">parentNode</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">ソート列</font><font color="#cc0099">＝</font><font color="black">セル</font><font color="#cc0000">の</font><font color="black">セル列番号</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">ヘッダ</font><font color="#cc0099">＝</font><font color="black">テストデータ</font><font color="#cc0000">の</font><font color="#0000cc">0</font><font color="#cc0000">を</font><font color="#660099">配列切り取り</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">テストデータ</font><font color="#cc0000">の</font><font color="black">ソート列</font><font color="#cc0000">を</font><font color="#660099">表ソート</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">もし</font>、<font color="black">昇順</font><font color="#cc0099">＝</font><font color="#660099">はい</font><font color="#cc0000">でなければ</font>、<font color="black">テストデータ</font><font color="#cc0000">を</font><font color="#660099">配列逆順</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">昇順</font><font color="#cc0099">=</font><font color="black">昇順</font><font color="#cc0099">*</font><font color="#cc0099">-</font><font color="#0000cc">1</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">テストデータ</font><font color="#cc0000">の</font><font color="#0000cc">0</font><font color="#cc0000">へ</font><font color="black">ヘッダ</font><font color="#cc0000">を</font><font color="#660099">配列挿入</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">テストテーブル</font><font color="#cc0000">を</font><font color="black">テストデータ</font><font color="#cc0000">に</font><font color="black">テーブル更新</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">記号</font><font color="#cc0099">＝</font><font color="maroon">「▲」</font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">もし</font>、<font color="black">昇順</font><font color="#cc0099">=</font><font color="#660099">はい</font><font color="#cc0000">ならば</font>、<font color="black">記号</font><font color="#cc0099">＝</font><font color="maroon">「▼」</font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">ソート列</font><font color="#cc0000">に</font><font color="black">記号</font><font color="#cc0000">の</font><font color="black">ソート記号追加</font>。<br><font color="#cc0099">ここまで</font>。<br><br><strong><font color="#cc0099">●(列に記号の)ソート記号追加</font></strong><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">全ヘッダ</font><font color="#cc0099">＝</font><font color="black">テストテーブル</font><font color="#cc0000">の</font><font color="maroon">「th」</font><font color="#cc0000">を</font><font color="#660099">DOM子要素全取得</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">母艦</font><font color="#cc0099">＝</font><font color="#660099">DOM親要素</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">全ヘッダ</font><font color="#cc0000">を</font><font color="#cc0099">反復</font><font color="#cc0099">:<br>&nbsp;&nbsp;&nbsp;&nbsp;　　</font><font color="#cc0099">対象</font><font color="#cc0000">に</font><font color="#660099">DOM親部品設定</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;　　<font color="#cc0099">もし</font>、<font color="#cc0099">対象キー</font><font color="#cc0099">＝</font><font color="black">列</font><font color="#cc0000">ならば</font>、<font color="#cc0099">:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font><font color="black">記号</font><font color="#cc0000">の</font><font color="#660099">ラベル作成</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">それ</font><font color="#cc0000">に</font><font color="#cc0099">{</font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="maroon">"margin-left"</font><font color="#cc0099">:</font><font color="maroon">"0.5em"</font>,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="maroon">"vertical-align"</font><font color="#cc0099">:</font><font color="maroon">"middle"</font>,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="maroon">"font-size"</font><font color="#cc0099">:</font><font color="maroon">"0.7em"</font>,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="maroon">"色"</font><font color="#cc0099">:</font><font color="#660099">灰色</font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">}</font><font color="#cc0000">を</font><font color="#660099">DOMスタイル一括設定</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">母艦</font><font color="#cc0000">に</font><font color="#660099">DOM親部品設定</font>。<br><font color="#cc0099">ここまで</font>。</blockquote>

　できました！　いい感じ？

https://n3s.nadesi.com/id.php?2919

# セル幅の変更
　v1のグリッドでは、ヘッダ部分をドラッグしてセル幅を変更できます。
　テーブル部品のセル幅は内容に応じて自動的に良きように調整されるので、あんまりいらないかもと思いましたが、勝手に調整されない設定にしたい場合もあるかもしれないし、何より出来るとかっこいいw

　CSSで出来そうかなと思って調べたら、`resize`というスタイルがありました‼️
　マウスを動かしたイベントやら位置や移動量なんて一切考える必要なさそうです。
　値は、`both`で縦横可変、`horizontal`幅だけ、`vertical`高さだけ。不可は`none`。
　今回はセルの幅だけ変えられたら良いので、全てのヘッダ(th)の「resize」に「horizontal」をDOMスタイル設定すれば良いはず。
<blockquote><font color="#cc0099">変数</font>&nbsp;<font color="black">全ヘッダ</font><font color="#cc0099">＝</font><font color="black">テストテーブル</font><font color="#cc0000">の</font><font color="maroon">「th」</font><font color="#cc0000">を</font><font color="#660099">DOM子要素全取得</font>。<br><font color="black">全ヘッダ</font><font color="#cc0000">を</font><font color="#cc0099">反復</font><font color="#cc0099">:<br>　　</font><font color="#cc0099">対象</font><font color="#cc0000">の</font><font color="maroon">「resize」</font><font color="#cc0000">に</font><font color="maroon">「horizontal」</font><font color="#cc0000">を</font><font color="#660099">DOMスタイル設定</font>。</blockquote>

　でも出来ない！


　さらに調べると、`overflow`が`visible`になっていると`resize`が働かないということで、`hidden`に設定。
　でもでも出来ない！！

　さらにさらに調べると、Chromeはこれだけで出来るのですが（できた！）Firefoxの場合は出来ず、thの中にdivを入れて、そのdivにこの設定を付けてやらなければいけないとのこと。にゃにぃ～💧

<blockquote><font color="black">テストテーブル</font><font color="#cc0099">＝</font><font color="maroon">「名前,ふりがな,点数<br>太郎,たろう,55<br>花子,はなこ,100<br>一郎,いちろう,80」</font><font color="#cc0000">の</font><font color="#660099">テーブル作成</font>。<br><br><font color="#009900">#&nbsp;ヘッダの設定</font><br><font color="#cc0099">変数</font>&nbsp;<font color="black">全ヘッダ</font><font color="#cc0099">＝</font><font color="black">テストテーブル</font><font color="#cc0000">の</font><font color="maroon">「th」</font><font color="#cc0000">を</font><font color="#660099">DOM子要素全取得</font>。<br><font color="black">全ヘッダ</font><font color="#cc0000">を</font><font color="#cc0099">反復</font><font color="#cc0099">:<br>&nbsp;&nbsp;&nbsp;&nbsp;</font><font color="#009900">#&nbsp;ヘッダのテキストを新しく作ったdivの中にうつす</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">テキスト</font><font color="#cc0099">＝</font><font color="#cc0099">対象</font><font color="#cc0000">の</font><font color="#660099">テキスト取得</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">対象</font><font color="#cc0000">に</font><font color="#660099">空</font><font color="#cc0000">を</font><font color="#660099">テキスト設定</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">対象</font><font color="#cc0000">に</font><font color="#660099">DOM親部品設定</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="maroon">「div」</font><font color="#cc0000">の</font><font color="#660099">DOM部品作成</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">それ</font><font color="#cc0000">に</font><font color="black">テキスト</font><font color="#cc0000">を</font><font color="#660099">テキスト設定</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">#&nbsp;リサイズの設定。horizontalが横幅。</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">#&nbsp;overflowがvisibleになっているとresizeが効かない</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">#&nbsp;white-space:nowrapで狭くした時に文字が折り返すのを止める。</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">それ</font><font color="#cc0000">に</font><font color="#cc0099">{</font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="maroon">"resize"</font><font color="#cc0099">:</font><font color="maroon">"horizontal"</font>,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="maroon">"overflow"</font><font color="#cc0099">:</font><font color="maroon">"hidden"</font>,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="maroon">"white-space"</font><font color="#cc0099">:</font><font color="maroon">"nowrap"</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">}</font><font color="#cc0000">を</font><font color="#660099">DOMスタイル一括設定</font>。</blockquote>

　できました！
　でもthに余白がついているために、見た目がビミョーなことになっています💧

 ![リサイズできるけど.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561177/ea64ae0f-1e1e-6429-66df-5e81f2ed0362.jpeg)

　thの余白は0にして、セルの余白はdivの方に付ける必要がありそうです・・・が！　元々thに付いている余白のサイズは一体どうやって取得したらいいんだ。
　DOMスタイル取得では、要素自体にスタイルが設定されている場合しか取得できません。試しにやってみると、空が返ってきました。
　貯蔵庫のスタイルシートで0.4emが付いてることは分かってるんだけどさー。ソレを決め打ちするっていうのはアレですよね？　ある種負けみたいなｗ
　調査のレイアウトで見れるんだから、なんかかんか取得する手立てがありそうなもんだ。

## getComputedStyleを知る‼️
　`WINDOW`オブジェクトに`getComputedStyle()`というメソッドがあって、**引数にDOM要素を与えると、CSSプロパティ情報をオブジェクトとして取得することが出来る**ラシイ。
　早速やってみます！

<blockquote><font color="#660099">WINDOW</font><font color="#cc0000">の</font><font color="maroon">「getComputedStyle」</font><font color="#cc0000">を</font><font color="#cc0099">対象</font><font color="#cc0000">で</font><font color="#660099">JSメソッド実行</font>。<br><font color="#cc0099">それ</font><font color="#cc0099">.</font><font color="black">padding</font><font color="#cc0000">を</font><font color="#660099">表示</font>。</blockquote>

　6.4pxと出ました。合っています！　すばらしい。
　しかもemで付けられていてもpxに換算されて出てくるようです。
　これをdivのほうに付けてやり、ヘッダの余白は０とすれば、ヘッダの枠とdivがピッタリ重なりいい感じ🎶
　ちなみにこれは「それ.余白」にはできませんでした。

　なお今回はスタイルの内容をそっくりdivに移すのが目的なので良いですが、単位付きでの取得となるので数値が欲しい場合は単位を削除する必要があります。
　またpaddingは上右下左をまとめて設定出来るヤツなので、設定によっては「1px 2px 4px 2px」などと取得されますので注意が必要です。

　おっと、もちろんwidthも取得出来ますよ。
　すごく狭くした時文字が折り返されてヘッダの高さが伸びてしまうのイヤンなので、

![文字が縦になる.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561177/3f26fec1-f33e-95ff-456d-453d493423f8.jpeg)

`white-space:nowrap`など付けてみていましたが、むしろもうdivの最小サイズを親要素のヘッダの幅に設定してやればよいのでは？！

<blockquote><font color="#009900">#&nbsp;ヘッダの設定</font><br><font color="#cc0099">変数</font>&nbsp;<font color="black">全ヘッダ</font><font color="#cc0099">＝</font><font color="black">テストテーブル</font><font color="#cc0000">の</font><font color="maroon">「th」</font><font color="#cc0000">を</font><font color="#660099">DOM子要素全取得</font>。<br><font color="black">全ヘッダ</font><font color="#cc0000">を</font><font color="#cc0099">反復</font><font color="#cc0099">:<br>&nbsp;&nbsp;&nbsp;&nbsp;</font><font color="#009900">#&nbsp;ヘッダの余白サイズを調べ、ヘッダの余白は0にする。</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#660099">WINDOW</font><font color="#cc0000">の</font><font color="maroon">「getComputedStyle」</font><font color="#cc0000">を</font><font color="#cc0099">対象</font><font color="#cc0000">で</font><font color="#660099">JSメソッド実行</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">余白サイズ</font><font color="#cc0099">＝</font><font color="#cc0099">それ</font><font color="#cc0099">.</font><font color="black">padding</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">最小幅</font><font color="#cc0099">＝</font><font color="#cc0099">それ</font><font color="#cc0099">.</font><font color="black">width</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">対象</font><font color="#cc0099">.</font><font color="black">余白</font><font color="#cc0099">＝</font><font color="#0000cc">0</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">#&nbsp;ヘッダのテキストを新しく作ったdivの中にうつす</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">テキスト</font><font color="#cc0099">＝</font><font color="#cc0099">対象</font><font color="#cc0000">の</font><font color="#660099">テキスト取得</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">対象</font><font color="#cc0000">に</font><font color="#660099">空</font><font color="#cc0000">を</font><font color="#660099">テキスト設定</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">対象</font><font color="#cc0000">に</font><font color="#660099">DOM親部品設定</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="maroon">「div」</font><font color="#cc0000">の</font><font color="#660099">DOM部品作成</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">それ</font><font color="#cc0000">に</font><font color="black">テキスト</font><font color="#cc0000">を</font><font color="#660099">テキスト設定</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">#&nbsp;リサイズの設定。horizontalが横幅。</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">#&nbsp;overflowがvisibleになっているとresizeが効かない</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">#&nbsp;min-widthでヘッダの幅より小さくならないようにする。</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">#&nbsp;ヘッダの余白をうつす</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">それ</font><font color="#cc0000">に</font><font color="#cc0099">{</font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="maroon">"resize"</font><font color="#cc0099">:</font><font color="maroon">"horizontal"</font>,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="maroon">"overflow"</font><font color="#cc0099">:</font><font color="maroon">"hidden"</font>,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="maroon">"min-width"</font><font color="#cc0099">:</font><font color="black">最小幅</font>,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="maroon">"余白"</font><font color="#cc0099">:</font><font color="black">余白サイズ</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">}</font><font color="#cc0000">を</font><font color="#660099">DOMスタイル一括設定</font>。</blockquote>

　できました✨
 
https://n3s.nadesi.com/id.php?2920

# 続くかも知れないし続かないかも知れない
　ユキノはgetComputedStyleのじゅもんをおぼえた！

　これでグリッド部品の、あると良さそうな機能はだいたい出来たかなあと思います。
　他にまだナニカあるでしょうか。
　ワタクシ一回しかグリッド部品使ったことなかったものですから～😅

　今回はバラバラの状態でそれぞれお試ししましたが、全部おまとめしてグリッド部品のようにしたら良いのかなあとか、そーゆうのはよく出来たライブラリにおまかせして、テーブル部品に欲しい機能をチョコッと追加出来るようになっていると良いのかなぁとかとか色々考えるわけですが、知恵と時間が追い付かず文字数も結構なものになりましたので、一通りできたよ！　というところでひとまず終了です。

　しかし、相変わらず書くこと無くてピンチなので、なんかかんか考えて続く可能性も無くはありません。
　アドベントカレンダー、後半はまだまだいっぱい空いています。
　ぜひぜひご参加下さいませ～🙇‍♀️

### 続きました！

https://qiita.com/snowdrops89/items/c0ccc67b57a9c2418fe8