📑

DataGrid

2023/01/24に公開

6件

muix

tech

そもそも、、、

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

jonchon 2023/04/04に更新

Checkboxを付ける

checkについてカスタマイズする

jonchon 2023/04/04

現在表示しているページだけを一括選択することもできる
（デフォルトではガチ全部の行が選択される）

jonchon 2023/04/05に更新

node_modules@mui\x-data-grid\models\props\DataGridProps.d.ts

    /**
     * Set the selection model of the grid.
     */
    selectionModel?: GridInputSelectionModel;

selectionModelに配列を渡すことで、テーブル外の場所から選択を操作することができる
空の配列を渡せば、選択は全て解除される
→適切なデータ型で配列を作って渡せば、強制的に選択させることもできる？

      <DataGrid
        selectionModel={selectionModels}

↑例えば、selectionModelsをuseStateにして値を動かせるようにしておき、
あるボタンを押したときに setSelectionModels([]) をするように実装すれば、
そのボタンが一括解除ボタンになる

jonchon 2023/04/10に更新

表に値を渡すとき

1つ下の階層にあるデータを表示させたいときは、
paramで受け取ってそこから取り出して、returnで返す
また、取り出した値によって表示させる値を変えるときは、演算処理を行うこともできる

※returnを記述し忘れないこと！！！


  valueGetter(params) {
        return params.row.item_name
      },


  valueGetter(params) {
        return params.row.item_name === 'aaa' ? '〇' : '×'
      },

jonchon 2023/06/22に更新

レコードが無い場合の表示をカスタマイズする


  // * レコードが無い場合の表示内容（何も表示したくない場合はnullを返す）
  const CustomNoRowsOverlay = () => {
    return <Box>表示するものが無いよ（泣）</Box>
  }

return (
      <DataGrid
        components={{ NoRowsOverlay: CustomNoRowsOverlay }}
      />
)

※必須項目も省略しています。

参考資料
・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

jonchon 6ヶ月前

列を表示しない

hide　に　booleanを渡す