material-uiのDataGridが無限に伸びる時の対処

Material UIのData Gridを試してみたところ下記のようにコンポーネントを配置したさい、無限に伸びる現象に遭遇した。

<div>
  <div>some title</div>
  <DataGrid
    pageSize={5}
    columns={columns}
    rows={rows} />
</div>

解決策

もしかしてデータが再更新されてるのか？などを考えuseMemoを使ってみたりするもダメ。

そこでExampleとにらめっこしてみると、どうやら親を<div style={{ height: 400, width: "100%" }}>と囲っているらしいことがわかった。

<div style={{ height: 400, width: "100%" }}>
  <DataGrid
    pageSize={5}
    columns={columns}
    rows={rows} />
</div>

確かにこれでInfinity loopは収まった。しかしいちいちheightを指定しないといけないとはどうにかならんか？とAPIの方を見てみるとauthHeightという項目があるのがわかった

<DataGrid
  autoHeight
  pageSize={5}
  columns={columns}
  rows={rows} />

これでも無限延長が収まることがわかった。

ただしAuto Heightの項目を見ると非表示領域を隠すVirtualizationしないので大規模なデータには向いてない、とのこと。