Material-UIの「Data Grid」で表の高さを自動調整する方法です。

CSSのheightを指定しなくても自動でいい感じの高さに設定してくれます。

通常の設定方法

Material-UIのページ等にあるサンプルソースは下記のようにStyle(CSS)のheightで高さを指定しいます。

しかしこれだと行の数や文字の大きさ等でうまく収まらなかったり、余白が空いたりしてしまいます。

const DataGridTest = () => {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        columns={columns}
        rows={rows}
      />
    </div>
  );
}
export default DataGridTest;
Material-UIのDataGridで高さを設定1

自動で高さを設定する

この高さをheightを指定せずに自動で設定するオプションが下記になります。

const DataGridTest = () => {
  return (
    <div style={{ width: '100%' }}>
      <DataGrid
        autoHeight
        columns={columns}
        rows={rows}
      />
    </div>
  );
}
export default DataGridTest;

「autoHeight」オプションを指定すると自動で高さを調整してくれます。

このオプションでいい感じに高さを自動で設定してくれます。

Material-UIのDataGridで高さを設定2