Currency Column Type

16 of 116
ZingGrid provides a <zg-column type="currency"> column type. This column type will automatically format numbers based on locale and user configuration. While editing the cell the input field will have type number.
Result Full HTML CSS JS
Edit Download

Full Code

<!DOCTYPE html>
<html class="zg-html">

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

    .zg-body zing-grid[loading] {
      height: 400px;
    }

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

<body class="zg-body">
  <zing-grid caption="<code>currency</code> Column Type" sort editor-controls src="https://zinggrid-rest-example-datasets.glitch.me/employees">
    <zg-column index="hourly_salary" type="currency"></zg-column>
    <zg-column index="hourly_salary" header="Salary Without Column Type" editor="disabled"></zg-column>
  </zing-grid>
  <script></script>
</body>

</html>
<!DOCTYPE html>
<html class="zg-html">
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Simple Grid</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
  </head>
  <body class="zg-body">
    <zing-grid
      caption="<code>currency</code> Column Type"
      sort
      editor-controls
      src="https://zinggrid-rest-example-datasets.glitch.me/employees">
      <zg-column index="hourly_salary" type="currency"></zg-column>
      <zg-column index="hourly_salary" header="Salary Without Column Type" editor="disabled"></zg-column>
    </zing-grid>
  </body>
</html>
.zg-body {background:#e6e6e6;}

.zg-body zing-grid[loading] {
  height:400px;
}

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