Datagrid - 使用 Reactjs 将 Material UI 中的总计数 100003 格式化为 1M+？

Question

我正在使用 Reactjs 在 Mui 中实现 Datagrid。我有1M数据。 所以我目前显示的总数为 100000。

有没有办法将总计数显示为 1M+ 或 1000+ 或任何其他速记方式来显示大数字？

请查找附图供您参考。

提前致谢。

Answer 1

希望这能让您清楚。 尝试将这样的值传递给数百万

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

Answer 2

如果值超出范围，您可以通过相应地显示

1k

或

1m

来执行类似操作。

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;