DataGridProで特定のカラムのフィルタリングを無効にする

目次

DataGridProで特定のカラムのフィルタリングを無効にする

MUIのDataGridProコンポーネントは、データの表示、ソート、フィルタリングなど多くの機能を提供します。
しかし、特定のカラムでのフィルタリングを無効にしたい場合があります。
本記事では、その方法について説明します。

ステップ1: columns propの設定

DataGridProで特定のカラムからフィルターを除外するには、columns propを使用して各カラムの設定を行います。
filterableプロパティをfalseに設定することで、該当のカラムでのフィルタリングが無効になります。

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  {
    field: 'firstName',
    headerName: 'First name',
    width: 150,
    editable: true,
    filterable: false, // フィルタリングを無効にする
  },
  {
    field: 'lastName',
    headerName: 'Last name',
    width: 150,
    editable: true,
    filterable: false, // このカラムでもフィルタリングを無効にする
  },
  {
    field: 'age',
    headerName: 'Age',
    type: 'number',
    width: 110,
    editable: true,
  },
];

ステップ2: DataGridProコンポーネントの構築

次に、DataGridProコンポーネントを構築し、columns propとして上で定義したcolumns配列を渡します。

<DataGridPro
  rows={rows}
  columns={columns}
  pageSize={5}
  localeText={jaJPMuiXDataGrid}
/>

まとめ

DataGridProのcolumns propを適切に設定することで、特定のカラムでのフィルタリングを簡単に無効にできます。
これにより、ユーザーが不要なカラムでフィルタリングを行うことなく、必要なデータだけに焦点を当てることができます。