Material-UIの「Data Grid」で高さを自動設定する

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;

自動で高さを設定する

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

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

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

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