如何在MUI X DataGrid列单元格中实现Filled Quantity类线性进度条效果

你推测的方向是对的，这类自定义样式的列直接通过列配置中的renderCell属性自定义单元格渲染内容即可实现，以下是可直接复用的实现方案：

实现代码 #

首先在你的列配置数组中新增对应列，核心逻辑是在renderCell中返回「进度条背景 + 上层数值」的结构：

const columns = [
  // 你的其他原有列配置保持不变
  {
    field: 'filledQuantity', // 替换为你自己数据源对应的字段名
    headerName: 'Filled Quantity',
    width: 180,
    sortable: true, // 按需开启排序、过滤能力，和普通列配置一致
    renderCell: (params) => {
      // 进度最大值可自定义，若为每行动态总数量可从当前行取：const maxValue = params.row.totalQuantity
      const maxValue = 100;
      const currentValue = params.value ?? 0;
      const fillPercent = Math.min((currentValue / maxValue) * 100, 100);

      return (
        <div style={{ width: '100%', height: '100%', position: 'relative', display: 'flex', alignItems: 'center', paddingInline: 8 }}>
          {/* 填充进度条背景 */}
          <div 
            style={{
              position: 'absolute',
              left: 0,
              top: 0,
              height: '100%',
              width: `${fillPercent}%`,
              backgroundColor: 'rgba(25, 118, 210, 0.15)', // 可自行替换为你需要的颜色
            }}
          />
          {/* 顶层数值文本 */}
          <span style={{ position: 'relative', zIndex: 1 }}>
            {currentValue}
          </span>
        </div>
      );
    }
  }
]

可调整参数说明 #

• 最大值逻辑：如果你的填充比例是基于每行的总数量计算，把maxValue替换为params.row.你对应的总数字段名即可
• 样式调整：进度条的颜色、透明度、圆角都可以直接修改style参数实现，也可以结合MUI主题变量取色
• 显示内容：如果需要展示百分比格式，直接把{currentValue}替换为{Math.round(fillPercent)}%即可
• 阈值变色：如果需要根据填充比例切换背景色，计算完fillPercent后加判断逻辑修改backgroundColor即可

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