web-dev-qa-db-ja.com

モバイル/タブレットのデータテーブル-マテリアルデザイン

データを行-列（テーブル）として表現することに関するこの新しい設計仕様を確認しました。

  1. データの表
  2. 垂直方向と水平方向にスクロールできるはずです
  3. インラインで編集できるはずです

https://www.google.com/design/spec/components/data-tables.html#data-tables-interaction

enter image description here

公式ドキュメントには、「データテーブルは通常デスクトップエンタープライズ製品に表示されます。」とありますが、私は興味がありますモバイル/タブレットでの実装について。

これは、モバイル/タブレットでこれだけのデータをテーブルとして表示するのに良い方法ですか？

mobilematerial-design
4
deniz

モバイルデバイスで3列を超えるデータを表示することは、通常、最善の方法ではありません。データが重複し始め、場合によってはコンテナーから出て、一緒に押し込まれます。

私が使用して満足している1つのソリューションは、データテーブルのレスポンシブ拡張です。

ここで確認できます https://www.datatables.net/extensions/sensitive 。

この拡張機能により、ブレークポイントを完全に制御でき、折りたたまれた情報を子行に表示できます。

3
JediTricks007

マテリアルデザインは一連のガイドラインですが、考えられるすべてのシナリオを網羅しているわけではありません。さらに、マテリアルデザインはモバイルを念頭に置いて構築されているため、すべての要素を「モバイルファースト」と考えてください。

ただし、考えられるすべてのニーズを把握することは不可能であるため、開発者の側から発生します。Materialを使用してテーブルを作成すると、さまざまな手法を適用できます。

  • 例1 これは、水平方向にスクロールされるコンテンツを扱います
  • 例2これは素材で作成され、テーブル行をカードに変換します（警告、テーブルに多くの行がある場合に適しています！）
  • 例私の個人的なお気に入りであり、レスポンシブな動作とフィルタリング結果により、さまざまな視覚化ステータスを作成できます

結局、それはあなたの特定のニーズに依存しますが、これが役立つことを願っています！

3
Devin