[SOLVED] How do I add a loading spinner to a MUI X DataTable without giving the parent component a fixed height?

How do I add a loading spinner to a MUI X DataTable without giving the parent component a fixed height?

I have a MUI X DataTable, with a definition something like this:

<div style = {{height: 300}}>
    <DataGrid
          loading={true}
          getRowHeight={() => "auto"}
          getEstimatedRowHeight={() => 250}
          rows={rows}
          columns={gridColumns}
          initialState={{
            pagination: {
              paginationModel: { page: 0, pageSize: 50 },
            }
          }}
   />
</div>

If I remove the height: 300, the default loading spinner does not appear. However, I don't want a fixed height, instead, I want the table to be able to grow and shrink based on the amount of rows.

How do I both 1) have the spinner show up and b) allow the table to be a dynamic height? Is it possible to modify the CSS of the spinner somehow?

Solution

After playing a little with the example on MUI it seems the cause is the getEstimatedRowHeight method. When I use a high number like you (200) I have to scroll to see the loader as the table height increases up to nbOfColumns*200px. But if I use a smaller value (40 for example) the data grid is no stretched and the loader is correctly display at the center of the data grid.