📑
DataGrid
そもそも、、、
mui X に属している
(mui X とは:より複雑で高度なコンポーネント群。有料部分を含む。)
高速で拡張性の高いリアクトデータテーブルとリアクトデータグリッドです。
機能豊富なコンポーネントで、MIT版と商用版があります。
-
MIT版
きれいな抽象化でTableデモを簡素化することを目的としています。この抽象化はまた、コンポーネントが新しい機能を実装することを可能にする制約を設定しました。 -
製品版
製品版は、2つのプランで提供されます。ProとPremiumです。 -
Proプラン
Proバージョンは、MITバージョンで利用可能な機能を拡張し、複数のカラムを同時にソートおよびフィルタリングできるようになりました。また、列グループ、列のピン留め、ツリーデータ、行と列の並べ替えなどの新機能も搭載しています。最後に、Pro 版では仮想化を活用してより大きなデータセットを扱えるようになりました。以下のグリッドは、31列、10万行、合計300万以上のセルを表示しています。
使い方
<DataGrid
票のヘッダー部分のデータ colums={配列}
各行のデータ rows={配列}
行の高さ density='standard' standard:標準, compact:狭め, comfortable:広め
DataGrid全体の高さ(自動調整) autoHeight
全体のヘッダーにツールバーを表示する components={{
Toolber : GridToolber
}} ※ツールの変更、言語変更も可能
onCellKeyDown={(params, events) => events.stopPropagation()} // 入力欄内でspaceキーを使用できるようにする
>
- colums の rendercell に inputField を設定した場合、その inputField ではspaceキーが使用できなくなる(文字設定が半角英数字の場合のみ?)
→ onCellKeyDownを設定することで、spaceキーを作動させられるようになる
参考資料
DataGrid内で使用するspaceキーについて
Discussion
Checkboxを付ける
checkについてカスタマイズする
現在表示しているページだけを一括選択することもできる
(デフォルトではガチ全部の行が選択される)
node_modules@mui\x-data-grid\models\props\DataGridProps.d.ts
selectionModelに配列を渡すことで、テーブル外の場所から選択を操作することができる
空の配列を渡せば、選択は全て解除される
→適切なデータ型で配列を作って渡せば、強制的に選択させることもできる?
↑例えば、selectionModelsをuseStateにして値を動かせるようにしておき、
あるボタンを押したときに setSelectionModels([]) をするように実装すれば、
そのボタンが一括解除ボタンになる
表に値を渡すとき
1つ下の階層にあるデータを表示させたいときは、
paramで受け取ってそこから取り出して、returnで返す
また、取り出した値によって表示させる値を変えるときは、演算処理を行うこともできる
※returnを記述し忘れないこと!!!
レコードが無い場合の表示をカスタマイズする
※必須項目も省略しています。
参考資料
・https://zenn.dev/longbridge/articles/1ea4c93702fdfc#日本語化ファイルをコピー
・https://mui.com/x/react-data-grid/components/#no-rows-overlay
・https://codesandbox.io/s/y68gsz?file=/demo.tsx:994-1011
・https://stackoverflow.com/questions/66783261/display-no-rows-message-after-applying-filter-in-mui-datagrid
・https://codesandbox.io/s/66783261-not-able-to-display-no-rows-message-after-applying-filter-in-react-material-ui-uduhv?file=/demo.js:1693-1700
列を表示しない
hide に booleanを渡す
MuiDataGrid-cell セル内容の要素に対する指定ができる
参考:https://mui.com/x/api/data-grid/data-grid/