如何在不给父组件指定固定高度的情况下向 MaterialUI DataTable 添加加载微调器？

Question

我有一个 MaterialUI DataTable，其定义如下：

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

如果我删除

height: 300

，则不会出现默认加载微调器。但是，我不想要固定的高度，而是希望表格能够根据行数增大和缩小。

我如何 1) 显示旋转器并 b) 允许桌子具有动态高度？是否可以以某种方式修改微调器的 CSS？

Answer 1

在 MUI 上玩了一下示例后，似乎原因是

getEstimatedRowHeight

方法。当我使用像你这样的高数字（200）时，我必须滚动才能看到加载器，因为桌子高度增加到

nbOfColumns*200px

。但如果我使用较小的值（例如 40），数据网格不会拉伸，并且加载器会正确显示在数据网格的中心。