MUI v5 DataGridの使い方 その6 ～グリッドのPropsの一覧～
前回に続いて、Vite+React+TypeScript 環境で MUI の DataGrid の使い方を、Tips的にまとめていきます。
MUI v5 DataGrid の記事一覧
MUI v5 DataGridの使い方 その1 ～基本の使い方から日本語化まで～
MUI v5 DataGridの使い方 その2 ～クリックできるアイコンセルを表示する～
MUI v5 DataGridの使い方 その3 ～セルの縦線を表示する（不具合対応済み）～
MUI v5 DataGridの使い方 その4 ～列ヘッダ、列の設定～
MUI v5 DataGridの使い方 その5 ～フッター～
MUI v5 DataGridの使い方 その6 ～グリッドのPropsの一覧～
MUI v5 DataGridの使い方 その7～有償版(Pro版)のエラー対応～
DataGridに指定できるPropsの一覧
DataGridPropsWithDefaultValues
autoHeight: boolean;
trueの場合、グリッドの高さは、グリッドの行数に応じて動的に変化します。
@default false
autoPageSize: boolean;
trueの場合、pageSize は、コンテナサイズと最大行数に応じて計算され、垂直スクロールバーの描画を回避します。
@default false
checkboxSelection: boolean;
trueの場合、グリッドは、行を選択するためのチェックボックスがある最初の列を取得します。
@default false
checkboxSelectionVisibleOnly: boolean;
trueの場合、"Select All" ヘッダーチェックボックスで、現在のページの行のみが選択されます。checkboxSelection`と組み合わせて使用します。
ページネーションが有効な場合のみ動作します。
@default false
columnBuffer: number;
可視スライスの前/後にレンダリングされる余分な列の数。
@default 3
rowBuffer: number;
可視スライスの前後にレンダリングされる追加行の数。
@default 3
rowThreshold: number;
新しいスライスがレンダリングされる前に、rowBuffer から表示可能な行数。
@default 3
columnThreshold: number;
新しいスライスがレンダリングされる前に、columnBuffer から表示できる行数。
@default 3
density: GridDensity;
グリッドのグリッドの行の高さを設定します。
'compact'は狭め。 'standard'は標準。 'comfortable'は広め。
@default "standard"
disableExtendRowFullWidth: boolean;
trueの場合、行は、グリッドコンテナの幅いっぱいに拡張されることはありません。
@default false
disableColumnFilter: boolean;
trueの場合、列のフィルタが無効になります。
@default false
disableColumnMenu: boolean;
trueの場合、カラムメニューは無効になります。
@default false
disableColumnSelector: boolean;
trueの場合、列の表示/非表示を無効になります。
@default false
disableDensitySelector: boolean;
trueの場合、グリッドの行の高さの選択機能は無効になります。
@default false
disableMultipleColumnsFiltering: boolean;
trueの場合、複数列のフィルタリングは無効です。
@default false
disableMultipleSelection: boolean;
trueの場合、CTRLキーまたはCMDキーによる複数選択は無効になります。
@default false
disableMultipleColumnsSorting: boolean;
trueの場合、複数列のソートが無効になります。
@default false
disableSelectionOnClick: boolean;
trueの場合、行やセルをクリックしたときの選択を無効になります。
@default false
disableVirtualization: boolean;
trueの場合、仮想化を無効になります。
@default false
editMode: GridEditMode;
セル編集と行編集のどちらを使用するかを制御します。
@default "cell"
filterMode: GridFeatureMode;
フィルタリングは、サーバー側で処理することも、クライアント側で処理することも可能です。
サーバー側でフィルタリングを行いたい場合は、'server'を指定します。
@default "client"
headerHeight: number;
グリッドのカラムヘッダーの高さをpixelで設定します。
@default 56
hideFooter: boolean;
trueの場合、フッターコンポーネントは非表示になります。
@default false
hideFooterPagination: boolean;
trueの場合、フッターのページネーションコンポーネントは非表示になります。
@default false
hideFooterRowCount: boolean;
trueの場合、フッターの行数が非表示になります。
ページ送りが有効になっている場合は、効果がありません。
@default false
hideFooterSelectedRowCount: boolean;
trueの場合、フッターの選択行数が非表示になります。
@default false
logger: Logger;
[[Logger]] インターフェースを実装するコンポーネントで、カスタムロガーを渡します。
@default console
logLevel: keyof Logger | false;
ロギングレベルを渡せるようにするか、ロギングをオフにするにはfalseを指定します。
@default "debug"
pagination: boolean;
trueの場合、ページネーションが有効になります。
@default false
paginationMode: GridFeatureMode;
ページネーションは、サーバー側で処理することも、クライアント側で処理することも可能です。
クライアント側でページングを処理したい場合は、'client' を設定します。
サーバーサイドでページングを処理したい場合は、'server'を設定します。
@default "client"
rowHeight: number;
グリッドの行の高さを pixel で設定します。
@default 52
rowsPerPageOptions: number[];
コンポーネントUIを使用して、動的にpageSizeを選択します。
@default [25, 50, 100]
rowSpacingType: 'margin' | 'border';
getRowSpacingによって追加される行間のスペースの種類を設定する。marginを指定した場合、グリッドの行と行の間にスペースが表示されます。 border`を指定した場合、グリッドの行と行の間は罫線が表示されます。
@default "margin"
showCellRightBorder: boolean;
trueの場合、セルの右端に罫線が表示されます。
@default false
showColumnRightBorder: boolean;
trueの場合、列のヘッダーの右端に罫線が表示されます。
@default false
sortingOrder: GridSortDirection[];
並べ替えの順番
@default ['asc', 'desc', null]
sortingMode: GridFeatureMode;
並べ替えは、サーバー側で処理することも、クライアント側で処理することも可能です。
クライアント側でページングを処理したい場合は、'client' を設定します。
サーバーサイドでページングを処理したい場合は、'server'を設定します。
@default "client"
throttleRowsMs: number;
正数なら、グリッドは apiRef.current.updateRows と apiRef.current.setRows から来る更新をスロットルで調整します。
更新レートは高いが、個々の更新ごとにフィルタリング/ソート/レンダリングなどの重い作業をしたくない場合に有効である。
@default 0
disableColumnReorder: boolean;
trueの場合、列の並べ替えは無効になります。
@default false
disableColumnResize: boolean;
trueの場合、列のサイズ変更は無効になります。
@default false
DataGridProPropsWithDefaultValue(有償版のみ）
scrollEndThreshold: number;
onRowsScrollEnd が呼び出されるグリッドビューポートの下部の領域を px 単位で設定します。
@default 80
treeData: boolean;
true の場合 getTreeDataPath プロパティに従ってツリー構造で集められます。
@default false
defaultGroupingExpansionDepth: number;
0以上の場合、行の子はこの深さまで拡張されます。
-1の場合、すべての行の子が展開されます。
@default 0
isGroupExpandedByDefault?: (node: GridRowTreeNodeConfig) => boolean;
グループが作成された後に拡張されるかどうかを決定する。
このプロパティーは defaultGroupingExpansionDepth プロパティーよりも優先されます。
@param {GridRowTreeNodeConfig} node
テストするグループのノード。
@returns {boolean}
グループが拡張されているかどうかを示す boolean。
disableColumnPinning: boolean;
true の場合、カラムのピン留めを無効にする。
@default false
disableChildrenFiltering: boolean;
true の場合、treeData プロパティで行をグループ化する際に、トップレベルの行にのみフィルタリングが適用されます。
@default false
disableChildrenSorting: boolean;
true の場合、 treeData プロパティで行をグループ化する際に、トップレベルの行に対してのみソートが適用されます。
@default false
disableRowGrouping: boolean;
true の場合、行のグループ化は無効となります。
@default false
rowGroupingColumnMode: 'single' | 'multiple';
single の場合、グループ化しているすべてのカラムが、同じカラムのグループとして表現されます。
multipleの場合、グループ化する各列は、それぞれの列で表現されます。
@default 'single'
getDetailPanelHeight: (params: GridRowParams) => number;
行詳細パネルの高さを返す関数です。
@param {GridRowParams} params
[[GridRowParams]]の全プロパティ
@returns {number}
高さをピクセル単位で指定します。
@default "() => 500"
DataGridPropsWithoutDefaultValue
apiRef?: React.MutableRefObject<GridApiCommunity>;
グリッド操作を可能にするRefオブジェクトです。
[[useGridApiRef()]でインスタンス化することができます。
TODO: コミュニティプランの APIRef を開く際に、@internal を削除する。
@internal
signature?: string;
Signal to the underlying logic what version of the public component API
of the data grid is exposed [[GridSignature]].
[[GridSignature]]のデータグリッドが公開されているデータグリッドのパブリックコンポーネントAPIの
どのバージョンが公開されているかを基になるロジックに通知します
@internal
classes?: Partial<GridClasses>;
コンポーネントに適用されるスタイルを上書きまたは拡張する。
columnTypes?: GridColumnTypesRecord;
ネイティブの列タイプを新しい列タイプで拡張します。
rowCount?: number;
行の総数を設定します。もし、 rows prop の値の長さと異なる場合は、行の総数を設定します。
行の中に子行がある場合（例えばツリーデータ）、この数値はトップレベルの行の量を表す。
scrollbarSize?: number;
グリッド内部スクロールバーの高さ/幅をオーバーライドします。
getCellClassName?: (params: GridCellParams) => string;
セルに対して動的に CSS クラスを適用する関数です。
@param {GridCellParams} params
[[GridCellParams]]のすべてのプロパティを持つ。
@returns {string}
セルに適用する CSS クラス。
getRowClassName?: (params: GridRowClassNameParams) => string;
CSS クラスを行に動的に適用する関数です。
@param {GridRowClassNameParams} params
[[GridRowClassNameParams]]のすべてのプロパティを持つ。
@returns {string}
行に適用する CSS クラス。
getRowHeight?: (params: GridRowHeightParams) => GridRowHeightReturnValue;
行ごとの高さを設定する関数。.
@param {GridRowHeightParams} params
[[GridRowHeightParams]]のすべてのプロパティを持つ。
@returns {GridRowHeightReturnValue}
行の高さの値。もし null または undefined ならば、デフォルトの行の高さが適用される。
getRowSpacing?: (params: GridRowSpacingParams) => GridRowSpacing;
行の間隔を指定する関数。
@param {GridRowSpacingParams} params
[[GridRowSpacingParams]]のすべてのプロパティを持つ。
@returns {GridRowSpacing}
行間の値。
getDetailPanelContent?: (params: GridRowParams) => React.ReactNode;
行の詳細でレンダリングする要素を返す関数。
@param {GridRowParams} params
[[GridRowParams]]のすべてのプロパティを持つ。
@returns {JSX.Element}
行の詳細要素。
isCellEditable?: (params: GridCellParams) => boolean;
セルがレンダリングされたときに起動されるコールバックで、セルが編集可能である場合に true を返します。
@param {GridCellParams} params
[[GridCellParams]]のすべてのプロパティを持つ。
@returns {boolean} A boolean
セルが編集可能かどうかを示す。
isRowSelectable?: (params: GridRowParams) => boolean;
行を選択できるかどうかを判定する。
@param {GridRowParams} params
[[GridRowParams]]のすべてのプロパティを持つ。
@returns {boolean} A boolean
セルが選択可能であるかどうかを示す。
onEditCellPropsChange?: GridEventListener<GridEvents.editCellPropsChange>;
編集セルの値が変更されたときに呼び出されるコールバック。
非推奨 代わりにGridColDefからpreProcessEditCellProps を使用する
@param {GridEditCellPropsParams} params
[[GridEditCellPropsParams]]のすべてのプロパティを持つ。
@param {MuiEvent<React.SyntheticEvent>} event
このプロップが呼び出される原因となったイベント。
@param {GridCallbackDetails} details
このコールバックの追加情報。
onCellEditCommit?: GridEventListener<GridEvents.cellEditCommit>;
セルの変更がコミットされたときに起動されるコールバック。
@param {GridCellEditCommitParams} params
[[GridCellEditCommitParams]]のすべてのプロパティを持つ。
@param {MuiEvent<MuiBaseEvent>} event
このプロップが呼び出される原因となったイベント。
@param {GridCallbackDetails} details
このコールバックの追加情報。
onCellEditStart?: GridEventListener<GridEvents.cellEditStart>;
セルが編集モードになったときに起動されるコールバック。
@param {GridCellParams} params
[[GridCellParams]]のすべてのプロパティを持つ。
@param {MuiEvent<React.KeyboardEvent | React.MouseEvent>} event
このプロップが呼び出される原因となったイベント。
onCellEditStop?: GridEventListener<GridEvents.cellEditStop>;
セルがビューモードになったときに起動されるコールバック。
@param {GridCellParams} params
[[GridCellParams]]のすべてのプロパティを持つ。
@param {MuiEvent<MuiBaseEvent>} event
このプロップが呼び出される原因となったイベント。
onRowEditCommit?: GridEventListener<GridEvents.rowEditCommit>;
行の変更がコミットされたときに起動されるコールバックです。
@param {GridRowId} id The row id.
@param {MuiEvent<MuiBaseEvent>} event
このプロップが呼び出される原因となったイベント。
onRowEditStart?: GridEventListener<GridEvents.rowEditStart>;
行が編集モードになったときに起動されるコールバックです。
@param {GridRowParams} params
[[GridRowParams]]のすべてのプロパティを持つ。
@param {MuiEvent<React.KeyboardEvent | React.MouseEvent>} event
このプロップが呼び出される原因となったイベント。
onRowEditStop?: GridEventListener<GridEvents.rowEditStop>;
行がビューモードになったときに起動されるコールバックです。
@param {GridRowParams} params
[[GridRowParams]]のすべてのプロパティを持つ。
@param {MuiEvent<MuiBaseEvent>} event
このプロップが呼び出される原因となったイベント。
onError?: GridEventListener<GridEvents.componentError>;
グリッドで例外が発生したときに実行されるコールバックです。
@param {any} args
showError` の呼び出しに渡される引数です。
@param {MuiEvent<{}>} event
イベントオブジェクト。
@param {GridCallbackDetails} details
このコールバックの追加情報。
onCellClick?: GridEventListener<GridEvents.cellClick>;
任意のセルがクリックされたときに実行されるコールバック。
@param {GridCellParams} params
[[GridCellParams]]のすべてのプロパティを持つ。
@param {MuiEvent<React.MouseEvent>} event
イベントオブジェクト。
@param {GridCallbackDetails} details
このコールバックの追加情報。
onCellDoubleClick?: GridEventListener<GridEvents.cellDoubleClick>;
セル要素からダブルクリックイベントが発生したときに呼び出されるコールバック。
@param {GridCellParams} params
[[GridCellParams]]のすべてのプロパティを持つ。
@param {MuiEvent<React.MouseEvent>} event
イベントオブジェクト。
@param {GridCallbackDetails} details
このコールバックの追加情報。
onCellFocusOut?: GridEventListener<GridEvents.cellFocusOut>;
セルがフォーカスを失ったときに呼び出されるコールバック。
[[GridCellParams]]のすべてのプロパティを持つ。
@param {MuiEvent<MuiBaseEvent>} event
イベントオブジェクト。
@param {GridCallbackDetails} details
このコールバックの追加情報。
onCellKeyDown?: GridEventListener<GridEvents.cellKeyDown>;
キーダウンイベントがセル要素から来たときに実行されるコールバック。
@param {GridCellParams} params
[[GridCellParams]]のすべてのプロパティを持つ。
@param {MuiEvent<React.KeyboardEvent>} event
イベントオブジェクト。
@param {GridCallbackDetails} details
このコールバックの追加情報。
onColumnHeaderClick?: GridEventListener<GridEvents.columnHeaderClick>;
カラムヘッダー要素からクリックイベントが発生したときに呼び出されるコールバックです。
@param {GridColumnHeaderParams} params
[[GridColumnHeaderParams]]のすべてのプロパティを持つ。
@param {MuiEvent<React.MouseEvent>} event
イベントオブジェクト。
@param {GridCallbackDetails} details
このコールバックの追加情報。
onColumnHeaderDoubleClick?: GridEventListener<GridEvents.columnHeaderDoubleClick>;
カラムヘッダー要素からダブルクリックイベントが発生したときに呼び出されるコールバック。
@param {GridColumnHeaderParams} params
[[GridColumnHeaderParams]]のすべてのプロパティを持つ。
@param {MuiEvent<React.MouseEvent>} event
イベントオブジェクト。
@param {GridCallbackDetails} details
このコールバックの追加情報。
onColumnHeaderOver?: GridEventListener<GridEvents.columnHeaderOver>;
カラムヘッダー要素からマウスオーバーのイベントが発生したときに呼び出されるコールバックです。
@param {GridColumnHeaderParams} params
[[GridColumnHeaderParams]]のすべてのプロパティを持つ。
@param {MuiEvent<React.MouseEvent>} event
イベントオブジェクト。
@param {GridCallbackDetails} details
このコールバックの追加情報。
onColumnHeaderOut?: GridEventListener<GridEvents.columnHeaderOut>;
カラムヘッダー要素からマウスアウトイベントが発生したときに呼び出されるコールバックです。
@param {GridColumnHeaderParams} params
[[GridColumnHeaderParams]] のすべてのプロパティを持つ。
@param {MuiEvent<React.MouseEvent>} event
イベントオブジェクト。
@param {GridCallbackDetails} details
このコールバックの追加情報。
onColumnHeaderEnter?: GridEventListener<GridEvents.columnHeaderEnter>;
列のヘッダ要素からマウスの入力イベントが発生したときに呼び出されるコールバックです。
@param {GridColumnHeaderParams} params
[[GridColumnHeaderParams]]のすべてのプロパティを持つ。
@param {MuiEvent<React.MouseEvent>} event
イベントオブジェクト。
@param {GridCallbackDetails} details
このコールバックの追加情報。
onColumnHeaderLeave?: GridEventListener<GridEvents.columnHeaderLeave>;
列ヘッダ要素からマウス離脱イベントが発生したときに呼び出されるコールバック。
@param {GridColumnHeaderParams} params
[[GridColumnHeaderParams]]のすべてのプロパティを持つ。
@param {MuiEvent<React.MouseEvent>} event
イベントオブジェクト。
@param {GridCallbackDetails} details
このコールバックの追加情報。
onColumnOrderChange?: GridEventListener<GridEvents.columnOrderChange>;
列が並べ替えられたときに起動されるコールバックです。
@param {GridColumnOrderChangeParams} params
[[GridColumnOrderChangeParams]]のすべてのプロパティを持つ。
@param {MuiEvent<{}>} event
イベントオブジェクト。
@param {GridCallbackDetails} details
このコールバックの追加情報。
onColumnVisibilityChange?: GridEventListener<GridEvents.columnVisibilityChange>;
カラムの可視性が変更されたときに実行されるコールバックです。
columnVisibilityModel が提供されておらず、一度に一つのカラムの可視性を変更する場合のみ機能します。
非推奨 代わりにonColumnVisibilityModelChangeを使用する
@param {GridColumnVisibilityChangeParams} params
[[GridColumnVisibilityChangeParams]]のすべてのプロパティを持つ。
@param {MuiEvent<{}>} event
イベントオブジェクト。
@param {GridCallbackDetails} details
このコールバックの追加情報。
onRowClick?: GridEventListener<GridEvents.rowClick>;
行がクリックされたときに実行されるコールバックです。
クリックされた対象がビルトインカラムによって追加されたインタラクティブ要素である場合は、呼び出されない。
@param {GridRowParams} params
[[GridRowParams]]のすべてのプロパティを持つ。
@param {MuiEvent<React.MouseEvent>} event
イベントオブジェクト。
@param {GridCallbackDetails} details
このコールバックの追加情報。
onRowDoubleClick?: GridEventListener<GridEvents.rowDoubleClick>;
行コンテナ要素からダブルクリックイベントが発生したときに呼び出されるコールバック。
@param {GridRowParams} params
[[RowParams]] のすべてのプロパティを持つ。
@param {MuiEvent<React.MouseEvent>} event
イベントオブジェクト。
@param {GridCallbackDetails} details
このコールバックの追加情報。
onResize?: GridEventListener<GridEvents.debouncedResize>;
Callback fired when the grid is resized.
@param {ElementSize} containerSize
[[ElementSize]]のすべてのプロパティを持つ。
@param {MuiEvent<{}>} event
イベントオブジェクト。
@param {GridCallbackDetails} details
このコールバックの追加情報。
onStateChange?: GridEventListener<GridEvents.stateChange>;
グリッドの状態が更新されたときに起動されるコールバックです。
@param {GridState} state
新しい状態。
@param {MuiEvent<{}>} event
イベントオブジェクト。
@param {GridCallbackDetails} details
このコールバックの追加情報。
@internal
page?: number;
現在のページのゼロベースのインデックス。
@default 0
onPageChange?: (page: number, details: GridCallbackDetails) => void;
現在のページが変更されたときに起動されるコールバックです。
@param {number} page
Gridに表示されているページのインデックス。
@param {GridCallbackDetails} details
このコールバックの追加情報。
pageSize?: number;
1ページに表示する行数を設定します。
行の一部に子行がある場合（例えばツリーデータ）、この数値は各ページに欲しいトップレベルの行の量を表します。
@default 100
onPageSizeChange?: (pageSize: number, details: GridCallbackDetails) => void;
Callback fired when the page size has changed.
ページサイズが変更されたときに起動されるコールバック。
Gridに表示されるページの大きさ。
@param {GridCallbackDetails} details
このコールバックの追加情報。
editRowsModel?: GridEditRowsModel;
グリッドの編集行モデルを設定します。
onEditRowsModelChange?: (editRowsModel: GridEditRowsModel, details: GridCallbackDetails) => void;
editRowsModel が変更されたときに呼び出されるコールバックです。
@param {GridEditRowsModel} editRowsModel
[[GridEditRowsModel]]のすべてのプロパティを持つ。
@param {GridCallbackDetails} details
このコールバックの追加情報。
filterModel?: GridFilterModel;
グリッドのフィルターモデルを設定します。
onFilterModelChange?: (model: GridFilterModel, details: GridCallbackDetails) => void;
フィルタが適用される前にフィルタモデルが変更されたときに起動されるコールバックです。
@param {GridFilterModel} model
[[GridFilterModel]]のすべてのプロパティを持つ。
@param {GridCallbackDetails} details
このコールバックの追加情報。
selectionModel?: GridInputSelectionModel;
グリッドの選択モデルを設定します。
onSelectionModelChange?: (selectionModel: GridSelectionModel, details: GridCallbackDetails) => void;
1つまたは複数の行の選択状態が変化したときに呼び出されるコールバック。
@param {GridSelectionModel} selectionModel
[[GridSelectionModel]].のすべてのプロパティを持つ。
@param {GridCallbackDetails} details
このコールバックの追加情報。
columnVisibilityModel?: GridColumnVisibilityModel;
グリッドの列の可視性モデルを設定する。
定義されている場合、グリッドは[[GridColDef]]の hide プロパティを無視します。
onColumnVisibilityModelChange?: (model: GridColumnVisibilityModel, details: GridCallbackDetails) => void;
列の可視性モデルが変更されたときに起動されるコールバックです。
@param {GridColumnVisibilityModel} model
新しいモデルです。
@param {GridCallbackDetails} details
このコールバックの追加情報。
sortModel?: GridSortModel;
グリッドのソートモデルを設定する。
onSortModelChange?: (model: GridSortModel, details: GridCallbackDetails) => void;
カラムがソートされる前にソートモデルが変更されたときに発生するコールバックです。
@param {GridSortModel} model
[[GridSortModel]]のすべてのプロパティを持つ。
@param {GridCallbackDetails} details
このコールバックの追加情報。
'aria-label'?: string;
グリッドのラベル。
'aria-labelledby'?: string;
グリッドのラベルを含む要素の ID。
columns: GridColumns;
[[GridColumns]] 型の列の集合
error?: any;
グリッドをエラー状態にし、エラーコンポーネントを表示するエラー。
getRowId?: GridRowIdGetter;
指定された [[GridRowModel]] のid を返す
loading?: boolean;
true の場合、ローディングオーバーレイが表示されます。
nonce?: string;
[Content Security Policy]用インラインスタイルのNonce
(https://www.w3.org/TR/2016/REC-CSP2-20161215/#script-src-the-nonce-attribute).
rows: GridRowsProp;
[[GridRowsProp]]型の行のセット。
initialState?: GridInitialStateCommunity;
DataGridの初期状態です。
中のデータは初期化時の状態に設定されますが、制御されることはありません。
もし initialState にあるデータのいずれかが制御されている場合、制御状態が優先される。
componentsProps?: GridSlotsComponentsProps;
システムプロップは、システムオーバーライドや追加のCSSスタイルを定義することができます。
sx?: SxProps<Theme>;
The system prop that allows defining system overrides as well as additional CSS styles.
experimentalFeatures?: Partial<GridExperimentalFeatures>;
開発中の機能。
各機能について、フラグが明示的に true に設定されていない場合、その機能は完全に無効になり、どのプロパティ/メソッド呼び出しも何の効果も持ちません。
DataGridProPropsWithoutDefaultValue (有償版のみ）
apiRef?: React.MutableRefObject<GridApiPro>;
グリッド操作を可能にするRefオブジェクトです。
[[useGridApiRef()]]でインスタンス化可能
initialState?: GridInitialStatePro;
DataGridProの初期状態。
中のデータは、初期化時に状態が設定されますが、制御されることはありません。
もし initialState にあるデータのうちの1つでも制御されていれば、制御状態が優先される。
getTreeDataPath?: (row: GridRowModel) => string[];
ツリーデータ内の行のパスを決定する。
例えば、パス["A", "B"]を持つ行は、パス["A"]を持つ行の子である。
すべてのパスには少なくとも1つの要素が含まれていなければならないことに注意してください。
@param {GridRowModel} row
パスを取得したい行。
@returns {string[]}
行のパスです。
onColumnResize?: GridEventListener<GridEvents.columnResize>;
列のサイズ変更中に発生するコールバックです。
@param {GridColumnResizeParams} params
[[GridColumnResizeParams]].のすべてのプロパティを持つ。
@param {MuiEvent<React.MouseEvent>} event
イベントオブジェクト。
@param {GridCallbackDetails} details
このコールバックの追加情報。
onColumnWidthChange?: GridEventListener<GridEvents.columnWidthChange>;
列の幅が変更されたときに起動されるコールバックです。
@param {GridColumnResizeParams} params
[[GridColumnResizeParams]]のすべてのプロパティを持つ。
@param {MuiEvent<React.MouseEvent>} event
イベントオブジェクト。
@param {GridCallbackDetails} details
このコールバックの追加情報。
onRowsScrollEnd?: GridEventListener<GridEvents.rowsScrollEnd>;
グリッドビューポートの最下部までスクロールしたときに発生するコールバックです。
@param {GridRowScrollEndParams} params
[[GridRowScrollEndParams]]のすべてのプロパティを持つ。
@param {MuiEvent<{}>} event
イベントオブジェクト。
@param {GridCallbackDetails} details
このコールバックの追加情報。
pinnedColumns?: GridPinnedColumns;
左または右に固定して表示する列フィールド。
onPinnedColumnsChange?: (pinnedColumns: GridPinnedColumns, details: GridCallbackDetails) => void;
ピン留めされた列が変更されたときに発行されるコールバックです。
@param {GridPinnedColumns} pinnedColumns
変更された固定列。
@param {GridCallbackDetails} details
このコールバックの追加情報。
rowGroupingModel?: GridRowGroupingModel;
グリッドの行グループ化モデルを設定する。
onRowGroupingModelChange?: (model: GridRowGroupingModel, details: GridCallbackDetails) => void;
行のグループ化モデルが変更されたときに発生するコールバック。
@param {GridRowGroupingModel} model
グループ化の基準として使用される列。
@param {GridCallbackDetails} details
このコールバックの追加情報。
groupingColDef?: GridGroupingColDefOverride | ((params: GridGroupingColDefOverrideParams) => GridGroupingColDefOverride | undefined | null);
ツリーデータで使用するグループ化カラム。
detailPanelExpandedRowIds?: GridRowId[];
詳細パネルを表示するための行番号。
onDetailPanelExpandedRowIdsChange?: (ids: GridRowId[], details: GridCallbackDetails) => void;
行の詳細パネルが開かれたり閉じられたりしたときに発生するコールバックです。
@param {GridRowId[]} ids
詳細パネルを開いている行の ID。
@param {GridCallbackDetails} details
このコールバックの追加の詳細。
getDetailPanelContent?: (params: GridRowParams) => React.ReactNode;
行の詳細でレンダリングする要素を返す関数。
@param {GridRowParams} params
[[GridRowParams]]の全てのプロパティを持つ。
@returns {JSX.Element}
行の詳細要素。
Discussion