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

Question

よくある参考ソースのように以下のようにしてみても表示がされないのですが、真っ白で何も表示されません。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;

Comments

[hoshi-takanori]

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

[roooo]

そうです！いけました

Answer 1

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