MUI X Data Gridでstore props等の実践に近いデータセットを扱う方法

MUI XのData Gridは、複雑なデータセットを扱うウェブアプリケーションにおいて、エクセルライクなテーブル表示を簡単に実現できる強力なコンポーネントです。大量のデータを扱いながらユーザーに高度な検索、フィルタリング、ソート機能を提供する際に特に有効です。

公式ドキュメントでは、rowsプロパティにオブジェクトの配列を設定することでData Gridを構築する基本的な方法が紹介されています。しかし、実際のアプリケーション開発では、データがこのようなフラットな形式で提供されることは少なく、より複雑なデータ構造を扱う必要があります。

例えば、データベースからのレスポンスがネストされたオブジェクト形式である場合や、異なるエンドポイントからのデータを組み合わせて表示する必要がある場合、idをキーとして使用し、その他の情報を別のプロパティから取得する方法が有効です。

実装の改善例

以下の実装例では、商品情報を別のオブジェクトとして管理し、GridColDefのvalueGetterプロパティを使用して、各行のデータを動的に取得する方法を示しています。

基本形式

// ベーシックなData Gridの設定
const rows = [
  { id: 1, productName: '幕の内弁当', sellingPrice: 500, costPrice: 300, quantity: 10 },
  { id: 2, productName: '唐揚げ弁当', sellingPrice: 470, costPrice: 260, quantity: 5 }
];

const columns = [
  { field: 'productName', editable: false },
  { field: 'sellingPrice', editable: false },
  { field: 'costPrice', editable: false },
  { field: 'quantity', editable: true }
];

<DataGrid rows={rows} columns={columns} />;

改善された実装例

// 商品情報を別に管理
const products = {
  10: { name: '幕の内弁当', sellingPrice: 500, costPrice: 300 },
  11: { name: '唐揚げ弁当', sellingPrice: 470, costPrice: 260 }
};

const rows = [
  { id: 1, productId: 10, quantity: 10 },
  { id: 2, productId: 11, quantity: 5 }
];

const columns = [
  {
    field: 'productName',
    editable: false,
    valueGetter: params => products[params.row.productId].name
  },
  {
    field: 'sellingPrice',
    editable: false,
    valueGetter: params => products[params.row.productId].sellingPrice
  },
  {
    field: 'costPrice',
    editable: false,
    valueGetter: params => products[params.row.productId].costPrice
  },
  {
    field: 'quantity',
    editable: true
  }
];

<DataGrid rows={rows} columns={columns} />;

コードの解説

この改善された実装例では、valueGetter関数を使用して、rows配列内のproductIdに基づき、productsオブジェクトから動的に商品名、販売価格、原価を取得しています。これにより、データの構造がより柔軟になり、異なるデータソースからの情報を組み合わせやすくなります。

valueGetterを使用する際は、特に大量のデータを扱う場合、計算コストを考慮することが重要です。必要に応じて計算結果のメモ化を検討し、行の仮想化を活用してパフォーマンスを向上させることができます。

おわりに

MUI XのData Gridを使用することで、複雑なデータの扱いも簡単になり、アプリケーションのUI/UXを大幅に向上させることが可能です。今回の実装例のように、valueGetterを駆使することで、より柔軟かつ効率的なデータ管理が実現できます。公式ドキュメントでさらに詳しい情報を得ることができるので、ぜひ参照してください。