experiment_id: web-retrieval-v1
fixture_id: /demos/web-component-grid-Internationalization-currency-column
mode: provenance
representation: html
origin_response_id: 651844ab071cd35a0610eb0a3ff61e1d
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.531Z
version_nonce: fcaaed1e6f2658ac4e3593aa15d92970
generated_at_utc: 2026-11-05T09:41:03.954Z
response_nonce: 1aeef593270df91e702d7765da8df155

International Currency Formatting

59 of 125
You can automatically format your currency 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 nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></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>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
  </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"></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;}
// No JS code

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