reactjs - 在 MUI DataGrid 中应用过滤器后显示 'No Rows' 消息

Question

NoRowsOverlay 应用过滤器后不起作用，因此没有/没有要显示的行。
这是我的代码:

function customNoRowsOverlay() {
    return (
        <GridOverlay>
            <div>No Rows</div>
        </GridOverlay>
    )
}

components={{ NoRowsOverlay: customNoRowsOverlay }}

如果在应用过滤器后没有要显示的行，我需要显示“无行”消息。但是，如果您有 rows={[]}，则上述代码有效

Answer 1

使用 NoRowsOverlay如果您使用的是版本 @v4.0.0-alpha.18 or above，请输入插槽名称.
如果要在 DataGrid 中没有行时显示叠加层，您可以覆盖 NoRowsOverlay 或 NoResultsOverlay插槽取决于您的用例:

NoRowsOverlay : 当没有行传递给 DataGrid 时显示( rows={[]} )。

NoResultsOverlay : DataGrid中有行数据时显示，但本地过滤器不返回任何结果。

<DataGrid
  {...}
  components={{
    NoRowsOverlay: () => (
      <Stack height="100%" alignItems="center" justifyContent="center">
        No rows in DataGrid
      </Stack>
    ),
    NoResultsOverlay: () => (
      <Stack height="100%" alignItems="center" justifyContent="center">
        Local filter returns no result
      </Stack>
    )
  }}
/>

现场演示