reactjs - 在 MUI DataGrid 中应用过滤器后显示“无行”消息

Question

NoRowsOverlay应用过滤器后不起作用，因此没有/没有要显示的行。

这是我的代码：

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

components={{ NoRowsOverlay: customNoRowsOverlay }}

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

标签： reactjsmaterial-ui

Answer 1

NoRowsOverlay如果您使用的是@v4.0.0-alpha.18 或更高版本，请使用插槽名称。

如果您想在 中没有行时显示覆盖，您可以根据您的用例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>
    )
  }}
/>

现场演示