英文:
Datagrid - Format total count 100003 to 1M+ in Material UI with Reactjs?
问题
我正在使用ReactJS在Mui中实现DataGrid。我有100万条数据。
目前，我总共显示了100,000条。
是否有显示总数为1M+、1000+或其他缩写方式来展示大数字的方法？
请查看附加的图片以供参考。
提前感谢您。
英文:
I'm implementing Datagrid in Mui with reactjs. I have 1M data.
So I'm currently showing 100000 in total count.
Is there any way to show total count as 1M+ or 1000+ or any other shorthand ways to display a large number?
Please find the attached image for your reference.
Thanks in advance.
答案1
得分: 1
希望这能给你一个清晰的理解。
尝试像这样传递值以表示百万：
value >= 1000000 && Math.abs(Number(在此处输入您的值....)) / 1.0e6).toFixed(1) + " M+"
英文:
Hope this gives you a clarity.
Try passing the value like this for millions
value >= 1000000 && Math.abs(Number(your value here....)) / 1.0e6).toFixed(1) + " M+"
答案2
得分: 0
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: '总计', width: 150, renderCell: formatTotalCount },
];
const rows = [
// 这里放置您的数据行
];
const MyDataGrid = () => {
return (
<div style={{ height: 400, width: '100%' }}>
<DataGrid rows={rows} columns={columns} pageSize={5} />
</div>
);
};
export default MyDataGrid;
英文:
You can do something like this by displaying 1k or 1m accordingly if value it out of range.
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;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论