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

Question

我想添加一个列，例如“填充数量”

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

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

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

Answer 1

您可以从此处的演示复制条形渲染器：

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)} />;
}

用法

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

现场演示