列型数据杂志线性进度栏列列 我想添加一个像填充数量之类的列 但是我无法弄清楚如何从文档中做到这一点，我觉得我在设置列时必须使用RenderCell，但我看不到如何完成...

Question

但是我无法弄清楚如何从文档中做到这一点，我觉得我在设置列时必须使用

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%",
        "&.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)} />;
}

Answer 1

usage

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

livedemo

第一个自定义线性进度组件

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

在datagrid中，线性进度栏应与标签一起显示，

Answer 2

MUI v6的UPDATE。 该方法已经过测试并效果很好。 资料来源：

Https：//github.com/mui/mui-x/blob/master/packages/x-data-grid-generator/src/renderer/renderprogress.tsx

首先创建条样式

import * as React from 'react';
import theme from '@/theme';
import clsx from 'clsx';
import { DataGrid, GridRowParams, GridRenderCellParams } from '@mui/x-data-grid';
import { styled } from '@mui/material/styles';

interface ProgressBarProps {
  value: number;
}

const Center = styled('div')({
  height: '100%',
  display: 'flex',
  alignItems: 'center',
});

const Element = styled('div')(({ theme }) => ({
  border: `1px solid ${(theme.vars || theme).palette.divider}`,
  position: 'relative',
  overflow: 'hidden',
  width: '100%',
  height: 26,
  borderRadius: 2,
}));

const Value = styled('div')({
  position: 'absolute',
  lineHeight: '24px',
  width: '100%',
  display: 'flex',
  justifyContent: 'center',
});

const Bar = styled('div')({
  height: '100%',
  '&.low': {
    backgroundColor: '#f44336',
  },
  '&.medium': {
    backgroundColor: '#efbb5aa3',
  },
  '&.high': {
    backgroundColor: '#088208a3',
  },
});

const ProgressBar = React.memo(function ProgressBar(props: ProgressBarProps) {
  const { value } = props;
  const valueInPercent = value;

  return (
    <Element>
      <Value>{`${valueInPercent.toLocaleString()} %`}</Value>
      <Bar
        className={clsx({
          low: valueInPercent < 30,
          medium: valueInPercent >= 30 && valueInPercent <= 70,
          high: valueInPercent > 70,
        })}
        style={{ maxWidth: `${valueInPercent}%` }}
      />
    </Element>
  );
});

Answer 3

然后创建要映射在列上的函数

function renderProgress(params: GridRenderCellParams<any, number, any>) {
  if (params.value == null) {
    return '';
  }

  // If the aggregated value does not have the same unit as the other cell
  // Then we fall back to the default rendering based on `valueGetter` instead of rendering a progress bar.
  if (params.aggregation && !params.aggregation.hasCellUnit) {
    return null;
  }

  return (
    <Center>
      <ProgressBar value={params.value} />
    </Center>
  );
}

lastly您的列可以调用renderProgress函数。

const columns = [
  {
    field: 'value',
    headerName: 'Value',
    minWidth: 80,
    renderCell: renderProgress
  }
]