为 MUI 数据网格提供标题

Question

我正在学习如何使用 MUI Data Grid React 组件（MIT 许可版本）。

是否可以向数据网格添加标题？在列标题上方但在数据网格边框下方的一些简单的居中文本就很好了，不过在标题中包含自定义组件将是理想的选择。

有内置的方法可以做到这一点吗？

编辑：这是我正在尝试做的一个例子。在此屏幕截图中，我通过将 DataGrid 包装在 div 中并为该 div 提供边框，然后删除 DataGrid 边框来完成此操作。

是否有某种方法可以使用数据网格界面本地执行此操作？

Answer 1

解决了！构建数据网格时，您可以使用

components

属性，它接受

ToolBar

组件。

<DataGrid
    {...}
    components={{Toolbar: DataGridTitle}}
/>

其中

DataGridTitle

是您自己的组件，可以在其中包含标题。在这种情况下，我使用：

function DataGridTitle() {
        return(
            <Box style={{width: "100%", display: "flex", justifyContent: "center", alignItems: "center"}}>
                <Typography variant="h5">Users</Typography>
            </Box>
        )
    }

而且效果完美：

Answer 2

MUI 5.x 更新：

该道具已更改为

slots

，它允许覆盖表格的许多部分。工具栏指定为

  slots={{
    toolbar: DataGridTitle
  }}

参见https://mui.com/x/api/data-grid/data-grid/