Mui data table - May 2022

Mui Data table

As ever, some notes and memory joggers.

To get it to resize to full hight, you should do this:

(note its typescript and react…)

<Box sx={ { display='flex', flexDirection:'column', height='100%'} }>
  <div style={ { flexGrow:1, width='100%'} }>
    <DataGrid rowHeight={25} rows={rows} columns={columns} .>
  </div>
</Box>

Also, everything above it must have height=100%, eg

Note to get the react root to be correct you also need the div#root css below.

app.css

html,body {
  height: 100%;
}
.App {
  height:100%;
}
div#root {
  height: 100%;
}

and

<div className="App">
   your stuff
</div>

I had the data grid inside a Mui tab, so even there I needed:

  return (
    <div
      role="tabpanel"
      ...
      style={ {height:'100%'} }
      ...
    );

And to make it fit the page, I sadly found no way other than to have a Box of height:’85%’ to allow for the table header and navigation.