3

On a Material-Table, the columns have a property type which can be

Data type: 'boolean', 'numeric', 'date', 'datetime', 'time', 'currency'

I tried numeric but it didn't format large numbers with commas. For example, instead of "412335" I need to format it as "412,335". The currency type does add commas.

I know I can define a custom cell, but I'd like to avoid customizations because they're a maintenance problem.

I've also seen Custom Column Rendering as a possible solution, but my cells are supposed to be editable so when the user edits the cell, I'd prefer the commas to go away. I'm looking for a solution that operates at the display level. I mean, when it displays the value "412335" it should display it with commas as "412,335" but it should not affect the underlying value.

Lastly, I'd like a solution which takes localization into account because some of our users might be in countries that don't use commas as a thousands separator.

Michael Osofsky
  • 11,429
  • 16
  • 68
  • 113

2 Answers2

3

If you don't want to define a custom cell then you're going to have to change the value before passing it into the data table. Whether you use a custom cell or not, you can use toLocaleString number.toLocaleString([locale [, options ]]) to convert your number to a localized string.

If you want to turn that back into a number without commas or other separators for sorting or editing, you can use parseFloat(number)

David Pellegrini
  • 131
  • 1
  • 4
1

Answering in case someone else faces the same problem. Custom Column Rendering would be the way to solve that.

When editing values, Material Table uses the field value of the column when editing, not the render output.

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

<MaterialTable title="Expenses" columns={columns} />;
Antonio Mande
  • 101
  • 4