Internationalization Currency Formatting

56 of 122
Will automatically format your currency thousands separator to the corresponding language default defined on the page.
Result Full HTML CSS JS
Edit Download

Full Code

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>ZingGrid: Blank Grid</title>
  <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
  <style>
    .zg-body {
      background: #e6e6e6;
    }

    zing-grid[loading] {
      height: 554px;
    }
  </style>
</head>

<body class="zg-body">

  <zing-grid caption="USD (en) Currency">
    <zg-data data='[{"usd":1135,"other":1895},{"usd":23894,"other":5732},{"usd":613421,"other":120984}]'></zg-data>
    <zg-column type="currency" index="usd" header="USD (no type-currency defined)"></zg-column>
    <!-- can define USD number formatting with European currency symbol -->
    <zg-column type="currency" index="other" type-currency="EUR"></zg-column>
  </zing-grid>

  <zing-grid caption="German (de) Currency" lang="de">
    <zg-data data='[{"de":1135,"other":1895},{"de":23894,"other":5732},{"de":613421,"other":120984}]'></zg-data>
    <!-- numbers formatted to german (de) ISO -->
    <zg-column type="currency" index="de" header="Euro (no type-currency defined)"></zg-column>
    <!-- still need to define type-currency to get the proper currency symbol -->
    <zg-column type="currency" index="other" type-currency="EUR"></zg-column>
  </zing-grid>
  <script></script>
</body>

</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Blank Grid</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
  </head>
  <body class="zg-body">
    
   <zing-grid caption="USD (en) Currency">
      <zg-data data='[{"usd":1135,"other":1895},{"usd":23894,"other":5732},{"usd":613421,"other":120984}]'></zg-data>
     <zg-column type="currency" index="usd" header="USD (no type-currency defined)"></zg-column>
     <!-- can define USD number formatting with European currency symbol -->
     <zg-column type="currency" index="other" type-currency="EUR"></zg-column>
    </zing-grid>
    
    <zing-grid caption="German (de) Currency" lang="de">
      <zg-data data='[{"de":1135,"other":1895},{"de":23894,"other":5732},{"de":613421,"other":120984}]'></zg-data>
     	<!-- numbers formatted to german (de) ISO -->
      <zg-column type="currency" index="de" header="Euro (no type-currency defined)"></zg-column>
      <!-- still need to define type-currency to get the proper currency symbol -->
     <zg-column type="currency" index="other" type-currency="EUR"></zg-column>
    </zing-grid>
  </body>
</html>
.zg-body {background:#e6e6e6;}

Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio

Demo Gallery