React(TypeScript)结合MUI v5 Pro开发垂直步进器+数据网格组件求助

核心方向 #

• 基于MUI v5的VerticalStepper组件，将每个数据分组对应一个步进步骤，步骤内容嵌入DataGridPro完成可视化
• 禁用步进器的所有交互逻辑，通过配置和样式强制所有步骤保持展开状态
• 先按业务维度完成原始数据的分组处理，每组数据对应一个步进步骤的Datagrid

分步实现 #

1. 数据分组：按照指定维度（如类别、日期）拆分原始数据，得到分组后的数据集
2. 步进器全展开配置：
   • 设置activeStep为分组总数减1，确保默认展开所有步骤内容
   • 禁用步骤按钮的点击交互，隐藏不必要的导航按钮
   • 可选：通过CSS强制StepContent始终显示，避免状态变化导致内容隐藏
3. 嵌入Datagrid：每个StepContent中放置DataGridPro，传入对应分组的数据和列定义，禁用不必要的交互功能

完整TypeScript代码示例 #

import { VerticalStepper, Step, StepLabel, StepContent, Paper, Typography } from '@mui/material';
import { DataGridPro, GridColDef } from '@mui/x-data-grid-pro';

// 定义数据类型
interface RowData {
  id: number;
  name: string;
  category: string;
  value: number;
}

const StepperWithDatagrid = () => {
  // 示例原始数据
  const rawData: RowData[] = [
    { id: 1, name: 'Item A', category: 'Group 1', value: 100 },
    { id: 2, name: 'Item B', category: 'Group 1', value: 200 },
    { id: 3, name: 'Item C', category: 'Group 2', value: 150 },
    { id: 4, name: 'Item D', category: 'Group 2', value: 300 },
    { id: 5, name: 'Item E', category: 'Group 3', value: 250 },
  ];

  // 按category分组数据
  const groupedData = Object.entries(
    rawData.reduce((acc, item) => {
      acc[item.category] = [...(acc[item.category] || []), item];
      return acc;
    }, {} as Record<string, RowData[]>)
  );

  // Datagrid列定义
  const columns: GridColDef[] = [
    { field: 'name', headerName: '名称', width: 180 },
    { field: 'value', headerName: '数值', type: 'number', width: 120 },
  ];

  return (
    <VerticalStepper
      activeStep={groupedData.length - 1}
      orientation="vertical"
      sx={{
        // 禁用步骤点击交互
        '& .MuiStepButton-root': { pointerEvents: 'none', cursor: 'default' },
        // 确保连接线始终显示
        '& .MuiStepConnector-root': { visibility: 'visible' },
        // 隐藏默认的导航按钮
        '& .MuiStepper-root > .MuiBox-root': { display: 'none' },
      }}
    >
      {groupedData.map(([groupName, rows], index) => (
        <Step key={`step-${index}`}>
          <StepLabel>{groupName}</StepLabel>
          <StepContent>
            <Paper sx={{ p: 3, mt: 2, mb: 1 }}>
              <Typography variant="subtitle1" gutterBottom fontWeight="medium">
                分组：{groupName}（共{rows.length}条数据）
              </Typography>
              <div style={{ height: 320, width: '100%' }}>
                <DataGridPro
                  rows={rows}
                  columns={columns}
                  disableRowSelectionOnClick
                  disableColumnMenu
                  pagination={false}
                  disableSorting
                />
              </div>
            </Paper>
          </StepContent>
        </Step>
      ))}
    </VerticalStepper>
  );
};

export default StepperWithDatagrid;

关键细节说明 #

• 全展开保障：如果设置activeStep后仍有内容隐藏，可添加全局CSS强制展开：

  .MuiStepContent-root {
    display: block !important;
  }
  

• Datagrid优化：根据可视化需求，可禁用排序、过滤、分页等交互项；如需调整布局，可修改列的width或使用flex配置实现自适应
• 数据分组扩展：实际项目中可使用lodash.groupBy等工具函数简化分组逻辑，或直接使用后端返回的分组结构

内容的提问来源于stack exchange，提问作者Thorvald Jørgensen