テンプレート選択の複数のリストを含むモジュール作成画面を管理するにはどうすればよいですか
仕様：
以下の設計の目的は、3セットのテンプレートを使用して1つのモジュールを作成することです。
各テンプレートには、異なるデータベーステーブルから取得されたテンプレートのリストがあります。
テンプレートセットの選択はオプションです。ユーザーは、各テンプレートセットから複数のテンプレートを選択できます。
名前、説明、価格は必須フィールドです。
上記の仕様に従って、下図のような画面を設計しました。
画像1：最初のデザインは、3つのテンプレートセットが3つの異なる列の1つのテーブルに表示される表形式のレイアウトです。これは技術的に困難なことです。
注1：3つのデータソースすべてが動的にバインドされ、データをバインドできないため、1つのテーブルレイアウトを作成することはできません。単一のテーブルから。
画像2：したがって、テンプレートセットごとに個別のテーブルを持つ2番目のレイアウトを設計しました。
注：
3つのテーブルレイアウトを作成できますが、3つのテーブルのデザインはデータに応じて変更されるため、すべてのテーブル行が1行に表示されるわけではありません。
画面にすべてのテンプレートを表示したいので、複数選択ドロップダウンを使用していません。
レイアウトは、UXの観点からはそれほど魅力的に見えません。誰もがこれより優れたUXを提案したり、UXのために私ができる改善を提案したりできますか？
画像1：
画像2：
3列のテーブル設計のソリューション。
a）タイトルの左側にあるメインチェックボックスを削除し、最初のチェックボックスのすぐ上の最初の行に「すべて選択」のオプションを配置する
b）3つの列すべてを同じ行数に制限します。 4
c）4番目の行の下に、残りの行を切り替える「もっと切り替え」を配置します。または列内にスクローラーを配置
3つのテーブルの解決策、互いの下に積み重ねられたa）再び同じ-タイトルからチェックを削除し、最初の行の上に配置します
b）すべてのタイトルをアコーディオンスタイルにし、クリックすると下の行を展開または折りたたむ
c）最初のテーブル/セクションを作成し、デフォルトでオンにし、他の2つを閉じます。
d）/の切り替え用のアイコンを配置します（シェブロンを上向きにするか、シェブロンを下向きにするか、プラスかマイナスか...）
この2番目のアコーディオンソリューションは、モバイルでの使用にも適しています。モバイルの場合は、この[公開]ボタンと[キャンセル]ボタンを下に固定して、スクロールすると常に表示されるようにすることができます。
また、チェックボックスをクリック可能にするだけでなく、その隣のタイトルも常にクリック可能にすることをお勧めします。
ボーダーテーブルがないこと、エフェクトをホバーすること、アニメーションを切り替えることなどで達成できる追加のデザインアトラクションです。