テーブルの列が多すぎるとどうなりますか？
テーブルの列が多すぎるとどうなりますか？
可能な解決策：
- 水平スクロールバー
- サイズ変更可能な列
- 一部の列を除外するためのテーブル設定
良い/悪い習慣は何ですか？この問題に対する他のより好ましい解決策はありますか？
列のサイズ変更と選択は優れたソリューションですが、根本的な原因ではなく症状に対処する、より一般的な設計後のソリューションです。また、テーブルを配置することではないという主な目的からユーザーをそらします。
最初に自分自身に尋ねるべきですユーザーは本当にテーブルのすべての詳細を必要としますか？どんな理由で？ テーブルは通常、データをすばやく確認するためのものですデータをすべて表示して編集するためのソリューションではありません。この場合、以下の方法を検討してください。 テーブルの必須列のみを表示します。行をクリックすると、詳細が表示されますサイド/上/下/折りたたみパネル。次の例を参照してください（詳細パネルの大まかなデザインは無視してください）。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
最後に、水平スクロールバーは悪いです。それらをスクロールすることはできません。少なくとも自然な方法ではできません。それらを使用しないでください。
地元の鉄道スケジュールサイトの多すぎる列にこのクリエイティブソリューションを見つけました。このシナリオでは、旅行者が必要とする列をプログラムで予測することは困難です。誰もが常にステーション列を必要とします。旅行者がスクロールすると、電車の時刻は駅の列の下をスライドします。 （奇妙なことに、モバイルサイトはこの機能をもう使用していません。スケジュールが更新されたばかりなので、見落としを期待しています。）
数年前、私は長くて幅の広いテーブルを含む単一ページのWebアプリにも対処する必要があり、コンテンツを適切に表示できるソリューションを考えなければなりませんでした。最終的に私はそのための小さなjsライブラリ（ http://codepen.io/lopis/pen/OPVVPP ）を作成しました。
- ユーザーごとの永続性を使用して、列の表示を切り替えます（私はCookieを使用しました）。
- 最も重要な情報が最初に近くなり、最も重要でない情報が最後にプッシュされるように列を移動します。これにより、ユーザーが将来横スクロールする必要が少なくなります。
- 列のサイズを変更して、特定の列の多かれ少なかれ表示します
私の目標は、ユーザーが自分の作業環境を自分の好みに合わせて調整できるようにすることでした。テーブルに列が多すぎる場合、多くは重要ではない可能性が高いです。
これは、テーブルに何を表示しているか、ユーザーがテーブルのデータをどのように処理するかによって異なります。
次のことを期待していますか？
- データを編集しますか？
- データを比較しますか？
ユーザーの観点からテーブルの目的、つまりユーザーの目標がわかったら、考える必要のあるUI機能を決定できます。
たとえば、ユーザーがテーブルのデータを編集する場合、テーブルの列数をreduceするのに役立ついくつかのオプションがあります。 。データを編集するには、次のオプションを検討してください。
- モーダルダイアログで編集-テーブルは、ユーザーがクリックしたときに情報に基づいた決定を行えるようにするために必要な最小限の列を表示する必要があるだけです。クリックして編集すると、テーブルに表示されないフィールドがあっても、レコードに関連するすべてのフィールドがモーダルダイアログに表示されるようになりました。編集するデータが少ない場合に最適です。
- 新しいページで編集-テーブルは、ユーザーがクリックしたときに情報に基づいた決定を行うために必要な最小限の列を表示する必要があるだけです。クリックして編集すると、テーブルに表示されないフィールドがあっても、新しいページにレコードに関連するすべてのフィールドが表示されます。編集するデータが多い場合に最適です。
- インラインセル編集-列の数を減らすことはできません
代替戦略は、従来の表形式のデータテーブルを使用しないことです。おそらく、代替レイアウトを検討してください。データが複数の行を占めるUIカードに似ています。
一部のデータは安全に隠して、必要に応じてオンデマンドで呼び出すことができると想定して、UIカードを展開してさらに表示することもできます。
あなたはおそらくあなたの問題についていくつかの詳細を提供する必要がありますが、複数の解決策があります。
あなたの提案はうまくいくかもしれませんが、そこに何がなければならないかを知ることは重要です。重要ではない列がありますか？次にそれらを削除します。それらすべてを1つのビューで表示する必要がありますか？横スクロールします。
別のオプションは、テーブルヘッダーを選択可能にして、1つ以上の使用可能な列の値を選択することです。
例えばユーザーの概要では、メールアドレス、通常のアドレスなどを表示するための名前とフィルターを表示する必要があります。
これらはオプションですが、それは本当にユースケースに依存します。前回最適化する必要があったときに、モバイルビューでいくつかの列を削除しました。それは、それらが重要ではなかったため、またはモバイルで作業するために重要なインターフェイスではなかったからです。