web-dev-qa-db-ja.com

ユーザーがデータテーブルの列を非表示/表示できるようにするためのベストプラクティス

15個を超える列を含むことができるテーブルがあります。ユーザーが15個の列を同時に表示することはほとんどありませんが、表示する列を選択するオプションをユーザーに提供する必要があります。表にセクションを追加して、ユーザーが「使用可能な列」から選択して、表示される「選択した列」に移動できるようにします。 enter image description here

しかし、クライアントはよりインタラクティブで直感的なものを探しているため、クライアントはそれを好みませんでした。私が使用できる他のコントロールを私に勧めることができますか?注意!テーブルはExcelテーブルに似ており、ユーザーは列で展開、フィルター、およびソートできます。 Excelのようなものを使用して列を非表示にすることを考えていましたが、「表示」列を作成する方法を見つけることができませんでした。

3
Amapola

ユーザーが表示しているデータのすぐ近くにテーブルコントロールを配置することを検討してください。

上記の例では、リストビルダーを使用しています。これはExcelのテーブルに似ていると言います。テーブルの行にCRUDアクション、またはテーブルの上のフィルターコントロールはありますか?

表示されるテーブルコントロールは、ユーザーがリストビルダーを表示するために「モード」に入る必要がなく、アクションの結果をコンテキストで確認できることを意味します。

ユーザーがかなり頻繁に表示するように列を調整する可能性がある場合は、次の例のように、テーブルの上に列コントロールを使用できます。

enter image description here

以下は、動作中の別のバージョンです(おそらく、ラベルを使用してより見つけやすくします)。

フィラメントグループのTablesawプロジェクト

enter image description here

Mailchimpを使用すると、列の順序も変更できます:

enter image description here

ユーザーがテーブルの列を制御したい理由は2つ考えられます(どちらになるかはわかりません)。

  1. 関連性の低いカラムのノイズを減らす
  2. ビューポートの幅、および優先するデータのトレードオフ

最初の例は、チェックボックスコントロールで機能します。

2番目も機能しますが、いくつかのレスポンシブテーブルパターン(私はあなたが持っていると想定しています)を検討して、水平スクロールまたはモバイルスタック行パターンを考慮できると思います。

cssトリックからの応答データテーブル

それは2012年からですが、レスポンシブテーブルオプションの適切なまとめと上記のリンクです。

5
Mike M

使用されていない場合は通常の左クリックで、クリックが使用されている場合はコンテキストクリックで、列ラベルをアクティブにします。有効にすると、Sort A-ZSort Z-AFilterResizeHideSelect columnsのオプションを含むポップアップメニューが表示されます。列の選択は、すべての列がリストされたサブメニューであり、それぞれにチェックボックスがあります。

さらに、[列の選択]サブメニューで、または列ラベル自体を使用して、ドラッグアンドドロップスタイルで列の順序を動的にし、列の順序を変更できます。かなり遅いですが、ドラッグアンドドロップをMove leftMove rightに置き換えることができます。ドラッグほどユーザーフレンドリーではありませんが、カスタマイズは可能です。

1