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} .>

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.


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


<div className="App">
   your stuff

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

  return (
      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.