Demos Back to Demos

Foreign Exchange Data

21 of 25
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 HTML CSS JS
Edit Download

Result

HTML

<!DOCTYPE html>
<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>
    <link href="https://fonts.googleapis.com/css?family=Work+Sans:400,600" rel="stylesheet">
  </head>
  <body>
    
    <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">
      <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="Year" type="date" header="Year"></zg-column>
        <zg-column index="Date" type="date" header="Date"></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>

CSS

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;
}

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;
}


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 {
  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;
}

.zebra-1 {
  background: #ffffff;
}

.zebra-2 {
  background: #edf6f9;
}

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

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

JS

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

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

Edit in Studio