質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

1945閲覧

reactのmaterial-tableが表示できない

roooo

総合スコア57

Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/06/16 23:45

よくある参考ソースのように以下のようにしてみても表示がされないのですが、真っ白で何も表示されません。console.logも表示されず、、、。
ご教授願えないでしょうか?

import React from "react"; import AutoSizer from "react-virtualized-auto-sizer"; import MaterialTable from "material-table"; const Top = () => { const data = [ { itemName: "1チョコレート", category: "お菓子", weight: 100, price: 120, }, { itemName: "ケーキ", category: "お菓子", weight: 400, price: 480 }, { itemName: "りんご", category: "フルーツ", weight: 500, price: 360 }, { itemName: "バナナ", category: "フルーツ", weight: 200, price: 300 }, { itemName: "みかん", category: "フルーツ", weight: 250, price: 180 }, { itemName: "みかん", category: "フルーツ", weight: 250, price: 180 }, { itemName: "みかん", category: "フルーツ", weight: 250, price: 180 }, { itemName: "みかん", category: "フルーツ", weight: 250, price: 180 }, { itemName: "みかん", category: "フルーツ", weight: 250, price: 180 }, { itemName: "みかん", category: "フルーツ", weight: 250, price: 180 }, { itemName: "みかん", category: "フルーツ", weight: 250, price: 180 }, { itemName: "みかん", category: "フルーツ", weight: 250, price: 180 }, { itemName: "みかん", category: "フルーツ", weight: 250, price: 180 }, { itemName: "みかん", category: "フルーツ", weight: 250, price: 180 }, { itemName: "みかん", category: "フルーツ", weight: 250, price: 180 }, ]; const columns = [ { title: "aa商品名", field: "itemName" }, { title: "カテゴリー", field: "category" }, { title: "重量(g)", field: "weight" }, { title: "価格(円)", field: "price" }, ]; return ( <AutoSizer> {({ height, width }) => { console.log(`Height: ${height} | Width: ${width}`); const pageSize = Math.floor((height - 192) / 48); console.log(`Page Size: ${pageSize}`); return ( <div style={{ height: `${height}px`, width: `${width}px`, overflowY: "auto", }} > <MaterialTable columns={columns} data={data} options={{ pageSize: pageSize, pageSizeOptions: [], toolbar: true, paging: true, }} /> </div> ); }} </AutoSizer> ); }; export default Top;

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoshi-takanori

2021/06/17 00:46

<AutoSizer style={{ width: '100vw', height: '100vh' }}> としたら表示されましたが、そんなんでいいのか?
roooo

2021/06/17 01:07

そうです!いけました
guest

回答1

0

自己解決

上記の内容で解決できました、ありがとうございました。

投稿2021/10/04 02:02

roooo

総合スコア57

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問