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

Question

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

这是我的代码：

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

components={{ NoRowsOverlay: customNoRowsOverlay }}

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

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>
    )
  }}
/>

现场演示

Answer 2

如果您只是尝试更改默认的“无行”文本，则可以noRowsLabel使用localeTextprop 覆盖。

\n

<DataGrid\n  {...}\n  localeText={{ noRowsLabel: "This is a custom message\xc2\xa0:)" }}\n/>\n

\n

您可以在这些文档中阅读有关本地化设置的更多信息。

\n