Demos Back to Demos

Website Visitors

23 of 25
A website visitor dashboard with simple grid with basic features like sorting, filtering and custom columns
Result HTML CSS JS
Edit Download

Result

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Blank Grid</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
  	<link href="https://fonts.googleapis.com/css?family=Work+Sans:400,600" rel="stylesheet">
  </head>
  <body>
    
    <zing-grid 
      src="https://zinggrid-marketing.firebaseio.com/website-visitors-milliseconds"
      pager
      sort
      filter
      gridlines="both"
      page-size="10"
      page-size-options="5,10,20">
      <zg-colgroup>
        <zg-column index="user" header="<i class='fas fa-users'></i> Name">
            <img src="[[index.user.0.avatar]]" alt="Avatar N/A" class="user--avatar"/>
            <span>[[index.user.0.name]]</span>
        </zg-column>
        <zg-column index="lastSeen" type="number" renderer="renderLastSeen" header="<i class='far fa-calendar-alt'></i> Last Seen"></zg-column>
        <zg-column index="firstSeen" type="number" renderer="renderLastSeen" header="<i class='far fa-calendar-alt'></i> First Seen"></zg-column>
        <zg-column index="signedUp" type="number" renderer="renderLastSeen" header="<i class='far fa-calendar-alt'></i> Signed Up"></zg-column>
        <zg-column index="webSessions" type="number" header="<i class='fas fa-chart-line'></i> Web Sessions"></zg-column>
        <zg-column index="city" header="<i class='fas fa-city'></i> City"></zg-column>
      </zg-colgroup>
    </zing-grid>
    
  </body>
</html>

CSS

body{
  padding: 20px;
	background:#ffffff;
	font-family: 'Work Sans', sans-serif;
}

zing-grid {
  max-width: 900px;
  margin: 0 auto;
	font-family: 'Work Sans', sans-serif;
  border: none;
  font-size: 11px;
  color: #212121;
  border: 1px solid #ddd;
}

zg-caption {
 	background: #ffffff;
  color: #222222;
  padding: 0px 15px;
  font-size: 18px;
}

zg-head {
	letter-spacing: .5px;
  padding-left: 1px;
}


zg-head, zg-head-cell {
	font-size: 10px;
  align-items: middle;
  color: #888888;
}

zg-cell {
  margin-right: 0px;
}

zg-head-cell:first-child,
zg-cell:first-child {
  border-left: 0px solid white;
}

zg-icon {
 	max-width: 14px; 
}

zg-row, zg-cell {
 padding: 0 10px; 
  height: 35px;
}

zg-cell:nth-child(1) img {
	vertical-align: middle;
}

zg-cell:nth-child(1) span {
	vertical-align: middle;
}

.user--avatar { 
  width: 20px; 
  margin-right: 7px;
}

.recent {
  color: #69B668;
}

.unknown {
  color: #ACAAAE;
}

zg-filter input {
  margin-left: 7px;
}

JS

var MINUTE = 1000 * 60;
var HOUR = 1000 * 60 *60;
var DAY = 1000 * 60 *60 * 24;
var WEEK = DAY * 7;
var MONTH = DAY * 30;
function renderLastSeen(value) {
  if (value >= MONTH) {
    return `${parseInt(value/MONTH)} months ago`;
  } else if (value >= WEEK) {
    return `${parseInt(value/WEEK)} weeks ago`;
  } else if (value >= DAY) {
    return `${parseInt(value/DAY)} days ago`;
  } else if (value >= HOUR) {
    return `${parseInt(value/HOUR)} hours ago`;
  } else if (value >= MINUTE) {
    return `${parseInt(value/MINUTE)} minutes ago`;
  } else if (value < MINUTE) {
    return `Just now`;
  }
}

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