如何为MUI X Data Grid表格添加通用标题？

你可以通过自定义Toolbar组件实现这个需求，核心思路是替换默认的toolbar插槽，在自定义组件里同时放置标题和原工具栏的功能按钮。直接上代码：

1. 导入依赖 #

import { DataGrid, GridToolbar } from '@mui/x-data-grid';
import { Box, Typography } from '@mui/material';

2. 创建自定义Toolbar组件 #

const CustomGridToolbar = () => {
  return (
    <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
      {/* 通用标题，可自行修改文字和样式 */}
      <Typography variant="h6" fontWeight="bold">
        你的表格标题
      </Typography>
      {/* 保留原Toolbar的所有功能按钮 */}
      <GridToolbar />
    </Box>
  );
};

3. 在DataGrid中使用自定义Toolbar #

<DataGrid
  rows={yourRowsData}
  columns={yourColumnsData}
  slots={{ toolbar: CustomGridToolbar }}
  // 其他表格配置项...
/>

补充说明 #

• 用Box的flex布局实现标题左对齐、原工具栏按钮右对齐，你可以根据需求调整sx里的样式（比如间距、字体大小）。
• 如果不需要原工具栏的某些按钮，可在GridToolbar里通过componentsProps禁用，比如隐藏导出按钮：

<GridToolbar
  componentsProps={{
    csvExportButton: { disabled: true },
    printExportButton: { disabled: true }
  }}
/>

内容的提问来源于stack exchange，提问作者Anders Boyum