Full Code

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

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    .zg-html,
    .zg-body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    .zg-body a {
      color: #04a3f5;
    }

    zg-caption h1 {
      color: #ffffff;
      font-size: 2rem;
    }

    zg-caption p {
      font-size: 1rem;
    }

    zg-head {
      font-size: 1.3rem;
    }

    .zg-menu-h2 {
      margin: 23.904px 0px;
    }

    .zg-menu-hr {
      margin: 9.600px 175.256px;
      border: 0.909px;
    }

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

<body class="zg-body">
  <zing-grid context-menu="mymenu">
    <zg-caption>
      <h1>Chargers Roster (Future) 2018</h1>
      <p>Source: <a href="http://www.chargers.com/team/roster">http://www.chargers.com/team/roster</a></p>
    </zg-caption>

    <zg-menu id="mymenu" replace>
      <h2 class="zg-menu-h2">Wahoo! Custom Menu</h2>
      <img src="https://storage.googleapis.com/zinggrid-pwa.appspot.com/la-chargers-logo.jpg">
      <hr class="zg-menu-hr">
      <a href="https://www.chargers.com/">Chargers Home Page</a>
      <a href="https://www.chargers.com/team/players-roster/">Chargers Roster</a>
      <hr class="zg-menu-hr">
      <a href="https://www.zingchart.com">Return to ZingChart</a>
      <hr class="zg-menu-hr">
      <footer>Should have never left San Diego...</footer>
    </zg-menu>

    <zg-colgroup>
      <zg-column index="num" header="#"></zg-column>
      <zg-column index="first, last" header="Player" renderer="renderPlayerName"></zg-column>
      <zg-column index="col" header="College" renderer="renderCollegeName"></zg-column>
      <zg-column index="feet, inch" header="Height" renderer="renderHeight"></zg-column>
    </zg-colgroup>

    <zg-data data='[{
	      "num": "3",
	      "feet": "6", 
	      "inch": "0",
	      "first": "roberto", 
	      "last": "aguayo", 
	      "col": "florida state"
      }, {
	      "num": "83", 
	      "feet": "6", 
	      "inch": "4",
	      "first": "braedon",
	      "last": "bowman", 
	      "col": "south alabama"
      }, {
	      "num": "67", 
	      "feet": "6", 
	      "inch": "6",
	      "first": "brett",
	      "last": "boyko", 
	      "col": "nevada-las vegas"
      }, {
	      "num": "45", 
	      "feet": "6", 
	      "inch": "0",
	      "first": "A.J",
	      "last": "hendy", 
	      "col": "Maryland"
      }, {
	      "num": "N/A", 
	      "feet": "6", 
	      "inch": "2",
	      "first": "anthony",
	      "last": "kakwa", 
	      "col": "lake eric"
      }, {
	      "num": "49", 
	      "feet": "6", 
	      "inch": "1",
	      "first": "james",
	      "last": "onwualu", 
	      "col": "notre dame"
      }, {
	      "num": "88", 
	      "feet": "6", 
	      "inch": "3",
	      "first": "andre",
	      "last": "patton", 
	      "col": "rutgers"
      }, {
	      "num": "27", 
	      "feet": "6", 
	      "inch": "2",
	      "first": "jeff",
	      "last": "richards", 
	      "col": "emporia state"
      }, {
	      "num": "90", 
	      "feet": "6", 
	      "inch": "4",
	      "first": "whitney",
	      "last": "richardson", 
	      "col": "lane"
      }, {
	      "num": "82", 
	      "feet": "5", 
	      "inch": "10",
	      "first": "artavis",
	      "last": "scott", 
	      "col": "clemson"
      }, {
	      "num": "64", 
	      "feet": "6", 
	      "inch": "5",
	      "first": "cole",
	      "last": "toner", 
	      "col": "harvard"
      }]'></zg-data>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);

    function renderPlayerName(first, last) {
      return first.toUpperCase() + ' ' + last.toUpperCase();
    }

    function renderCollegeName(col) {
      return col.toUpperCase();
    }

    function renderHeight(feet, inch) {
      return feet + '\'' + inch + '\"';
    }
  </script>
</body>

</html>