Upgrade to Pro — share decks privately, control downloads, hide ads and more …

MUI DataGridProコンポーネントの紹介

toridori
October 01, 2024
230

MUI DataGridProコンポーネントの紹介

自社サービスの新機能開発で初めて MUI DataGrid コンポーネントを使用し、今後、既存のテーブルコンポーネントを DataGrid に置き換えるタスクも予定されています。プロジェクト全体で長期的に DataGrid を活用する見込みがあるため、その機能やメリット・デメリットを理解し、開発チームにも共有したいという思いから、今回の紹介に至りました。

toridori

October 01, 2024
Tweet

Transcript

  1. 目次 1. なぜこのお題? 2. そもそもMUIとは 3. DataGridとは 4. DataGridProの主な機能 5.

    Pro版限定の特別な機能 6. 自社サービスでの活用方法 7. まとめ
  2. 列の並び替え(Column Reordering) 特徴 ・ユーザーが列の順番をドラッグ&ドロップで自由に並べ替えできる機能。 ・カスタマイズされた列順を保存することも可能。 使う場面 ・データ分析や業務フローに合わせてカスタマイズしたい時 ユーザーにとっての利点 ・自分にとって重要な情報を素早く見やすく配置できるため、業務効率向上を 見込める。ユーザーごとに柔軟な操作が可能になり、個別のニーズに対応でき

    る。 詳細パネル(Detail Panel) 特徴 ・各行に関連する詳細情報を折りたたみ式パネルで表示できる機能 使う場面 ・行に表示するには多すぎる追加情報がある場合 (例: 商品の概要は行で表示し、商品詳細や顧客履歴などはパネル内に表示) ユーザーにとっての利点 ・必要な時にだけ詳細情報を表示でき、画面が整理され、見やすさが向上。
  3. ツリーデータ構造での表示(Tree Data) 特徴 ・データを親子関係で階層化して表示する機能 使う場面 ・階層構造を持つデータを表示・管理する場合に便利です。 (例: プロジェクトとそのサブタスク、カテゴリとサブカテゴリ) ユーザーにとっての利点 ・階層化されたデータを見やすく、管理しやすい状態で表示できるため、大規模で

    複雑なデータでも直感的に把握できます。必要に応じて展開・折りたたみできるの で、効率的に情報を閲覧できます。 ヘッダーフィルタ/マルチフィルタ(Header-Filter/Multi-Filter) 特徴 ・各行に関連する詳細情報を折りたたみ式パネルで表示できる機能 使う場面 ・行に表示するには多すぎる追加情報がある場合 例)商品の概要は行で表示し、商品詳細や顧客履歴などはパネル内に表示 ユーザーにとっての利点 ・必要な時にだけ詳細情報を表示でき、画面が整理され、見やすさが向上。
  4. 1. 初回レンダリング時の処理 ・ページサイズ(1ページあたりに表示する件数)や現在の ページ番号は、デフォルトで10件、0ページ目(最初のペー ジ)として設定しています。 ・ページが最初に表示されるとき、useDataQuery が呼び出さ れ、サーバーから最初のページ(この場合は10件分)のデータ を取得します。このデータは、テーブルに表示されます。 2.

    ユーザーがページを進めたときの処理 ・ユーザーが「次のページ」のボタンをクリックすると、 handlePaginationChange 関数が呼ばれます(「前へページ」 のボタンも同様)。このとき、現在のページの次に表示する データをサーバーにリクエストし、新しいデータがテーブル に表示されます。 ・さらに、hasNextPage が true の場合のみ、次のデータがあ ることを確認し、fetchMore関数 を使って次のデータを取得し ます。 サーバーページネーションの実装(Graphqlでの一例)