🖋️
MUI Data Grid v6 におけるColumnプロパティ一覧（日本語版）
はじめに
これは、Data GridのColumnプロパティの日本語一覧です。
@mui/x-data-gridの6.0.3の実際のコードを確認し、それを日本語訳したものになります。
Columnの型について
ColumnはTypeScriptではGridColDef[]型で表現されます。
GridColDefはGridBaseColDef、GridActionsColDef、GridSingleSelectColDef三つの型のユニオン型です。
それぞれはColumnプロパティのtypeをstring、actions、singleSelectに設定したときに変更されます。
型の内容は以下の通りです。
- GridBaseColDef
カラム定義の基本インターフェース。 - GridActionsColDef
actions型を持つカラムに使用されるカラム定義インターフェース。（GridBaseColDefを拡張している） - GridSingleSelectColDef
singleSelect型を持つカラムに使用されるカラム定義インターフェース。（GridBaseColDefを拡張している）
また、Columnプロパティについては公式ドキュメントから確認することも可能です。
GridBaseColDef
カラム定義の基本インターフェース。
| プロパティ名 | デフォルト値 | 説明 |
|---|---|---|
field |
- | 列の識別子。GridRowModelの値とマッピングされます。 |
headerName |
- | 列ヘッダーセルに表示される列のタイトル。 |
description |
- | 列ヘッダー名が完全に表示されない場合にツールチップとして表示される列の説明。 |
width |
100 | 列の幅を設定します。 |
flex |
- | 列の幅が流動的であることを示します。範囲は [0, ∞]。 |
minWidth |
50 | 列の最小幅を設定します。 |
maxWidth |
Infinity | 列の最大幅を設定します。 |
hideable |
true |
falseに設定すると、この列を非表示にするボタンが削除されます。 |
sortable |
true |
trueに設定すると、列はソート可能になります。 |
sortingOrder |
- | ソート順序の配列。 |
resizable |
true |
trueに設定すると、列のサイズが変更可能になります。 |
editable |
false |
trueに設定すると、列のセルが編集可能になります。 |
groupable |
true |
trueに設定すると、この列の値に基づいて行をグループ化できます（プロプラン専用）。 |
pinnable |
true |
falseに設定すると、列のピン留めメニュー項目がレンダリングされません。 |
sortComparator |
- | 行をソートするための比較関数。 |
type |
'string' | 列の型を設定します。 |
align |
- | セル内の列の値の配置を設定します。 |
valueGetter |
- | セルでレンダリングする特定のデータを取得する関数。 |
valueSetter |
- | 入力された値が行にどのように保存されるかをカスタマイズする関数。 |
valueFormatter |
- | 値をレンダリングする前に適用するフォーマッター関数。 |
valueParser |
- | ユーザーが入力した値を内部で使用する値に変換する関数。 |
cellClassName |
- | その列のセルに追加されるクラス名。 |
renderCell |
- | この列のセルとしてレンダリングされるコンポーネントをオーバーライドする関数。 |
renderEditCell |
- | 編集モードのセルとしてレンダリングされるコンポーネントをオーバーライドする関数。 |
preProcessEditCellProps |
- | セルが編集される際にプロパティが変更されたときに発火するコールバック。 |
headerClassName |
- | 列ヘッダーセルに追加されるクラス名。 |
renderHeader |
- | 列ヘッダーセルとしてレンダリングされるコンポーネントをオーバーライドする関数。 |
headerAlign |
- | ヘッダーセル要素の配置。 |
hideSortIcons |
false | ソートアイコンの表示を切り替えます。 |
disableColumnMenu |
false |
trueに設定すると、この列の列メニューが無効になります。 |
filterable |
true |
trueに設定すると、列はフィルタリング可能になります。 |
filterOperators |
- | この列のフィルタ演算子を設定する。 |
getApplyQuickFilterFn |
- | クイックフィルタ値に対するフィルタリング関数を生成するコールバック。 |
disableReorder |
false |
trueに設定すると、この列は並べ替え不可になります。 |
disableExport |
false |
trueに設定すると、この列はエクスポートに含まれません。 |
colSpan |
1 | セルが占める列数。関数も指定可能。 |
GridActionsColDef
actions型を持つカラムに使用されるカラム定義インターフェース。（GridBaseColDefを拡張している）
| プロパティ名 | デフォルト値 | 説明 |
|---|---|---|
type |
'actions' | 列の型を設定します。この場合、デフォルトでactionsとなります。 |
getActions |
- | 各行に表示されるアクションを返す関数。GridRowParamsをパラメータとして受け取り、GridActionsCellItemPropsのReact要素の配列を返します。 |
GridSingleSelectColDef
singleSelect型を持つカラムに使用されるカラム定義インターフェース。（GridBaseColDefを拡張している）
| プロパティ名 | デフォルト値 | 説明 |
|---|---|---|
type |
'singleSelect' | 列の型を設定します。この場合、デフォルトでsingleSelectとなります。 |
valueOptions |
- |
type: 'singleSelect'と組み合わせて使用されます。これは、可能なセルの値とラベルの配列（またはその配列を返す関数）です。 |
getOptionLabel |
- | 与えられた値オプションに対して表示されるラベルを決定するために使用されます。 |
getOptionValue |
- | 与えられた値オプションに対して使用される値を決定するために使用されます。 |
Discussion