如何在React材料表中使用千分隔符(例如412335而不是412335)格式化数字单元格

Question

在物料表上，columns的属性type可以是

数据类型："boolean"、"numeric"、"date"、"datetime"、"time"one_answers"currency">

我尝试过numeric，但它没有用逗号格式化大数字。例如，我需要将其格式化为"412335"，而不是"412335"。currency类型确实添加了逗号。

我知道我可以定义自定义单元格，但我希望避免自定义，因为它们是一个维护问题。

我也看到了自定义列渲染作为一种可能的解决方案，但我的单元格应该是可编辑的，所以当用户编辑单元格时，我更喜欢去掉逗号。我正在寻找一种在显示级别运行的解决方案。我的意思是，当它显示值"412335"时，它应该用逗号将其显示为"412335"，但它不应该影响基础值。

最后，我想要一个考虑本地化的解决方案，因为我们的一些用户可能所在的国家不使用逗号作为千位分隔符。

Answer 1

如果不想定义自定义单元格，则必须在将值传递到数据表之前更改该值。无论是否使用自定义单元格，都可以使用toLocaleStringnumber.toLocaleString([locale [, options ]])将数字转换为本地化字符串。

如果你想把它变成一个没有逗号或其他分隔符的数字进行排序或编辑，你可以使用parseFloat(number)

Answer 2

在其他人面临同样问题时回答。自定义列渲染将是解决这个问题的方法。

编辑值时，"材质表"在编辑时使用列的field值，而不是render输出。

let columns = [
{
title: "amount",
field: "amount",
render: (expense) => expense.amount.toLocaleString(),
},
];
<MaterialTable title="Expenses" columns={columns} />;