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: 915px;
    }
  </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);
}

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