<!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>
<!DOCTYPE html>
<html class="zg-html">
<head>
<meta charset="utf-8">
<title>ZingGrid Demo</title>
<script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
</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>
</body>
</html>
.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;
}
function renderPlayerName(first, last) {
return first.toUpperCase() + ' ' + last.toUpperCase();
}
function renderCollegeName(col) {
return col.toUpperCase();
}
function renderHeight(feet, inch) {
return feet + '\'' + inch + '\"';
}