列单元格中的 Material-UI DataGrid 线性进度条答案

【问题标题】：Material-UI DataGrid Linear Progress Bar in Column Cells列单元格中的 Material-UI DataGrid 线性进度条
【发布时间】：2021-10-06 14:02:22
【问题描述】：

我想添加一个像 Filled Quantity 这样的列

但我无法从文档中弄清楚如何做到这一点，我觉得在设置列时我必须使用 renderCell 但我看不到如何完成它。

https://mui.com/components/data-grid/demo/

https://mui.com/components/data-grid/columns/

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

您可以从演示中复制条形渲染器here：

const defaultTheme = createTheme();
const useStyles = makeStyles(
  (theme) =>
    createStyles({
      root: {
        border: `1px solid ${theme.palette.divider}`,
        position: "relative",
        overflow: "hidden",
        width: "100%",
        height: 26,
        borderRadius: 2
      },
      value: {
        position: "absolute",
        lineHeight: "24px",
        width: "100%",
        display: "flex",
        justifyContent: "center"
      },
      bar: {
        height: "100%",
        "&.low": {
          backgroundColor: "#f44336"
        },
        "&.medium": {
          backgroundColor: "#efbb5aa3"
        },
        "&.high": {
          backgroundColor: "#088208a3"
        }
      }
    }),
  { defaultTheme }
);

const ProgressBar = React.memo(function ProgressBar(props) {
  const { value } = props;
  const valueInPercent = value * 100;
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <div
        className={classes.value}
      >{`${valueInPercent.toLocaleString()} %`}</div>
      <div
        className={clsx(classes.bar, {
          low: valueInPercent < 30,
          medium: valueInPercent >= 30 && valueInPercent <= 70,
          high: valueInPercent > 70
        })}
        style={{ maxWidth: `${valueInPercent}%` }}
      />
    </div>
  );
});
export function renderProgress(params) {
  return <ProgressBar value={Number(params.value)} />;
}

Usage

{
  field: "filledQuantity",
  headerName: "Filled Quantity",
  renderCell: renderProgress,
  type: "number",
  width: 120
}

现场演示

【讨论】：

这太棒了！但不幸的是，我没有使用 typescript，你有 javascript 版本吗？
@ecruncher 如果您不想要它们，只需删除类型即可。你有什么具体问题吗？我已将答案调整为使用 JS。
你太棒了，感谢您的快速帮助！