📑

DataGrid

2023/01/24に公開
6

そもそも、、、

mui X に属している

(mui X とは:より複雑で高度なコンポーネント群。有料部分を含む。)
https://zenn.dev/yumemi_inc/articles/2021-09-26-material-ui-v5#mui-x

高速で拡張性の高いリアクトデータテーブルとリアクトデータグリッドです。
機能豊富なコンポーネントで、MIT版と商用版があります。

  • MIT版
    きれいな抽象化でTableデモを簡素化することを目的としています。この抽象化はまた、コンポーネントが新しい機能を実装することを可能にする制約を設定しました。

  • 製品版
    製品版は、2つのプランで提供されます。ProとPremiumです。

  • Proプラン
    Proバージョンは、MITバージョンで利用可能な機能を拡張し、複数のカラムを同時にソートおよびフィルタリングできるようになりました。また、列グループ、列のピン留め、ツリーデータ、行と列の並べ替えなどの新機能も搭載しています。最後に、Pro 版では仮想化を活用してより大きなデータセットを扱えるようになりました。以下のグリッドは、31列、10万行、合計300万以上のセルを表示しています。

使い方

https://zenn.dev/longbridge/articles/1ea4c93702fdfc

<DataGrid 
	  票のヘッダー部分のデータ colums={配列}
	  各行のデータ rows={配列}
	  行の高さ density='standard' standard:標準, compact:狭め, comfortable:広め
	  DataGrid全体の高さ(自動調整) autoHeight
	  全体のヘッダーにツールバーを表示する components={{
		  Toolber : GridToolber
	  }} ※ツールの変更、言語変更も可能
	  >

参考資料

https://www.ibm.com/docs/ja/wxs/8.6.1?topic=api-datagrid-apis-partitioning

https://blog.giftee.dev/2022-06-06-mui-data-grid/

https://qiita.com/Engineer_Grotle/items/33bf5f3efa3e9981e5e4

Discussion

jonchonjonchon

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

https://zenn.dev/longbridge/articles/839d619ea1968d#checkboxselectionvisibleonly%3A-boolean%3B

jonchonjonchon

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([]) をするように実装すれば、
そのボタンが一括解除ボタンになる

jonchonjonchon

表に値を渡すとき

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

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


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


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



jonchonjonchon

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


  // * レコードが無い場合の表示内容(何も表示したくない場合は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

ログインするとコメントできます