Demos Back to Demos

Cryptocurrency Pricing

18 of 25

This demo shows the usability of the grid and presenting information in a user friendly way.

Result HTML CSS JS
Edit Download

Result

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingGrid Demo</title>
    <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">
    <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
  </head>
  <body>
    <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"
    >
      <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>

CSS

zing-grid[loading] {
  height:700px;
}
zing-grid {
  font-family: 'Open Sans';
}

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

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

.coin-name {
  display: flex;
}

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

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

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

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

.price {
  display: flex;
}

.price__dollars {
  font-size: 1.6rem;
}

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

JS

// 'Last Updated' cell renderer
function renderCustomDate(time) {
  const date = new Date(time*1000);
  return `
    ${date.toLocaleDateString()}
    ${date.toLocaleTimeString()}
  `;
}

// 'Percent Change' cell renderer
function renderChange(value) {
  const match = value < 0;
  const valType = match ? 'down' : 'up';
  return ` ${value}%`;
}

// 'Price' cell renderer
function renderPrice(value) {
  const dollars = value.split('.')[0];
  const cents = value.split('.')[1];
  return `
    
      $${dollars}
      ${cents.slice(0,2)}
    
	`;
}

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