LoginSignup
25
8

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

Last updated at Posted at 2023-11-30

はじめに

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

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

image.png

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

以前
image.png

記事執筆時点
image.png

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

image.png

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

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

クラシック

image.png

モダン

image.png

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

image.png

image.png

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

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

image.png

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

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

image.png

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

image.png

image.png

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

image.png

image.png

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

image.png

image.png

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

image.png

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

image.png
image.png
image.png

image.png

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

image.png

image.png

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

image.png

image.png

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

image.png

image.png

image.png

まとめ

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

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

25
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
25
8