Demos Back to Docs

Cryptocurrency Pricing

106 of 124
This demo shows the usability of ZingGrid for presenting information in a user friendly way.
Result Full HTML CSS JS
Edit Download

Full Code

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

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    .zg-body {
      background-color: #000;
    }

    zing-grid[loading] {
      height: 700px;
    }

    zing-grid {
      font-family: 'Open Sans';
      opacity: 1;
    }

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

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

    .zg-body .fa-chevron-down {
      color: #f44336;
    }

    .zg-body .fa-chevron-up {
      color: #4caf50;
    }

    .zg-body .coin-icon {
      height: 15px;
      margin-right: 8px;
      width: 15px;
    }

    .zg-body .coin-name {
      display: flex;
    }

    .zg-body .coin-name__section {
      align-items: center;
      display: flex;
      margin-right: 4px;
    }

    .zg-body .coin-name__symbol {
      font-size: 0.8rem;
    }

    .zg-body .coin-name__text {
      font-size: 1.2rem;
      font-weight: 600;
    }

    .zg-body .percent-change {
      font-size: 1.2rem;
    }

    .zg-body .price {
      display: flex;
    }

    .zg-body .price__dollars {
      font-size: 1.6rem;
    }

    .zg-body .price__cents {
      margin-top: 4px;
      margin-left: 2px;
    }

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

<body class="zg-body">

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">

  <zing-grid caption="Cryptocurrency prices" columns-control layout-controls pager page-size="5" page-size-card="4" page-size-options="2,5,10" search sort theme="dark" class="loading">
    <zg-data src="https://storage.googleapis.com/zinggrid-pwa.appspot.com/cryptocurrency-pricing.json"></zg-data>
    <zg-colgroup>
      <zg-column index="symbol,name" header="Name">
        <template>
          <div class="coin-name">
            <section>
              <div class="coin-name__text">[[index.name]]</div>
              <div class="coin-name__symbol">([[index.symbol]])</div>
            </section>
          </div>
        </template>
      </zg-column>
      <zg-column index="price_usd" type="number" header="Price (USD)" renderer="renderPrice"></zg-column>
      <zg-column index="percent_change_24h" header="Percent Change (24h)" renderer="renderChange"></zg-column>
      <zg-column index="last_updated" header="Last Updated" renderer="renderCustomDate"></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);
    });
    // 'Last Updated' cell renderer
    function renderCustomDate(time) {
      const date = new Date(time * 1000);
      return `
    <div>${date.toLocaleDateString()}</div>
    <div>${date.toLocaleTimeString()}</div>
  `;
    }
    // 'Percent Change' cell renderer
    function renderChange(value) {
      const match = value < 0;
      const valType = match ? 'down' : 'up';
      return `<i class="fas fa-chevron-${valType}"></i> <span class="percent-change percent-change--${valType}">${value}%</span>`;
    }
    // 'Price' cell renderer
    function renderPrice(value) {
      const dollars = value.split('.')[0];
      const cents = value.split('.')[1];
      return `
    <div class="price">
      <div class="price__dollars">$${dollars}</div>
      <div class="price__cents">${cents.slice(0, 2)}</div>
    </div>
	`;
    }
  </script>
</body>

</html>
<!DOCTYPE html>
<html class="zg-html">
  <head>
    <meta charset="utf-8">
    <title>ZingGrid Demo</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  </head>
  <body class="zg-body">

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">

    <zing-grid 
      caption="Cryptocurrency prices" 
      columns-control
      layout-controls
      pager 
      page-size="5"
      page-size-card="4"
      page-size-options="2,5,10"
      search
      sort
      theme="dark"
      class="loading"
    >
      <zg-data src="https://storage.googleapis.com/zinggrid-pwa.appspot.com/cryptocurrency-pricing.json"></zg-data>
      <zg-colgroup>
        <zg-column index="symbol,name" header="Name">
        	<template>
          	<div class="coin-name">
              <section>
                <div class="coin-name__text">[[index.name]]</div>
                <div class="coin-name__symbol">([[index.symbol]])</div>
              </section>
            </div>
          </template>
        </zg-column>
        <zg-column 
          index="price_usd" 
          type="number"
          header="Price (USD)" 
          renderer="renderPrice"></zg-column>
        <zg-column 
          index="percent_change_24h" 
          header="Percent Change (24h)" 
          renderer="renderChange"></zg-column>
        <zg-column 
          index="last_updated"
          header="Last Updated"
          renderer="renderCustomDate"></zg-column>
      </zg-colgroup>
    </zing-grid>
	</body>
</html>
.zg-body {
  background-color: #000;
}
zing-grid[loading] {
  height:700px;
}
zing-grid {
  font-family: 'Open Sans';
  opacity: 1;
}
zing-grid.loading { opacity:0; transition:opacity .3s ease-out; }
zing-grid.loading * { opacity:0; }

.zg-body .fa-chevron-down { color: #f44336; }
.zg-body .fa-chevron-up { color: #4caf50; }

.zg-body .coin-icon {
  height: 15px;
  margin-right: 8px;
  width: 15px;
}

.zg-body .coin-name {
  display: flex;
}

.zg-body .coin-name__section {
  align-items: center;
  display: flex;
  margin-right: 4px;
}

.zg-body .coin-name__symbol {
	font-size: 0.8rem;
}

.zg-body .coin-name__text {
  font-size: 1.2rem;
  font-weight: 600;
}

.zg-body .percent-change {
  font-size: 1.2rem;
}

.zg-body .price {
  display: flex;
}

.zg-body .price__dollars {
  font-size: 1.6rem;
}

.zg-body .price__cents {
 	margin-top: 4px;
  margin-left: 2px;
}
// Custom loading class for CSS handling
const zgLoaded = document.querySelector('zing-grid');
zgLoaded.addEventListener('grid:ready', () => {
    setTimeout(() => zgLoaded.classList.remove('loading'), 0);
});
// 'Last Updated' cell renderer
function renderCustomDate(time) {
    const date = new Date(time * 1000);
    return `
    <div>${date.toLocaleDateString()}</div>
    <div>${date.toLocaleTimeString()}</div>
  `;
}
// 'Percent Change' cell renderer
function renderChange(value) {
    const match = value < 0;
    const valType = match ? 'down' : 'up';
    return `<i class="fas fa-chevron-${valType}"></i> <span class="percent-change percent-change--${valType}">${value}%</span>`;
}
// 'Price' cell renderer
function renderPrice(value) {
    const dollars = value.split('.')[0];
    const cents = value.split('.')[1];
    return `
    <div class="price">
      <div class="price__dollars">$${dollars}</div>
      <div class="price__cents">${cents.slice(0, 2)}</div>
    </div>
	`;
}

Related Docs

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

Related Docs

Demo Gallery