Demos Back to Docs

GitHub Issues

42 of 124
The following Github Issues demo demonstrates how easy it is to set up ZingGrid to create, read, update, and delete issues through a few <zg-param> tags. You can view the Github repository for the issues here.
Result Full HTML CSS JS
Edit Download

Example only.

Please fork demo here.

Github Issues Demo + Add Issue ;

Full Code

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

<head>
  <meta charset="utf-8">
  <title>ZingGrid: Github Issues Demo</title>
  <base target="_blank">
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    .zg-body {
      background: #fff;
      position: relative;
    }

    /* Overlay */
    .zg-body #githubIssuesOverlay {
      background-color: #090808ab;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: absolute;
      height: 100%;
      width: 100%;
      z-index: 999;
    }

    .zg-body #githubIssuesOverlay p {
      color: #fff;
      font-family: sans-serif;
      font-size: 1.5rem;
      text-align: center;
    }

    .zg-body #githubIssuesOverlay p a:visited {
      color: rgb(41 180 225);
    }

    /* Button */
    .zg-body .button {
      background: #2B98F0;
      border: none;
      border-radius: 2px;
      color: #fff;
      cursor: pointer;
      height: 33px;
      font-size: .875rem;
      padding: .5rem .625rem;
      text-transform: uppercase;
    }

    .zg-body .button zg-icon {
      display: none;
    }

    .zg-body .button:hover {
      background: #1b6ead;
    }

    /* Comments */
    .zg-body .comment {
      color: #586069;
      fill: #586069;
      text-decoration: none;
    }

    .zg-body .comment:hover,
    .zg-body .title:hover {
      color: #0366d6;
      fill: #0366d6;
    }

    .zg-body .comment--svg {
      position: relative;
      top: 5px;
    }

    /* Status */
    .zg-body .hide {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .zg-body .open,
    .zg-body .closed {
      cursor: pointer;
      min-width: 14px;
    }

    .zg-body .open {
      fill: #28a745;
    }

    .zg-body .closed {
      fill: #cb2431;
    }

    /* Title/Subtitle */
    .zg-body .subtitle {
      color: #586069;
      margin-top: 0.25rem;
      font-size: 0.75rem;
    }

    .zg-body .title {
      font-size: 1rem;
      font-weight: 600;
    }

    /* ZingGrid Overwrites */
    zg-body,
    zg-body zg-row:first-child {
      border-top: 0;
    }

    zg-caption {
      border-bottom: 1px solid #e1e4e8;
      border-radius: .28571429rem .28571429rem 0 0;
    }

    zg-caption .button {
      margin: 15px 0 15px 15px;
    }

    zg-head {
      display: none;
    }

    zing-grid {
      border-radius: .28571429rem;
      border: 1px solid rgba(34, 36, 38, .1);

      --zg-caption-background: #f6f8fa;
      --zg-caption-border-bottom: 0;
      --zg-caption-color: #000;
      --zg-caption-font-size: 0.9rem;
      --zg-caption-font-weight: bold;
      --zg-caption-height: 3.5rem;
      --zg-cell-padding: 0.5rem 1rem;
      --zg-row-background_hover: #F6F8FA;
      --zg-watermark-background: transparent;
      --zg-watermark-border: 0;
      --zing-grid-border: 0;
    }

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

<body class="zg-body">
  <!-- Overlay -->
  <div id="githubIssuesOverlay">
    <p>Example only.</p>
    <p><a href="https://codesandbox.io/p/sandbox/zinggrid-github-issues-357hcd">Please fork demo here.</a></p>
  </div>
  <!-- ZingGrid -->
  <zing-grid editor="modal" height="300" layout="row" layout-controls="disabled">
    <zg-caption>
      Github Issues Demo
      <zg-button class="button" action="createrecord">+ Add Issue</zg-button>
    </zg-caption>
    <zg-card editor-template="editorTemplate"></zg-card>
    <zg-colgroup>
      <zg-column index="state" type="toggle" renderer="renderState" type-toggle-options='["close", "open"]' type-toggle-render-value width="30px"></zg-column>
      <zg-column index="title" hidden></zg-column>
      <zg-column index="title, number, created_at, user" editor="false" renderer="renderTitle" width="30%"></zg-column>
      <zg-column index="body" editor-template="editorTemplate"></zg-column>
      <zg-column index="comments, html_url" editor="false" renderer="renderComment" width="75px"></zg-column>
    </zg-colgroup>
    <zg-data>
      <zg-param name="headers" value='{"Authorization": "token 288483a06d7ca33d9abfaf5cfda1dda99c5c23da"}'></zg-param>;
      <zg-param name="idKey" value="number"></zg-param>
      <zg-param name="src" value="https://api.github.com/repos/zgdemo123/zgtest/issues"></zg-param>
    </zg-data>
  </zing-grid>

  <!-- Editor Template -->
  <template id="editorTemplate">
    <div class="custom-editor">
      <label for="title" style="color:#949494; font-size:12px; margin:0 0 5px 20px;">Title</label>
      <input type="text" name="title" value="[[record.title]]" style="margin-left:20px;">
      <label for="body" style="color:#949494; font-size:12px; margin:20px 0 5px 20px;">Body</label>
      <textarea cols=50 rows=3 onfocus="this.style.border='1px solid rgba(82, 168, 236, .8';" onblur="this.style.border='1px solid var(--theme-border-color)';" style="border:1px solid var(--theme-border-color); color:#000; font-family:Roboto, verdana, sans-serif; font-size:14px; margin-bottom:56px; margin-left:20px; outline:none;">[[record.body]]</textarea>
    </div>
  </template>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    const MONTH = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    window.addEventListener('load', () => {
      let zgRef = document.querySelector('zing-grid');
      zgRef.executeOnLoad(() => {
        // Listener to refresh grid to render newly added row
        zgRef.addEventListener('data:record:insert', () => {
          setTimeout(() => {
            zgRef.refresh();
          }, 0);
        });
      });
    });
    // Render title and subtitle
    // formatCreatedAt(created_at)
    function renderTitle(title, number, created_at, user) {
      return `<div class="title">${title}</div>
  <div class="subtitle">#${number} opened ${ZingGrid.fromNow(created_at)} by ${user.login}`;
    };
    // Render icon for 'state' column
    function renderState(curVal, $cell) {
      const OPEN = '<svg class="open" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"/></svg>';
      const CLOSED = '<svg class="closed" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 10h2v2H7v-2zm2-6H7v5h2V4zm1.5 1.5l-1 1L12 9l4-4.5-1-1L12 7l-1.5-1.5zM8 13.7A5.71 5.71 0 0 1 2.3 8c0-3.14 2.56-5.7 5.7-5.7 1.83 0 3.45.88 4.5 2.2l.92-.92A6.947 6.947 0 0 0 8 1C4.14 1 1 4.14 1 8s3.14 7 7 7 7-3.14 7-7l-1.52 1.52c-.66 2.41-2.86 4.19-5.48 4.19v-.01z"/></svg>';
      if (curVal === 'open') {
        return OPEN;
      } else {
        return CLOSED;
      }
    };
    // Render linked icon for 'comment' column if issue contains comments
    function renderComment(num, url) {
      // Return if no comments to render
      if (num === 0)
        return;
      // Render with clickable icon that links to comment
      return `<a class="comment" href="${url}">
    <svg class="comment--svg" width="16" height="16" aria-hidden="true">
      <path fill-rule="evenodd" d="M14 1H2c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h2v3.5L7.5 11H14c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1zm0 9H7l-2 2v-2H2V2h12v8z"/>
    </svg>
    <span class="comment--num">${num}</span>
  </a>`;
    };
  </script>
</body>

</html>
<!DOCTYPE html>
<html class="zg-html">
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Github Issues Demo</title>
    <base target="_blank">
    <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
	</head>
  <body class="zg-body">
    <!-- Overlay -->
    <div id="githubIssuesOverlay">
      <p>Example only.</p>
      <p><a href="https://codesandbox.io/p/sandbox/zinggrid-github-issues-357hcd">Please fork demo here.</a></p>
    </div>
    <!-- ZingGrid -->
    <zing-grid editor="modal" height="300" layout="row" layout-controls="disabled">
      <zg-caption>
        Github Issues Demo
        <zg-button class="button" action="createrecord">+ Add Issue</zg-button>
      </zg-caption>
      <zg-card editor-template="editorTemplate"></zg-card>
      <zg-colgroup>
        <zg-column index="state" type="toggle" renderer="renderState" type-toggle-options='["close", "open"]' type-toggle-render-value width="30px"></zg-column>
        <zg-column index="title" hidden></zg-column>
        <zg-column index="title, number, created_at, user" editor="false" renderer="renderTitle" width="30%"></zg-column>
        <zg-column index="body" editor-template="editorTemplate"></zg-column>
        <zg-column index="comments, html_url" editor="false" renderer="renderComment" width="75px"></zg-column>
      </zg-colgroup>
      <zg-data>
        <zg-param name="headers" value='{"Authorization": "token 288483a06d7ca33d9abfaf5cfda1dda99c5c23da"}'></zg-param>;
        <zg-param name="idKey" value="number"></zg-param>
        <zg-param name="src" value="https://api.github.com/repos/zgdemo123/zgtest/issues"></zg-param>
      </zg-data>
    </zing-grid>

    <!-- Editor Template -->
    <template id="editorTemplate">
      <div class="custom-editor">
        <label for="title" style="color:#949494; font-size:12px; margin:0 0 5px 20px;">Title</label>
        <input type="text" name="title" value="[[record.title]]" style="margin-left:20px;">
        <label for="body" style="color:#949494; font-size:12px; margin:20px 0 5px 20px;">Body</label>
        <textarea
          cols=50
          rows=3
          onfocus="this.style.border='1px solid rgba(82, 168, 236, .8';"
          onblur="this.style.border='1px solid var(--theme-border-color)';"
          style="border:1px solid var(--theme-border-color); color:#000; font-family:Roboto, verdana, sans-serif; font-size:14px; margin-bottom:56px; margin-left:20px; outline:none;"
        >[[record.body]]</textarea>
      </div>
    </template>
  </body>
</html>
.zg-body{
  background:#fff;
  position: relative;
}

/* Overlay */
.zg-body #githubIssuesOverlay {
  background-color: #090808ab;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 999;
}

.zg-body #githubIssuesOverlay p {
  color: #fff;
  font-family: sans-serif;
  font-size: 1.5rem;
  text-align: center;
}

.zg-body #githubIssuesOverlay p a:visited {
  color: rgb(41 180 225);
}

/* Button */
.zg-body .button {
  background: #2B98F0;
  border: none;
  border-radius: 2px;
  color: #fff;
  cursor: pointer;
  height: 33px;
  font-size: .875rem;
  padding: .5rem .625rem;
  text-transform: uppercase;
}
.zg-body .button zg-icon {
  display: none;
}
.zg-body .button:hover {
  background: #1b6ead;
}

/* Comments */
.zg-body .comment {
  color: #586069;
  fill: #586069;
  text-decoration: none;
}
.zg-body .comment:hover,
.zg-body .title:hover {
  color: #0366d6;
  fill: #0366d6;
}
.zg-body .comment--svg {
  position:relative;
  top:5px;
}

/* Status */
.zg-body .hide {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.zg-body .open,
.zg-body .closed {  
  cursor: pointer;
  min-width: 14px;
}
.zg-body .open { 
  fill: #28a745;
}
.zg-body .closed { 
  fill: #cb2431;
}

/* Title/Subtitle */
.zg-body .subtitle {
  color: #586069;
  margin-top: 0.25rem;
  font-size: 0.75rem;
}
.zg-body .title {
  font-size: 1rem;
  font-weight: 600;
}

/* ZingGrid Overwrites */
zg-body,
zg-body zg-row:first-child {
  border-top: 0;
}

zg-caption {
  border-bottom: 1px solid #e1e4e8;
  border-radius: .28571429rem .28571429rem 0 0;
}
zg-caption .button {
  margin: 15px 0 15px 15px;
}

zg-head{ 
  display:none; 
}

zing-grid { 
  border-radius: .28571429rem;
  border: 1px solid rgba(34,36,38,.1);

  --zg-caption-background: #f6f8fa;
  --zg-caption-border-bottom: 0;
  --zg-caption-color: #000;
  --zg-caption-font-size: 0.9rem;
  --zg-caption-font-weight: bold;
  --zg-caption-height: 3.5rem;
  --zg-cell-padding: 0.5rem 1rem;
  --zg-row-background_hover: #F6F8FA;
  --zg-watermark-background: transparent;
  --zg-watermark-border: 0;
  --zing-grid-border: 0;
}
const MONTH = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
window.addEventListener('load', () => {
  let zgRef = document.querySelector('zing-grid');
  zgRef.executeOnLoad(() => {
    // Listener to refresh grid to render newly added row
    zgRef.addEventListener('data:record:insert', () => {
      setTimeout(() => {
        zgRef.refresh();
      }, 0);
    });
  });
});
// Render title and subtitle
// formatCreatedAt(created_at)
function renderTitle(title, number, created_at, user) {
  return `<div class="title">${title}</div>
  <div class="subtitle">#${number} opened ${ZingGrid.fromNow(created_at)} by ${user.login}`;
};
// Render icon for 'state' column
function renderState(curVal, $cell) {
  const OPEN = '<svg class="open" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"/></svg>';
  const CLOSED = '<svg class="closed" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 10h2v2H7v-2zm2-6H7v5h2V4zm1.5 1.5l-1 1L12 9l4-4.5-1-1L12 7l-1.5-1.5zM8 13.7A5.71 5.71 0 0 1 2.3 8c0-3.14 2.56-5.7 5.7-5.7 1.83 0 3.45.88 4.5 2.2l.92-.92A6.947 6.947 0 0 0 8 1C4.14 1 1 4.14 1 8s3.14 7 7 7 7-3.14 7-7l-1.52 1.52c-.66 2.41-2.86 4.19-5.48 4.19v-.01z"/></svg>';
  if (curVal === 'open') {
    return OPEN;
  } else {
    return CLOSED;
  }
};
// Render linked icon for 'comment' column if issue contains comments
function renderComment(num, url) {
  // Return if no comments to render
  if (num === 0)
    return;
  // Render with clickable icon that links to comment
  return `<a class="comment" href="${url}">
    <svg class="comment--svg" width="16" height="16" aria-hidden="true">
      <path fill-rule="evenodd" d="M14 1H2c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h2v3.5L7.5 11H14c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1zm0 9H7l-2 2v-2H2V2h12v8z"/>
    </svg>
    <span class="comment--num">${num}</span>
  </a>`;
};

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