📑

DataGrid

2023/01/23に公開約800字

そもそも、、、

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
	  }} ※ツールの変更、言語変更も可能
	  >

Discussion

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