(モダン) テーブルコントロールを使ってみよう


# はじめに

以前こちらのブログでもモダンコントロールを紹介しましたが、例えば、フォントのサイいろいろが変えれないなど、個人的に、正直、まだ本番アプリで使うには物足りなさがありました。

https://qiita.com/Takashi_Masumori/items/ae700eeb59ee54ca6bbc

しかし、近頃のアップデートにより、種類が増えたり、プロパティが充実してきたことで、大分実用的になってきたかなと思っています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/8b8171e3-1746-4a51-aa95-ca583aa38ae7.png)

例えば、同じタブ一覧コントロールで比較してみると、以下の通りプロパティが増えていることが分かります。

**以前**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/d42e27c1-0341-c65d-c03c-c5612e533d4d.png)

**記事執筆時点**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/aece4f34-9e60-f2e9-511d-c03c3f3beaa0.png)

そして、今回は、こちらのテーブルについて紹介をしたいと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/512dcf31-21ef-fa86-2253-15c6c5b3a8f1.png)

# (モダン) テーブルコントロール

まずはじめに、これまでのテーブルコントロール (クラシック) と比較をしてみます。
好みもあると思いますが、モダンの方がおしゃれですかね。

**クラシック**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/9985de2f-4ce6-c8fd-bfeb-47adf4e8864c.png)

**モダン**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/3848db88-b9dd-b309-06e9-47b9f90d8f6d.png)

:::note

以下では、Dataverse のみとなっていますが、今は SharePoint リストにも対応しております。実際に、上記は、SharePoint リストをデータソースにしています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/04b56dde-971a-cffc-21eb-6757e96b2624.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/60ddcda0-038c-a298-edae-6523491f454e.png)
:::

続いて、モダンの方のプロパティを確認してみます。

表示するフィールドの編集はこちらから可能です。フォームコントロールと同じように表示したい列や順番を簡単に変更出来るのは良いですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/552b1f40-1c8c-9f7a-319e-b70cc0ca93f8.png)

ギャラリーは自由自在ですが、以下で紹介したように、表示する列の指定の仕方について、最初は躓いてしまうケースもあると思いますし、個人的に、初めてアプリ内でデータの一覧表示をするときはテーブルの方が簡単と思っています。

https://qiita.com/Takashi_Masumori/items/63db56c23a83f25b19ee

また、表示するデータのフィルターも可能です。この辺はギャラリーと同じ感覚で出来ると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/9ea9bd6d-daa1-7844-4442-034af80e12e8.png)

テーブル内で選択をした際の色は以下から変更出来ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/298305a8-6b12-ba55-791f-b44a82ccfe78.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/d0044931-6fee-2402-9d65-212cc3c08cca.png)

こちらを個別に設定できますが、`[BasePaletteColor]`プロパティが空の場合、テーマの色に従います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/53c34280-63e4-7892-d067-89f9d136cb57.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/5455e6ac-4252-2404-43f0-9190ca1a95c0.png)

リフロー動作というちょっと聞き慣れない設定ですが、モバイルサイズになった際、リスト表示にするかどうかを指定できるようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/b5d297cb-2a2c-9843-13df-8db2cf3812ae.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/9b2e1b54-bfe1-feb4-c91d-6d69ccb6762d.png)

その他、ヘッダーやフッターの表示に関してもプロパティで調整できるようです。個人的には基本的にこのままでいいかなと思っています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/dd9a53ec-d89b-8b1f-e3c4-889e62eae87c.png)

データの件数が多い場合、ページングもいい感じにやってくれるようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/da387e21-2cf6-1ef1-05df-b74bbc785f79.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/e638e557-db02-66be-62d2-3f2adc0d0e35.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/b6a7016c-e340-eea5-78e5-c92a68b0c40b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/f013df82-222b-29c6-fe3b-cbb99a2a122e.png)

次に、テーブル内のセルをコピーして貼り付けることができます。こちらは素晴らしいですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/ce73c861-7f72-3696-61ca-1361a829ac04.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/32e5f3ad-02c5-b0cc-46dd-e65d8c417f45.png)

次に、以下のように、標準でソートする機能がついています。これも素晴らしいですね。よく、日付などでソートすることがあり、SortByColumns 関数を利用することがありますが、わざわざ式を書かなくても良くなると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/e4410e0d-ef93-aa59-1f7c-8bdefd225d6b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/4d01845f-4d2f-f66f-bbbc-9003e0bfa3ed.png)


最後に、以下のような感じでレスポンシブなため、この点においても使い勝手がよさそうです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/fac6982d-5b7e-9f18-13b2-1c50a53df769.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/ee658458-fdd0-1b1c-cfe3-dc2e5740e922.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/57d84497-5f8a-8f48-6909-cd78c01d9468.png)

# まとめ

今回は、(モダン) テーブルコントロールについて紹介しました。
かなりいい感じなため、個人的に、データを表示する際、細かいこだわりがない場合や、Excel ライクにしたい場合はこちらを使うのがよいかなと思っています。

※例えば、以下で紹介したような感じで、見た目をこだわる場合は、ギャラリーを使うのがよいと思います

https://qiita.com/Takashi_Masumori/items/34899b9603d6b14c7716