Demos Back to Docs

Top Tech Conferences in 2019

75 of 124
Use this demo to navigate through most sought-after tech conferences of 2019. This ZingGrid features with filtering, paging and sorting capabilities.
Result Full HTML CSS JS
Edit Download
[[index.conferenceName]]This dataset is based on Bizzabo Blog's 2019 Tech Conferences: The #1 Tech Events Guide

Full Code

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

<head>
  <meta charset="utf-8">
  <title>ZingGrid: Simple Grid</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    .zg-html,
    .zg-body {
      box-sizing: border-box;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    .zg-body {
      background: url('https://firebasestorage.googleapis.com/v0/b/zinggrid-marketing.appspot.com/o/landing-pages%2Ffront-end-focus-landing-page%2Fgeometry.png?alt=media&token=1a26b9e0-881c-4c45-bff9-6722d1f08942');
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: var(--padding-y);
    }

    zing-grid {
      --theme-color-primary: #589EF8;
      --zg-cell-height: 100px;
      --zg-icon-width: 15px;
      --zg-icon-color: #589EF8;
      --zg-option-list-color: #03375e;
      --zg-select-arrow-color: #ffffff;
      margin: 0 auto;
      max-width: 1100px;
      font-family: 'Nunito Sans', sans-serif;
      font-size: 12px;
      min-height: 800px;
      text-align: left;
      line-height: 1.4;
    }

    zing-grid strong {
      color: 143947;
    }

    zg-caption {
      background: #143947;
      color: #ffffff;
      text-align: center;
      font-weight: bold;
      padding-top: 5px;
    }

    zg-head-cell {
      font-size: 12px;
      font-weight: bold;
      color: #143947;
    }

    zg-control-bar {
      background: #143947;
    }

    zg-body a {
      text-decoration: none;
      font-weight: bold;
      color: #589EF8;
    }

    zg-body a:hover {
      color: #dc1257;
    }

    [viewport="tablet-portrait"] zg-body[layout="card"] {
      --zg-card-columns: 33.33%;
    }

    zg-body[layout="card"] zg-cell:nth-child(2) {
      padding-top: 15px;
      padding-bottom: 15px;
      min-height: 200px;
    }

    zg-pager,
    zg-footer,
    zg-source,
    zg-watermark {
      background: #143947;
      color: #ffffff;
    }

    zg-source {
      padding: 20px;
      text-align: center;
      letter-spacing: .05em;
      font-size: 12px;
    }

    zg-footer a {
      font-weight: bold;
      text-decoration: none;
      color: #589EF8;
    }

    zg-footer a:hover {
      color: #dc1257;
    }

    .zg-body .category {
      font-size: 11px;
      border: 1px solid #589EF8;
      background: #589EF8;
      padding: 5px 5px;
      margin: 10px 5px;
      white-space: nowrap;
      text-decoration: none;
      color: #ffffff;
      cursor: pointer;
      font-weight: bold;
    }

    .zg-body .category:hover {
      background: #dc1257;
      border: 1px solid #dc1257;
    }

    /* MEDIA QUERIES (MIN)
--------------------------- */

    @media screen and (min-width:768px) {
      :root {
        --padding-y: 3.125rem;
      }
    }

    /* MEDIA QUERIES (MAX)
--------------------------- */

    @media screen and (max-width:767px) {
      :root {
        --padding-y: 2rem;
      }
    }

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

<body class="zg-body">
  <zing-grid caption="Top Tech Conferences in 2019" layout="row" layout-controls="disabled" pager page-size="5" sort filter src="https://zinggrid-examples.firebaseio.com/2019-tech-conferences">
    <zg-colgroup>
      <zg-column index="conferenceName">
        <strong>[[index.conferenceName]]</strong>
      </zg-column>
      <zg-column index="description" width="400"></zg-column>
      <zg-column index="location"></zg-column>
      <zg-column index="startDate" type="date"></zg-column>
      <zg-column index="url" type="url" header="Website" filter="disabled" sort="disabled">
        <template>
            <a href="[[index.url]]" target="_blank" crossorigin>View <i class="fas fa-external-link-alt"></i></a>
          </template>
      </zg-column>
      <zg-column index="categories" renderer="renderCat"></zg-column>
    </zg-colgroup>
    <zg-source>
      This dataset is based on Bizzabo Blog's <a href="https://blog.bizzabo.com/technology-events" target="_blank" crossorigin>2019 Tech Conferences: The #1 Tech Events Guide</a>
    </zg-source>
  </zing-grid>
  <script>
    // VARS
    // ----------------------------------
    const zgRef = document.querySelector('zing-grid')
    const buttonEl = document.createElement('span');
    let button;

    // RENDERERS
    // ----------------------------------
    // CATEGORIES
    function renderCat(val) {
      // For each cell value, create a button and add to wrapper
      const wrapEl = document.createElement('div');
      val.forEach(v => createButton(v, wrapEl));
      // Render button wrapper
      return wrapEl;
    }

    // CREATE BUTTON
    // ----------------------------------
    function createButton(value, ref) {
      // Clone new button instance
      button = buttonEl.cloneNode(true);
      // Add CSS class
      button.classList.add('category');
      // Add button value text
      button.textContent = value;
      // Add button click event listener
      button.addEventListener('click', e => zgRef.filterColumn('categories', value));
      // Add new button to button wrapper
      ref.appendChild(button);
    }
  </script>
</body>

</html>
<!DOCTYPE html>
<html class="zg-html">
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Simple Grid</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  </head>
  <body class="zg-body">
    <zing-grid
      caption="Top Tech Conferences in 2019"
      layout="row"
      layout-controls="disabled"
      pager
      page-size="5"
      sort
      filter
      src="https://zinggrid-examples.firebaseio.com/2019-tech-conferences">
      <zg-colgroup>
        <zg-column index="conferenceName">
          <strong>[[index.conferenceName]]</strong>
        </zg-column>
        <zg-column index="description" width="400"></zg-column>
        <zg-column index="location"></zg-column>
        <zg-column index="startDate" type="date"></zg-column>
        <zg-column index="url" type="url" header="Website" filter="disabled" sort="disabled">
          <template>
            <a href="[[index.url]]" target="_blank" crossorigin>View <i class="fas fa-external-link-alt"></i></a>
          </template>
        </zg-column>
        <zg-column index="categories" renderer="renderCat"></zg-column>
      </zg-colgroup>
      <zg-source>
        This dataset is based on Bizzabo Blog's <a href="https://blog.bizzabo.com/technology-events" target="_blank" crossorigin>2019 Tech Conferences: The #1 Tech Events Guide</a>  
      </zg-source>
    </zing-grid>
  </body>
</html>
.zg-html, .zg-body {
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  padding: 0;
}
.zg-body {
  background: url('https://firebasestorage.googleapis.com/v0/b/zinggrid-marketing.appspot.com/o/landing-pages%2Ffront-end-focus-landing-page%2Fgeometry.png?alt=media&token=1a26b9e0-881c-4c45-bff9-6722d1f08942');
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
	padding: var(--padding-y);
}

zing-grid {
  --theme-color-primary: #589EF8;
	--zg-cell-height: 100px;
  --zg-icon-width: 15px;
  --zg-icon-color: #589EF8;
  --zg-option-list-color: #03375e;
  --zg-select-arrow-color: #ffffff;

	margin: 0 auto;
  max-width: 1100px;
	font-family: 'Nunito Sans', sans-serif;
	font-size: 12px;
  min-height: 800px;
	text-align: left;
  line-height: 1.4;
}


zing-grid strong {
  color: 143947;
}
zg-caption {
  background: #143947;
  color: #ffffff;
  text-align: center;
  font-weight: bold;
  padding-top: 5px;
}
zg-head-cell {
	font-size: 12px;
  font-weight: bold;
  color: #143947;
}
zg-control-bar {
 	background: #143947; 
}
zg-body a {
  text-decoration: none;
  font-weight: bold;
  color: #589EF8;
}
zg-body a:hover {
  color: #dc1257;
}
[viewport="tablet-portrait"] zg-body[layout="card"] {
  --zg-card-columns: 33.33%;
}
zg-body[layout="card"] zg-cell:nth-child(2) {
  padding-top: 15px;
  padding-bottom: 15px;
  min-height: 200px;
}
zg-pager,
zg-footer,
zg-source,
zg-watermark {
  background: #143947;
  color: #ffffff;
}

zg-source {
  padding: 20px;
  text-align: center;
  letter-spacing: .05em;
  font-size: 12px;
}

zg-footer a {
 font-weight: bold;
  text-decoration: none;
  color: #589EF8;
}
zg-footer a:hover {
  color: #dc1257;
}
.zg-body .category {
  font-size: 11px;
  border: 1px solid #589EF8;
  background: #589EF8;
  padding: 5px 5px;
  margin: 10px 5px;
  white-space: nowrap;
  text-decoration: none;
  color: #ffffff;
  cursor: pointer;
  font-weight: bold;
}
.zg-body .category:hover {
  background: #dc1257;
  border: 1px solid #dc1257;
}


/* MEDIA QUERIES (MIN)
--------------------------- */

@media screen and (min-width:768px) {
  :root {
    --padding-y: 3.125rem;
  }
}


/* MEDIA QUERIES (MAX)
--------------------------- */

@media screen and (max-width:767px) {
  :root {
    --padding-y: 2rem;
  }
}
// VARS
// ----------------------------------
const zgRef = document.querySelector('zing-grid')
const buttonEl = document.createElement('span');
let button;

// RENDERERS
// ----------------------------------
// CATEGORIES
function renderCat(val) {
  // For each cell value, create a button and add to wrapper
  const wrapEl = document.createElement('div');
  val.forEach(v => createButton(v, wrapEl) );
  // Render button wrapper
  return wrapEl;
}

// CREATE BUTTON
// ----------------------------------
function createButton(value, ref) {
  // Clone new button instance
  button = buttonEl.cloneNode(true);
  // Add CSS class
  button.classList.add('category');
  // Add button value text
  button.textContent = value;
  // Add button click event listener
  button.addEventListener('click', e => zgRef.filterColumn('categories', value));
  // Add new button to button wrapper
  ref.appendChild(button);
}

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

Demo Gallery