Is there a way to remove currency prefix from material-table react?

Question

Is there any way to remove the currency prefix from react's material-table since I am using different currencies on the table, it becomes confusing to stick to just one prefix as I have a different column to display the type of currency

Any help would be appreciated, thanks

Here is a chunk of the source code for creating the table, I am getting the data from an API endpoint

<MaterialTable style={{marginLeft:'10px', marginRight:'10px'}}
      title="INVOICES"
      columns={[
        { title: 'Seller Name', field: 'seller' },
        { title: 'Buyer Name', field: 'buyer' },
        { title: 'Invoice No', field: 'invoice_number' },
        { title: 'Currency', field: 'currency' },
        { title: 'Amount', field: 'invoice_amount', type:'currency', currencySetting:{ currencyCode:'USD', minimumFractionDigits:0, maximumFractionDigits:2}},
        { title: 'Invoice Date', field: 'invoice_date' },
        { title: 'Eligible Date', field: 'date_eligible' },
        { title: 'Due Date', field: 'due_date' },
        { title: 'Status', field: 'status' },
      ]}
      data={this.state.stats}

Please show how you're using it e.g. how you're rendering your currency cell when posting a question — Dominic, Jun 08 '20 at 08:25
Did you try to change the setting in this row? ```{ title: 'Amount', field: 'invoice_amount', type:'currency', currencySetting:{ currencyCode:'USD', minimumFractionDigits:0, maximumFractionDigits:2}},``` — Peter Ambruzs, Jun 08 '20 at 09:31
yeah, changed the currencyCode to an empty string, the code breaks, I also tried to omit the currencyCode altogether but the default prefix is in dollars. — Adwera, Jun 08 '20 at 09:52

Peter Ambruzs · Accepted Answer · 2020-11-22T06:23:11.333

I'm not using material-table, but I played a little with it. This is the the source code of material-table where the error has created:

Intl.NumberFormat(currencySetting.locale !== undefined ? currencySetting.locale : 'en-US', {
          style: 'currency',
          currency: currencySetting.currencyCode !== undefined ? currencySetting.currencyCode : 'USD',
          minimumFractionDigits: currencySetting.minimumFractionDigits !== undefined ? currencySetting.minimumFractionDigits : 2,
          maximumFractionDigits: currencySetting.maximumFractionDigits !== undefined ? currencySetting.maximumFractionDigits : 2
        }).format(value !== undefined ? value : 0);

It uses the Intl.NumberFormat standard Javascript function to format the currency. This function supports 47 country. You can play with this function here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat

For example for Hungary (my country) I can call it with:

new Intl.NumberFormat('hu', { style: 'currency', currency: 'huf' }).format(number);

So I should change the columnDefinition to:

{ title: 'Amount', field: 'invoice_amount', type:'currency', currencySetting:{ locale: 'hu',currencyCode:'huf', minimumFractionDigits:0, maximumFractionDigits:2}},

Please note, that I added a locale: 'hu' and I changed the currencyCode to 'huf'.

If your country is not in the supported countries. Try something else with similar formatting.

Ok, let me try this approach. Thanks for the help, I appreciate — Adwera, Jun 08 '20 at 11:36

Is there a way to remove currency prefix from material-table react?

1 Answers1