next.js Datagrid -使用Reactjs在Material UI中将总计数从100003格式化为1 M +

z31licg0  于 2023-08-04  发布在  React
关注(0)|答案(2)|浏览(78)

我正在用reactjs在Mui中实现Datagrid。我有1M数据。所以我现在显示的总数是100000。
是否有任何方法显示总计数为1M+或1000+或任何其他速记方式来显示一个大的数字?
请找到所附的图像供您参考。


的数据
先谢了。

hi3rlvi2

hi3rlvi21#

我希望这能给你一个清晰。试着像这样传递百万的值

value >= 1000000 && Math.abs(Number(your value here....)) / 1.0e6).toFixed(1) + " M+"

字符串

3mpgtkmj

3mpgtkmj2#

如果值超出范围,可以相应地显示1k1m来执行类似的操作。

const formatTotalCount = (params) => {
  const totalCount = params.value;
  if (totalCount >= 1000000) {
    return `${(totalCount / 1000000).toFixed(1)}M+`;
  } else if (totalCount >= 1000) {
    return `${(totalCount / 1000).toFixed(1)}K+`;
  } else {
    return totalCount.toString();
  }
};

const columns = [
  { field: 'totalCount', headerName: 'Total Count', width: 150, renderCell: formatTotalCount },
];

const rows = [
  // Your data rows here
];

const MyDataGrid = () => {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid rows={rows} columns={columns} pageSize={5} />
    </div>
  );
};

export default MyDataGrid;

字符串

相关问题