Material-UI DataGrid Linear Progress Bar in Column Cells

Question

I would like to add a column like Filled Quantity

But I cannot figure out how to do it from the docs, I feel like I have to use renderCell when setting up the column but I can't see how to accomplish it.

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

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

Answer 1

First Customize the linear progress component

const BorderLinearProgress = styled(LinearProgress)(() => ({
  height: "14px",
  width: "88px",
  borderRadius: "7px",
  backgroundColor: " #ebf5fb",
  "& .MuiLinearProgress-bar": {
       backgroundColor: "#1bd900",
       transition: "none",
      transformOrigin: "left",
 },
}));

In DataGrid the Linear progress bar should be displayed along with label,

{
  field: "progress_percentage",
  headerName: "Progress%",
  sortable: true,
  flex: 0.8,
  align: "left",
  //width: 460,
  renderCell: (params) => {
    return (
      <>
        <BorderLinearProgress
          color="success"
          sx={{ color: "#1bd900" }}
          variant="determinate"
          value={params?.row.progress_percentage}
        />
        <Typography
          variant="body2"
          color="text.secondary"
        >{`${params?.row.progress_percentage}%`}</Typography>
      </>
    );
  },
},

Answer 2

You can copy the bar renderer from the demo 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
}

Live Demo