Foreign Exchange Data
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 nonce="undefined" src="https://cdn.zinggrid.com/canary/zinggrid-canary.min.js"></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; --zg-option-list-color: #133a7a; -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> ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // 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"></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; --zg-option-list-color: #133a7a; -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!