Nobel Prize Winners

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid: REST API</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    zing-grid[loading] {
      min-height: 400px;
    }

    button {
      text-align: center;
      background: #07C;
      color: #FFF;
      cursor: pointer;
      border-radius: 3px;
      border-color: transparent;
      font-size: 0.85rem;
      padding: 5px 20px;
      cursor: pointer;
      margin: 15px 0 15px 15px;
      position: relative;
    }

    button:hover {
      background: #1b6ead;
    }

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

<body>
  <zing-grid pager page-size="5" search>
    <zg-caption>
      Nobel Prize Winners
      <button onClick="getGridData();">Get Data</button>
    </zg-caption>
    <zg-data>
      <!-- define the main source for the API -->
      <zg-param name="src" value="https://storage.googleapis.com/zinggrid-pwa.appspot.com/nobel-prize-winners.json"></zg-param>

      <!-- define the path in the JSON to get the array of results. 
            In this case it is body.results -->
      <zg-param name="recordPath" value="prizes"></zg-param>
    </zg-data>
    <zg-colgroup>
      <zg-column index="year"></zg-column>
      <zg-column index="category"></zg-column>
      <zg-column index="laureates" renderer="renderLaureates">
        <ul>
        </ul>
      </zg-column>
    </zg-colgroup>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);

    function renderLaureates(laureates, $cell) {
      let stringHtml = '';
      laureates.forEach(entry => {
        stringHtml += `
			<li>${entry.firstname} ${entry.surname}</li>
		`;
      });

      return stringHtml;
    }

    function getGridData() {
      const zgRef = document.querySelector('zing-grid');
      const gridData = zgRef.getData({
        csv: true,
        headers: true
      });
      console.log('--- Getting Data From Grid: ---', gridData);
      alert('Check console for exported data!');
    }
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid: REST API</title>
  <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
</head>

<body>
  <zing-grid pager page-size="5" search>
    <zg-caption>
      Nobel Prize Winners
      <button onClick="getGridData();">Get Data</button>
    </zg-caption>
    <zg-data>
      <!-- define the main source for the API -->
      <zg-param name="src" value="https://storage.googleapis.com/zinggrid-pwa.appspot.com/nobel-prize-winners.json"></zg-param>

      <!-- define the path in the JSON to get the array of results. 
            In this case it is body.results -->
      <zg-param name="recordPath" value="prizes"></zg-param>
    </zg-data>
    <zg-colgroup>
      <zg-column index="year"></zg-column>
      <zg-column index="category"></zg-column>
      <zg-column index="laureates" renderer="renderLaureates">
        <ul>
        </ul>
      </zg-column>
    </zg-colgroup>
  </zing-grid>
</body>

</html>

zing-grid[loading] {
  min-height: 400px;
}

button {
  text-align: center;
  background: #07C;
  color: #FFF;
  cursor: pointer;
  border-radius: 3px;
  border-color: transparent;
  font-size: 0.85rem;
  padding: 5px 20px;
  cursor: pointer;
  margin: 15px 0 15px 15px;
  position: relative;
}

button:hover {
  background: #1b6ead;
}

function renderLaureates(laureates, $cell) {
  let stringHtml = '';
  laureates.forEach(entry => {
    stringHtml += `
			<li>${entry.firstname} ${entry.surname}</li>
		`;
  });

  return stringHtml;
}

function getGridData() {
  const zgRef = document.querySelector('zing-grid');
  const gridData = zgRef.getData({
    csv: true,
    headers: true
  });
  console.log('--- Getting Data From Grid: ---', gridData);
  alert('Check console for exported data!');
}