Reactでテーブル表示にMaterial-Tableを使うときのメモ

サーバから取得したデータを表形式で表示することが多いので、テーブル関連を探していたら、Mateial-UIの拡張として、Material-Tableなるものがあったのでとりあえずメモ。

Material-UIがインストールされていることが前提。

[ドキュメント]

 　　https://material-table.com/#/

[インストール]　

　　$npm install --save material-table

[ソース内での書き方]

1. とにもかくにもインポート


   import MaterialTable from 'material-table';

   
   
2.  JSXの中での記述
   MaterialTableのタグに属性値としてtittle,columns,dataなどを渡す。
   プロパティはここを参照
   <MaterialTable
           title={"Material-tableテスト"}
           columns={[
             { title: 'カラム1', field: 'col1' },
             { title: 'カラム2', field: 'col2' }
           ]}
           data={[
             
             { col1: 'データ１', col2: 'データ３' },
             { col1: 'データ２', col2: 'データ４' }
           ]}
           options={{
             showTitle: true,
           }}
         />