Блог

Я хотел бы добавить столбец, например, Заполненное количество

Но я не могу понять, как это сделать из документов, я чувствую, что мне нужно использовать renderCell при настройке столбца, но я не вижу, как это сделать.

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

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

Вы можете скопировать визуализатор панели из демо-версии здесь:

 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%",
        "amp;.low": {
          backgroundColor: "#f44336"
        },
        "amp;.medium": {
          backgroundColor: "#efbb5aa3"
        },
        "amp;.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 amp;amp; 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
}
 

Живая демонстрация