Foreign Exchange Data

43 of 116
It's now easier than ever to add functionality to your data grids & tables. Enable features like filtering, sorting, and search with just a few attributes.
Result Full HTML CSS JS
Edit Download

20 Years of Euro Foreign Exchange Reference Rates

Source: European Central Bank's Euro foreign exchange reference rates via Awesome JSON Datasets

Full Code

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

<head>
  <meta charset="utf-8">
  <title>ZingGrid: 20 Years of Euro Foreign Exchange Reference Rates</title>
  <script src="https://cdn.zinggrid.com/canary/zinggrid-canary.min.js" defer></script>
  <style>
    .zg-body {
      background: #E0EAFC;
      /* fallback for old browsers */
      background: -webkit-linear-gradient(to right, #CFDEF3, #E0EAFC);
      /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to right, #CFDEF3, #E0EAFC);
      /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
      padding: 40px;
      font-family: 'Work Sans', sans-serif;
    }

    zing-grid[loading] {
      height: 500px;
      opacity: 1;
    }

    zing-grid.loading {
      opacity: 0;
      transition: opacity .3s ease-out;
    }

    zing-grid.loading * {
      opacity: 0;
    }

    zing-grid {
      font-size: .7em;
      font-family: 'Work Sans', sans-serif;
      color: #133a7a;
      background: none;
      --zg-icon-width: 14px;
      --theme-color-primary: #ffffff;
      --zg-icon-color: #ffffff;
      --zg-head-cell-color_sorted: #1b4282;
      --zg-head-cell-icon-color_sorted: #1b4282;
      --zg-select-arrow-color: #ffffff;
      --zg-search-font-size: .7em;
      --zg-cell-background_sorted: #e5f5ff;
      --zg-filter-background_sorted: #e5f5ff;
      --zg-filter-input-background: #ffffff;
      --zg-filter-input-color: #6f97a8;
      -webkit-box-shadow: 1px 1px 5px 1px rgba(161, 190, 252, 1);
      -moz-box-shadow: 1px 1px 5px 1px rgba(161, 190, 252, 1);
      box-shadow: 1px 1px 5px 1px rgba(161, 190, 252, 1);
      -webkit-box-shadow: 3px 3px 29px -1px rgba(161, 190, 252, 1);
      -moz-box-shadow: 3px 3px 29px -1px rgba(161, 190, 252, 1);
      box-shadow: 3px 3px 29px -1px rgba(161, 190, 252, 1);
      border: none;
      opacity: 1;
    }

    zing-grid.loading {
      opacity: 0;
      transition: opacity .3s ease-out;
    }

    zing-grid.loading * {
      opacity: 0;
    }

    zg-caption {
      border-radius: 6px 6px 0 0;
      -moz-border-radius: 6px 6px 0 0;
      -webkit-border-radius: 6px 6px 0 0;
      background: #2C6FD8;
      padding-top: 10px;
      padding-bottom: 10px;
      border: 1px solid #60c5ff;
    }

    zg-caption h1 {
      color: #fff;
      font-weight: bold;
      font-size: 22px;
    }

    zg-caption p {
      font-size: 11px;
    }

    zg-caption a {
      color: #ffffff;
      font-weight: bold;
    }

    zg-caption a:hover {
      color: #60c5ff;
    }

    zg-head {
      border: 1px solid #60c5ff;
      border-top: none;
    }

    zg-body {
      background: #eeeeee;
    }

    zg-head zg-head-cell {
      font-size: .75em;
      font-weight: bold;
      letter-spacing: .05em;
      text-align: left;
      color: #ffffff;
      background: #2C6FD8;
      --zg-icon-init-fill: #ffffff;
      --zg-head-cell-background_sorted: #e5f5ff;
    }

    zg-filter {
      background: #2C6FD8;
      border-color: #60c5ff;
    }

    zg-filter {
      border: 1px solid #60c5ff;
    }

    zg-head zg-head-cell:first-child {
      padding-left: 15px;
      font-weight: bold;
      color: #ffffff;
    }

    zg-body zg-cell:first-child {
      font-weight: bold;
      color: #2C6FD8;
      padding-left: 15px;
    }

    zg-body zg-cell:nth-child(2) {
      font-weight: bold;
      color: #2C6FD8;
    }

    zg-head zg-head-cell:last-child,
    zg-body zg-cell:last-child {
      padding-right: 15px;
    }

    zg-head zg-head-cell,
    zg-body zg-cell {
      min-width: 90px;
      padding: 7px;
      border-color: #60c5ff;
    }

    zg-body zg-cell {
      padding: 7px;
    }

    zg-body zg-row {
      border-color: #60c5ff;
    }

    zg-head zg-head-cell:first-child,
    zg-body zg-cell:first-child,
    zg-head zg-head-cell:nth-child(2),
    zg-body zg-cell:nth-child(2) {
      min-width: 75px;
    }

    zg-pager {
      background: #2C6FD8;
      color: #ffffff;
      border: 1px solid #60c5ff;
      border-radius: 0 0 6px 6px;
    }

    .zg-body .zebra-1 {
      background: #ffffff;
    }

    .zg-body .zebra-2 {
      background: #edf6f9;
    }

    zg-filter input {
      margin-left: 13px;
      font-size: .7em;
    }

    zg-column {
      border-color: #60c5ff;
    }

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

<body class="zg-body">

  <link href="https://fonts.googleapis.com/css?family=Work+Sans:400,600" rel="stylesheet">

  <zing-grid src="https://zinggrid-examples.firebaseio.com/euro-foreign-exchange-reference-rates" layout="row" viewport-stop layout-controls="disabled" compact gridlines="both" sort filter search pager zebra page-size="10" page-size-options="10,25,50,100,200"
    class="loading">
    <zg-caption>
      <h1>20 Years of Euro Foreign Exchange Reference Rates</h1>
      <p><strong>Source:</strong> European Central Bank's <a href="https://www.ecb.europa.eu/stats/policy_and_exchange_rates/euro_reference_exchange_rates/html/index.en.html" target="_blank" crossorigin>Euro foreign exchange reference rates
          </a> via <a href="https://github.com/jdorfman/awesome-json-datasets#currency" target="_blank" crossorigin>Awesome JSON Datasets</a></p>
    </zg-caption>
    <zg-colgroup>
      <zg-column index="Date" type="text" header="Date"></zg-column>
      <zg-column index="Year" type="text" header="Year"></zg-column>
      <zg-column index="USD" type="number" renderer="renderUSDNull" filter="disabled"></zg-column>
      <zg-column index="JPY" type="number" renderer="renderJPYNull" filter="disabled"></zg-column>
      <zg-column index="BGN" type="number" renderer="renderBGNNull" filter="disabled"></zg-column>
      <zg-column index="CYP" type="number" renderer="renderCYPNull" filter="disabled"></zg-column>
      <zg-column index="CZK" type="number" renderer="renderCZKNull" filter="disabled"></zg-column>
      <zg-column index="DKK" type="number" renderer="renderDKKNull" filter="disabled"></zg-column>
      <zg-column index="EEK" type="number" renderer="renderEEKNull" filter="disabled"></zg-column>
      <zg-column index="GBP" type="number" renderer="renderGBPNull" filter="disabled"></zg-column>
      <zg-column index="HUF" type="number" renderer="renderHUFNull" filter="disabled"></zg-column>
      <zg-column index="LTL" type="number" renderer="renderLTLNull" filter="disabled"></zg-column>
      <zg-column index="LVL" type="number" renderer="renderLVLNull" filter="disabled"></zg-column>
      <zg-column index="MTL" type="number" renderer="renderMTLNull" filter="disabled"></zg-column>
      <zg-column index="PLN" type="number" renderer="renderPLNNull" filter="disabled"></zg-column>
      <zg-column index="ROL" type="number" renderer="renderROLNull" filter="disabled"></zg-column>
      <zg-column index="RON" type="number" renderer="renderROLNull" filter="disabled"></zg-column>
      <zg-column index="SEK" type="number" renderer="renderSEKNull" filter="disabled"></zg-column>
      <zg-column index="SIT" type="number" renderer="renderSITNull" filter="disabled"></zg-column>
      <zg-column index="SKK" type="number" renderer="renderSKKNull" filter="disabled"></zg-column>
      <zg-column index="CHF" type="number" renderer="renderCHFNull" filter="disabled"></zg-column>
      <zg-column index="ISK" type="number" renderer="renderISKNull" filter="disabled"></zg-column>
      <zg-column index="NOK" type="number" renderer="renderNOKNull" filter="disabled"></zg-column>
      <zg-column index="HRK" type="number" renderer="renderHRKNull" filter="disabled"></zg-column>
      <zg-column index="RUB" type="number" renderer="renderRUBNull" filter="disabled"></zg-column>
      <zg-column index="TRL" type="number" renderer="renderTRLNull" filter="disabled"></zg-column>
      <zg-column index="TRY" type="number" renderer="renderTRLNull" filter="disabled"></zg-column>
      <zg-column index="AUD" type="number" renderer="renderUSDNull" filter="disabled"></zg-column>
      <zg-column index="BRL" type="number" renderer="renderBRLNull" filter="disabled"></zg-column>
      <zg-column index="CAD" type="number" renderer="renderCADNull" filter="disabled"></zg-column>
      <zg-column index="CNY" type="number" renderer="renderCNYNull" filter="disabled"></zg-column>
      <zg-column index="HKD" type="number" renderer="renderHKDNull" filter="disabled"></zg-column>
      <zg-column index="IDR" type="number" renderer="renderIDRNull" filter="disabled"></zg-column>
      <zg-column index="ILS" type="number" renderer="renderILSNull" filter="disabled"></zg-column>
      <zg-column index="INR" type="number" renderer="renderINRNull" filter="disabled"></zg-column>
      <zg-column index="KRW" type="number" renderer="renderKRWNull" filter="disabled"></zg-column>
      <zg-column index="MXN" type="number" renderer="renderUSDNull" filter="disabled"></zg-column>
      <zg-column index="MYR" type="number" renderer="renderMYRNull" filter="disabled"></zg-column>
      <zg-column index="NZD" type="number" renderer="renderUSDNull" filter="disabled"></zg-column>
      <zg-column index="PHP" type="number" renderer="renderPHPNull" filter="disabled"></zg-column>
      <zg-column index="SGD" type="number" renderer="renderSGDNull" filter="disabled"></zg-column>
      <zg-column index="THB" type="number" renderer="renderTHBNull" filter="disabled"></zg-column>
      <zg-column index="ZAR" type="number" renderer="renderZARNull" filter="disabled"></zg-column>
    </zg-colgroup>
  </zing-grid>

  <script>
    // Custom loading class for CSS handling
    const zgLoaded = document.querySelector('zing-grid');
    zgLoaded.addEventListener('grid:ready', () => {
      setTimeout(() => zgLoaded.classList.remove('loading'), 0);
    });

    function renderUSDNull(value) {
      if (value == null) {
        return `<span style="color:#b3c0d3;">N / A</span>`;
      } else {
        return `<span style="color:#65a1d8;">$</span> ${value}`;
      }
    }

    function renderJPYNull(value) {
      if (value == null) {
        return `<span style="color:#b3c0d3;">N / A</span>`;
      } else {
        return `<span style="color:#65a1d8;">¥</span> ${value}`;
      }
    }

    function renderBGNNull(value) {
      if (value == null) {
        return `<span style="color:#b3c0d3;">N / A</span>`;
      } else {
        return `<span style="color:#65a1d8;">Лв</span> ${value}`;
      }
    }

    function renderCYPNull(value) {
      if (value == null) {
        return `<span style="color:#b3c0d3;">N / A</span>`;
      } else {
        return `<span style="color:#65a1d8;">£</span> ${value}`;
      }
    }

    function renderCZKNull(value) {
      if (value == null) {
        return `<span style="color:#b3c0d3;">N / A</span>`;
      } else {
        return `<span style="color:#65a1d8;">Kč</span> ${value}`;
      }
    }

    function renderDKKNull(value) {
      if (value == null) {
        return `<span style="color:#b3c0d3;">N / A</span>`;
      } else {
        return `<span style="color:#65a1d8;">kr.</span> ${value}`;
      }
    }

    function renderEEKNull(value) {
      if (value == null) {
        return `<span style="color:#b3c0d3;">N / A</span>`;
      } else {
        return `<span style="color:#65a1d8;">EEK</span> ${value}`;
      }
    }

    function renderGBPNull(value) {
      if (value == null) {
        return `<span style="color:#b3c0d3;">N / A</span>`;
      } else {
        return `<span style="color:#65a1d8;">£</span> ${value}`;
      }
    }

    function renderHUFNull(value) {
      if (value == null) {
        return `<span style="color:#b3c0d3;">N / A</span>`;
      } else {
        return `<span style="color:#65a1d8;">Ft</span> ${value}`;
      }
    }

    function renderLTLNull(value) {
      if (value == null) {
        return `<span style="color:#b3c0d3;">N / A</span>`;
      } else {
        return `<span style="color:#65a1d8;">Lt</span> ${value}`;
      }
    }

    function renderLVLNull(value) {
      if (value == null) {
        return `<span style="color:#b3c0d3;">N / A</span>`;
      } else {
        return `<span style="color:#65a1d8;">Ls</span> ${value}`;
      }
    }

    function renderMTLNull(value) {
      if (value == null) {
        return `<span style="color:#b3c0d3;">N / A</span>`;
      } else {
        return `<span style="color:#65a1d8;">Lm</span> ${value}`;
      }
    }

    function renderPLNNull(value) {
      if (value == null) {
        return `<span style="color:#b3c0d3;">N / A</span>`;
      } else {
        return `<span style="color:#65a1d8;">zł</span> ${value}`;
      }
    }

    function renderROLNull(value) {
      if (value == null) {
        return `<span style="color:#b3c0d3;">N / A</span>`;
      } else {
        return `<span style="color:#65a1d8;">lei</span> ${value}`;
      }
    }

    function renderSEKNull(value) {
      if (value == null) {
        return `<span style="color:#b3c0d3;">N / A</span>`;
      } else {
        return `<span style="color:#65a1d8;">kr</span> ${value}`;
      }
    }

    function renderSITNull(value) {
      if (value == null) {
        return `<span style="color:#b3c0d3;">N / A</span>`;
      } else {
        return `<span style="color:#65a1d8;">SIT</span> ${value}`;
      }
    }

    function renderSKKNull(value) {
      if (value == null) {
        return `<span style="color:#b3c0d3;">N / A</span>`;
      } else {
        return `<span style="color:#65a1d8;">Sk</span> ${value}`;
      }
    }

    function renderCHFNull(value) {
      if (value == null) {
        return `<span style="color:#b3c0d3;">N / A</span>`;
      } else {
        return `<span style="color:#65a1d8;">CHF</span> ${value}`;
      }
    }

    function renderISKNull(value) {
      if (value == null) {
        return `<span style="color:#b3c0d3;">N / A</span>`;
      } else {
        return `<span>Íkr</span> ${value}`;
      }
    }

    function renderNOKNull(value) {
      if (value == null) {
        return `<span style="color:#b3c0d3;">N / A</span>`;
      } else {
        return `<span style="color:#65a1d8;">kr</span> ${value}`;
      }
    }

    function renderHRKNull(value) {
      if (value == null) {
        return `<span style="color:#b3c0d3;">N / A</span>`;
      } else {
        return `<span style="color:#65a1d8;">kn</span> ${value}`;
      }
    }

    function renderRUBNull(value) {
      if (value == null) {
        return `<span style="color:#b3c0d3;">N / A</span>`;
      } else {
        return `<span style="color:#65a1d8;">₽</span> ${value}`;
      }
    }

    function renderTRLNull(value) {
      if (value == null) {
        return `<span style="color:#b3c0d3;">N / A</span>`;
      } else {
        return `<span style="color:#65a1d8;">₺</span> ${value}`;
      }
    }

    function renderBRLNull(value) {
      if (value == null) {
        return `<span style="color:#b3c0d3;">N / A</span>`;
      } else {
        return `<span style="color:#65a1d8;">R$</span> ${value}`;
      }
    }

    function renderCADNull(value) {
      if (value == null) {
        return `<span style="color:#b3c0d3;">N / A</span>`;
      } else {
        return `<span style="color:#65a1d8;">CAD</span> ${value}`;
      }
    }

    function renderCNYNull(value) {
      if (value == null) {
        return `<span style="color:#b3c0d3;">N / A</span>`;
      } else {
        return `<span style="color:#65a1d8;">¥</span> ${value}`;
      }
    }

    function renderHKDNull(value) {
      if (value == null) {
        return `<span style="color:#b3c0d3;">N / A</span>`;
      } else {
        return `<span style="color:#65a1d8;">HK$</span> ${value}`;
      }
    }

    function renderIDRNull(value) {
      if (value == null) {
        return `<span style="color:#b3c0d3;">N / A</span>`;
      } else {
        return `<span style="color:#65a1d8;">Rp</span> ${value}`;
      }
    }

    function renderILSNull(value) {
      if (value == null) {
        return `<span style="color:#b3c0d3;">N / A</span>`;
      } else {
        return `<span style="color:#65a1d8;">₪</span> ${value}`;
      }
    }

    function renderINRNull(value) {
      if (value == null) {
        return `<span style="color:#b3c0d3;">N / A</span>`;
      } else {
        return `<span style="color:#65a1d8;">₹</span> ${value}`;
      }
    }

    function renderKRWNull(value) {
      if (value == null) {
        return `<span style="color:#b3c0d3;">N / A</span>`;
      } else {
        return `<span style="color:#65a1d8;">₩</span> ${value}`;
      }
    }

    function renderMYRNull(value) {
      if (value == null) {
        return `<span style="color:#b3c0d3;">N / A</span>`;
      } else {
        return `<span style="color:#65a1d8;">RM</span> ${value}`;
      }
    }

    function renderPHPNull(value) {
      if (value == null) {
        return `<span style="color:#b3c0d3;">N / A</span>`;
      } else {
        return `<span style="color:#65a1d8;">₱</span> ${value}`;
      }
    }

    function renderSGDNull(value) {
      if (value == null) {
        return `<span style="color:#b3c0d3;">N / A</span>`;
      } else {
        return `<span style="color:#65a1d8;">S$</span> ${value}`;
      }
    }

    function renderTHBNull(value) {
      if (value == null) {
        return `<span style="color:#b3c0d3;">N / A</span>`;
      } else {
        return `<span style="color:#65a1d8;">฿</span> ${value}`;
      }
    }

    function renderZARNull(value) {
      if (value == null) {
        return `<span style="color:#b3c0d3;">N / A</span>`;
      } else {
        return `<span style="color:#65a1d8;">R</span> ${value}`;
      }
    }
  </script>
</body>

</html>
<!DOCTYPE html>
<html class="zg-html">
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: 20 Years of Euro Foreign Exchange Reference Rates</title>
    <script src="https://cdn.zinggrid.com/canary/zinggrid-canary.min.js" defer></script>
  </head>
  <body class="zg-body">

    <link href="https://fonts.googleapis.com/css?family=Work+Sans:400,600" rel="stylesheet">
    
    <zing-grid
      src="https://zinggrid-examples.firebaseio.com/euro-foreign-exchange-reference-rates"
      layout="row"
      viewport-stop
      layout-controls="disabled"
      compact
      gridlines="both"
      sort
      filter
      search
      pager
      zebra
      page-size="10"
      page-size-options="10,25,50,100,200"
      class="loading"
    >
      <zg-caption>
        <h1>20 Years of Euro Foreign Exchange Reference Rates</h1>
        <p><strong>Source:</strong> European Central Bank's <a href="https://www.ecb.europa.eu/stats/policy_and_exchange_rates/euro_reference_exchange_rates/html/index.en.html" target="_blank" crossorigin>Euro foreign exchange reference rates
          </a> via <a href="https://github.com/jdorfman/awesome-json-datasets#currency" target="_blank" crossorigin>Awesome JSON Datasets</a></p>        
      </zg-caption>
      <zg-colgroup>
        <zg-column index="Date" type="text" header="Date"></zg-column>
        <zg-column index="Year" type="text" header="Year"></zg-column>
        <zg-column index="USD" type="number" renderer="renderUSDNull" filter="disabled"></zg-column>
        <zg-column index="JPY" type="number" renderer="renderJPYNull" filter="disabled"></zg-column>
        <zg-column index="BGN" type="number" renderer="renderBGNNull" filter="disabled"></zg-column>
        <zg-column index="CYP" type="number" renderer="renderCYPNull" filter="disabled"></zg-column>
        <zg-column index="CZK" type="number" renderer="renderCZKNull" filter="disabled"></zg-column>
        <zg-column index="DKK" type="number" renderer="renderDKKNull" filter="disabled"></zg-column>
        <zg-column index="EEK" type="number" renderer="renderEEKNull" filter="disabled"></zg-column>
        <zg-column index="GBP" type="number" renderer="renderGBPNull" filter="disabled"></zg-column>
        <zg-column index="HUF" type="number" renderer="renderHUFNull" filter="disabled"></zg-column>
        <zg-column index="LTL" type="number" renderer="renderLTLNull" filter="disabled"></zg-column>
        <zg-column index="LVL" type="number" renderer="renderLVLNull" filter="disabled"></zg-column>
        <zg-column index="MTL" type="number" renderer="renderMTLNull" filter="disabled"></zg-column>
        <zg-column index="PLN" type="number" renderer="renderPLNNull" filter="disabled"></zg-column>
        <zg-column index="ROL" type="number" renderer="renderROLNull" filter="disabled"></zg-column>
        <zg-column index="RON" type="number" renderer="renderROLNull" filter="disabled"></zg-column>
        <zg-column index="SEK" type="number" renderer="renderSEKNull" filter="disabled"></zg-column>
        <zg-column index="SIT" type="number" renderer="renderSITNull" filter="disabled"></zg-column>
        <zg-column index="SKK" type="number" renderer="renderSKKNull" filter="disabled"></zg-column>
        <zg-column index="CHF" type="number" renderer="renderCHFNull" filter="disabled"></zg-column>
        <zg-column index="ISK" type="number" renderer="renderISKNull" filter="disabled"></zg-column>
        <zg-column index="NOK" type="number" renderer="renderNOKNull" filter="disabled"></zg-column>
        <zg-column index="HRK" type="number" renderer="renderHRKNull" filter="disabled"></zg-column>
        <zg-column index="RUB" type="number" renderer="renderRUBNull" filter="disabled"></zg-column>
        <zg-column index="TRL" type="number" renderer="renderTRLNull" filter="disabled"></zg-column>
        <zg-column index="TRY" type="number" renderer="renderTRLNull" filter="disabled"></zg-column>
        <zg-column index="AUD" type="number" renderer="renderUSDNull" filter="disabled"></zg-column>
        <zg-column index="BRL" type="number" renderer="renderBRLNull" filter="disabled"></zg-column>
        <zg-column index="CAD" type="number" renderer="renderCADNull" filter="disabled"></zg-column>
        <zg-column index="CNY" type="number" renderer="renderCNYNull" filter="disabled"></zg-column>
        <zg-column index="HKD" type="number" renderer="renderHKDNull" filter="disabled"></zg-column>
        <zg-column index="IDR" type="number" renderer="renderIDRNull" filter="disabled"></zg-column>
        <zg-column index="ILS" type="number" renderer="renderILSNull" filter="disabled"></zg-column>
        <zg-column index="INR" type="number" renderer="renderINRNull" filter="disabled"></zg-column>
        <zg-column index="KRW" type="number" renderer="renderKRWNull" filter="disabled"></zg-column>
        <zg-column index="MXN" type="number" renderer="renderUSDNull" filter="disabled"></zg-column>
        <zg-column index="MYR" type="number" renderer="renderMYRNull" filter="disabled"></zg-column>
        <zg-column index="NZD" type="number" renderer="renderUSDNull" filter="disabled"></zg-column>
        <zg-column index="PHP" type="number" renderer="renderPHPNull" filter="disabled"></zg-column>
        <zg-column index="SGD" type="number" renderer="renderSGDNull" filter="disabled"></zg-column>
        <zg-column index="THB" type="number" renderer="renderTHBNull" filter="disabled"></zg-column>
        <zg-column index="ZAR" type="number" renderer="renderZARNull" filter="disabled"></zg-column>
      </zg-colgroup>
    </zing-grid>
    
  </body>
</html>
.zg-body {
	background: #E0EAFC;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #CFDEF3, #E0EAFC);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #CFDEF3, #E0EAFC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  padding: 40px;
  font-family: 'Work Sans', sans-serif;
}

zing-grid[loading] {
  height:500px;
  opacity: 1;
}
zing-grid.loading { opacity:0; transition:opacity .3s ease-out; }
zing-grid.loading * { opacity:0; }

zing-grid {
  font-size: .7em;
  font-family: 'Work Sans', sans-serif;
  color: #133a7a;
  background: none;
  --zg-icon-width: 14px;
	--theme-color-primary: #ffffff;
  --zg-icon-color: #ffffff;
  --zg-head-cell-color_sorted: #1b4282;
  --zg-head-cell-icon-color_sorted: #1b4282;
	--zg-select-arrow-color: #ffffff;
	--zg-search-font-size: .7em;
	--zg-cell-background_sorted: #e5f5ff;
  --zg-filter-background_sorted: #e5f5ff;
  --zg-filter-input-background: #ffffff;
  --zg-filter-input-color: #6f97a8;
	-webkit-box-shadow: 1px 1px 5px 1px rgba(161,190,252,1);
	-moz-box-shadow: 1px 1px 5px 1px rgba(161,190,252,1);
	box-shadow: 1px 1px 5px 1px rgba(161,190,252,1);
  -webkit-box-shadow: 3px 3px 29px -1px rgba(161,190,252,1);
  -moz-box-shadow: 3px 3px 29px -1px rgba(161,190,252,1);
  box-shadow: 3px 3px 29px -1px rgba(161,190,252,1);
  border: none;
  opacity: 1;
}
zing-grid.loading { opacity:0; transition:opacity .3s ease-out; }
zing-grid.loading * { opacity:0; }


zg-caption {
  border-radius: 6px 6px 0 0;
  -moz-border-radius: 6px 6px 0 0;
	-webkit-border-radius: 6px 6px 0 0;
  background: #2C6FD8;
  padding-top: 10px;
  padding-bottom: 10px;
  border: 1px solid #60c5ff;
}

zg-caption h1 {
  color: #fff;
  font-weight: bold;
  font-size: 22px;
}

zg-caption p {
  font-size: 11px;
}

zg-caption a {
  color: #ffffff;
  font-weight: bold;
}

zg-caption a:hover {
  color: #60c5ff;
}

zg-head {
  border: 1px solid #60c5ff;
  border-top: none;
}

zg-body {
  background: #eeeeee;
}

zg-head zg-head-cell {
  font-size: .75em;
  font-weight: bold;
  letter-spacing: .05em;
  text-align: left;
  color: #ffffff;
  background: #2C6FD8;
  --zg-icon-init-fill: #ffffff;
  --zg-head-cell-background_sorted: #e5f5ff;
}

zg-filter {
  background: #2C6FD8;
  border-color: #60c5ff;
}

zg-filter {
  border: 1px solid #60c5ff ;
}

zg-head zg-head-cell:first-child {
  padding-left: 15px;
  font-weight: bold;
  color: #ffffff;
}

zg-body zg-cell:first-child {
  font-weight: bold;
  color: #2C6FD8;
  padding-left: 15px;
}

zg-body zg-cell:nth-child(2) {
  font-weight: bold;
  color: #2C6FD8;
}

zg-head zg-head-cell:last-child,
zg-body zg-cell:last-child {
  padding-right: 15px;
}

zg-head zg-head-cell,
zg-body zg-cell {
  min-width: 90px;
  padding: 7px;
  border-color: #60c5ff;
}

zg-body zg-cell {
  padding: 7px;
}

zg-body zg-row {
  border-color: #60c5ff;
}

zg-head zg-head-cell:first-child,
zg-body zg-cell:first-child,
zg-head zg-head-cell:nth-child(2),
zg-body zg-cell:nth-child(2) {
  min-width: 75px;
}

zg-pager {
  background: #2C6FD8;
  color: #ffffff;
  border: 1px solid #60c5ff;
  border-radius: 0 0 6px 6px;
}

.zg-body .zebra-1 {
  background: #ffffff;
}

.zg-body .zebra-2 {
  background: #edf6f9;
}

zg-filter input {
  margin-left: 13px;
  font-size: .7em;
}

zg-column {
  border-color: #60c5ff;
}
// Custom loading class for CSS handling
const zgLoaded = document.querySelector('zing-grid');
zgLoaded.addEventListener('grid:ready', () => {
  setTimeout(() => zgLoaded.classList.remove('loading'), 0);
});

function renderUSDNull(value) {
  if(value == null) {
    return `<span style="color:#b3c0d3;">N / A</span>`;
  } else {
    return `<span style="color:#65a1d8;">$</span> ${value}`;
  }
}
function renderJPYNull(value) {
  if(value == null) {
    return `<span style="color:#b3c0d3;">N / A</span>`;
  } else {
    return `<span style="color:#65a1d8;">¥</span> ${value}`;
  }
}
function renderBGNNull(value) {
  if(value == null) {
    return `<span style="color:#b3c0d3;">N / A</span>`;
  } else {
    return `<span style="color:#65a1d8;">Лв</span> ${value}`;
  }
}
function renderCYPNull(value) {
  if(value == null) {
    return `<span style="color:#b3c0d3;">N / A</span>`;
  } else {
    return `<span style="color:#65a1d8;">£</span> ${value}`;
  }
}
function renderCZKNull(value) {
  if(value == null) {
    return `<span style="color:#b3c0d3;">N / A</span>`;
  } else {
    return `<span style="color:#65a1d8;">Kč</span> ${value}`;
  }
}
function renderDKKNull(value) {
  if(value == null) {
    return `<span style="color:#b3c0d3;">N / A</span>`;
  } else {
    return `<span style="color:#65a1d8;">kr.</span> ${value}`;
  }
}
function renderEEKNull(value) {
  if(value == null) {
    return `<span style="color:#b3c0d3;">N / A</span>`;
  } else {
    return `<span style="color:#65a1d8;">EEK</span> ${value}`;
  }
}
function renderGBPNull(value) {
  if(value == null) {
    return `<span style="color:#b3c0d3;">N / A</span>`;
  } else {
    return `<span style="color:#65a1d8;">£</span> ${value}`;
  }
}
function renderHUFNull(value) {
  if(value == null) {
    return `<span style="color:#b3c0d3;">N / A</span>`;
  } else {
    return `<span style="color:#65a1d8;">Ft</span> ${value}`;
  }
}
function renderLTLNull(value) {
  if(value == null) {
    return `<span style="color:#b3c0d3;">N / A</span>`;
  } else {
    return `<span style="color:#65a1d8;">Lt</span> ${value}`;
  }
}
function renderLVLNull(value) {
  if(value == null) {
    return `<span style="color:#b3c0d3;">N / A</span>`;
  } else {
    return `<span style="color:#65a1d8;">Ls</span> ${value}`;
  }
}
function renderMTLNull(value) {
  if(value == null) {
    return `<span style="color:#b3c0d3;">N / A</span>`;
  } else {
    return `<span style="color:#65a1d8;">Lm</span> ${value}`;
  }
}
function renderPLNNull(value) {
  if(value == null) {
    return `<span style="color:#b3c0d3;">N / A</span>`;
  } else {
    return `<span style="color:#65a1d8;">zł</span> ${value}`;
  }
}
function renderROLNull(value) {
  if(value == null) {
    return `<span style="color:#b3c0d3;">N / A</span>`;
  } else {
    return `<span style="color:#65a1d8;">lei</span> ${value}`;
  }
}
function renderSEKNull(value) {
  if(value == null) {
    return `<span style="color:#b3c0d3;">N / A</span>`;
  } else {
    return `<span style="color:#65a1d8;">kr</span> ${value}`;
  }
}
function renderSITNull(value) {
  if(value == null) {
    return `<span style="color:#b3c0d3;">N / A</span>`;
  } else {
    return `<span style="color:#65a1d8;">SIT</span> ${value}`;
  }
}
function renderSKKNull(value) {
  if(value == null) {
    return `<span style="color:#b3c0d3;">N / A</span>`;
  } else {
    return `<span style="color:#65a1d8;">Sk</span> ${value}`;
  }
}
function renderCHFNull(value) {
  if(value == null) {
    return `<span style="color:#b3c0d3;">N / A</span>`;
  } else {
    return `<span style="color:#65a1d8;">CHF</span> ${value}`;
  }
}
function renderISKNull(value) {
  if(value == null) {
    return `<span style="color:#b3c0d3;">N / A</span>`;
  } else {
    return `<span>Íkr</span> ${value}`;
  }
}
function renderNOKNull(value) {
  if(value == null) {
    return `<span style="color:#b3c0d3;">N / A</span>`;
  } else {
    return `<span style="color:#65a1d8;">kr</span> ${value}`;
  }
}
function renderHRKNull(value) {
  if(value == null) {
    return `<span style="color:#b3c0d3;">N / A</span>`;
  } else {
    return `<span style="color:#65a1d8;">kn</span> ${value}`;
  }
}
function renderRUBNull(value) {
  if(value == null) {
    return `<span style="color:#b3c0d3;">N / A</span>`;
  } else {
    return `<span style="color:#65a1d8;">₽</span> ${value}`;
  }
}
function renderTRLNull(value) {
  if(value == null) {
    return `<span style="color:#b3c0d3;">N / A</span>`;
  } else {
    return `<span style="color:#65a1d8;">₺</span> ${value}`;
  }
}
function renderBRLNull(value) {
  if(value == null) {
    return `<span style="color:#b3c0d3;">N / A</span>`;
  } else {
    return `<span style="color:#65a1d8;">R$</span> ${value}`;
  }
}
function renderCADNull(value) {
  if(value == null) {
    return `<span style="color:#b3c0d3;">N / A</span>`;
  } else {
    return `<span style="color:#65a1d8;">CAD</span> ${value}`;
  }
}
function renderCNYNull(value) {
  if(value == null) {
    return `<span style="color:#b3c0d3;">N / A</span>`;
  } else {
    return `<span style="color:#65a1d8;">¥</span> ${value}`;
  }
}
function renderHKDNull(value) {
  if(value == null) {
    return `<span style="color:#b3c0d3;">N / A</span>`;
  } else {
    return `<span style="color:#65a1d8;">HK$</span> ${value}`;
  }
}
function renderIDRNull(value) {
  if(value == null) {
    return `<span style="color:#b3c0d3;">N / A</span>`;
  } else {
    return `<span style="color:#65a1d8;">Rp</span> ${value}`;
  }
}
function renderILSNull(value) {
  if(value == null) {
    return `<span style="color:#b3c0d3;">N / A</span>`;
  } else {
    return `<span style="color:#65a1d8;">₪</span> ${value}`;
  }
}
function renderINRNull(value) {
  if(value == null) {
    return `<span style="color:#b3c0d3;">N / A</span>`;
  } else {
    return `<span style="color:#65a1d8;">₹</span> ${value}`;
  }
}
function renderKRWNull(value) {
  if(value == null) {
    return `<span style="color:#b3c0d3;">N / A</span>`;
  } else {
    return `<span style="color:#65a1d8;">₩</span> ${value}`;
  }
}
function renderMYRNull(value) {
  if(value == null) {
    return `<span style="color:#b3c0d3;">N / A</span>`;
  } else {
    return `<span style="color:#65a1d8;">RM</span> ${value}`;
  }
}
function renderPHPNull(value) {
  if(value == null) {
    return `<span style="color:#b3c0d3;">N / A</span>`;
  } else {
    return `<span style="color:#65a1d8;">₱</span> ${value}`;
  }
}
function renderSGDNull(value) {
  if(value == null) {
    return `<span style="color:#b3c0d3;">N / A</span>`;
  } else {
    return `<span style="color:#65a1d8;">S$</span> ${value}`;
  }
}
function renderTHBNull(value) {
  if(value == null) {
    return `<span style="color:#b3c0d3;">N / A</span>`;
  } else {
    return `<span style="color:#65a1d8;">฿</span> ${value}`;
  }
}
function renderZARNull(value) {
  if(value == null) {
    return `<span style="color:#b3c0d3;">N / A</span>`;
  } else {
    return `<span style="color:#65a1d8;">R</span> ${value}`;
  }
}

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