Full Code

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

<head>
  <meta charset="utf-8">
  <title>Open Source Licenses ZingGrid</title>
  <link href="https://fonts.googleapis.com/css?family=Work+Sans:400,600" rel="stylesheet">
  <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-body {
      background: url('https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/open-source-licenses%2Fgeometry2.png?alt=media&token=a628a8b3-cff4-4d6d-8e85-b0c7f6f4c87c');
      padding: 50px;
    }

    [viewport="mobile"] .zg-body {
      padding: 50px;
    }

    zing-grid {
      font-size: 12px;
      max-width: 900px;
      margin: 0 auto;
      font-family: 'Work Sans', sans-serif;
      color: #00125b;
      --theme-color-primary: #0e1c3a;
      text-align: left;
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 4px 8px 0 rgba(0, 0, 0, 0.09);
      -webkit-box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 4px 8px 0 rgba(0, 0, 0, 0.09);
      -moz-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 4px 8px 0 rgba(0, 0, 0, 0.09);
      border: 10px solid #0e1c3a;
      opacity: 1;
    }

    zing-grid.loading {
      opacity: 0;
      transition: opacity .3s ease-out;
    }

    zg-icon {
      max-width: 15px;
    }

    zg-caption {
      background: #0e1c3a;
      padding-top: 10px;
      padding-bottom: 20px;
    }

    zg-caption h1 {
      font-size: 19px !important;
      font-weight: normal !important;
      margin-bottom: 0 !important;
      color: #ffffff !important;
      text-align: left !important;
    }

    zg-caption a {
      color: #ffffff;
      text-decoration: none;
      font-weight: bold;
    }

    zg-caption a:hover {
      color: #0bcbe5;
    }

    .zg-body .null {
      color: #a5bae2;
    }

    zg-head zg-head-cell {
      font-size: 11px;
    }

    zg-column {
      width: 11%;
    }

    zg-column:first-child {
      font-weight: 600;
    }

    zg-body zg-row {
      height: 100px;
    }

    zg-body zg-cell {
      padding-top: 10px;
      padding-bottom: 10px;
    }

    zing-grid .main-link {
      color: #1041ef;
      text-decoration: none;
    }

    zing-grid i {
      font-size: 12px;
    }

    zing-grid .main-link:hover {
      color: #0bcbe5;
    }

    zing-grid .keyword {
      font-size: 12px;
      padding: 5px;
      margin-bottom: 10px;
      white-space: nowrap;
      text-decoration: none;
      font-weight: bold;
    }

    [viewport="tablet-portrait"] zg-body[layout="card"] {
      --zg-card-columns: 33.33%;
    }

    zing-grid .green {
      color: #ffffff;
      background: #00aa99;
      border: 2px solid #00aa99;
    }

    zing-grid .green:hover {
      border: 2px solid #00aa99;
      color: #00aa99;
      background: none;
    }

    zing-grid .red {
      color: #ffffff;
      background: #fc507e;
      border: 2px solid #fc507e;
    }

    zing-grid .red:hover {
      background: none;
      border: 2px solid #fc507e;
      color: #fc507e;
    }

    zing-grid .grey {
      color: #ffffff;
      background: #c69a1f;
      border: 2px solid #c69a1f;
    }

    zing-grid .grey:hover {
      background: none;
      border: 2px solid #c69a1f;
      color: #c69a1f;
    }

    zg-watermark {
      margin-top: -1px;
    }

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

<body class="zg-body">
  <zing-grid sort filter filter-on="rendered" pager layout-controls="disabled" page-size="5" src="https://zinggrid-examples.firebaseio.com/open-source-licenses" class="loading">
    <zg-caption>
      <h1>Open Source Licenses approved by the <a href="https://opensource.org" target="_blank" cross-origin>Open Source Initiative <i class="fas fa-external-link-alt"></i></a></h1>
    </zg-caption>
    <zg-colgroup>
      <zg-column index="name">
        <strong>[[index.name]]</strong>
      </zg-column>
      <zg-column index="id"></zg-column>
      <zg-column index="identifiers" renderer="renderIdentifiersNull">
        [[index.identifiers.0.identifier]], [[index.identifiers.0.scheme]]
      </zg-column>
      <zg-column type="url" index="links">
        <template>
          <a class="main-link" href="[[index.links.0.url]]" target="_blank" cross-origin>[[index.links.0.note]] <i class="fas fa-external-link-alt"></i></a>
        </template>
      </zg-column>
      <zg-column index="other_names" renderer="renderOtherNamesNull">
        [[index.other_names.0.name]], [[index.other_names.0.note]]
      </zg-column>
      <zg-column index="superseded_by" type="select" renderer="renderSupersededByNull" type-select-options="Apache-2.0, Artistic-2.0, EPL-1.0, ECL-2.0, EFL-2.0, GPL-3.0, LGPL-3.0, LPL-1.02, MPL-2.0, OLS-3.0, RPL-1.5"></zg-column>
      <zg-column index="keywords" type="select" renderer="renderKeyword" type-select-options="OSI-Approved, Permissive, Popular, Copyleft, Special-Purpose, Discouraged, Non-Reusable, Obsolete, Retired, Redundant, Miscellaneous">
        <span class="keyword">[[index.keywords]]</span>
      </zg-column>
    </zg-colgroup>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // Renderer for "Identifiers" for null values
    function renderIdentifiersNull(arrayOfValues) {
      if (arrayOfValues == null) {
        return `<span class="null">N/A</span>`;
      }
      let stringNames = [...arrayOfValues].map(value => {
        return ` ${value.identifier}`;
      });
      return stringNames;
    }
    // Renderer for "Other Names" column for null values
    function renderOtherNamesNull(arrayOfValues) {
      if (arrayOfValues == null) {
        return `<span class="null">N/A</span>`;
      }
      let stringNames = [...arrayOfValues].map(value => {
        return ` ${value.name}`;
      });
      return stringNames;
    }
    // Renderer for "Superseded By" column for null values
    function renderSupersededByNull(value) {
      if (value == null) {
        return `<span class="null">N/A</span>`;
      } else {
        return `${value}`;
      }
    }
    // Renderer for "Keywords" column
    function renderKeyword(value) {
      let mapper = [];
      mapper['copyleft'] = 'green';
      mapper['permissive'] = 'green';
      mapper['popular'] = 'green';
      mapper['osi-approved'] = 'green';
      mapper['special-purpose'] = 'green';
      mapper['international'] = 'green';
      mapper['discouraged'] = 'red';
      mapper['obsolete'] = 'red';
      mapper['retired'] = 'red';
      mapper['non-reusable'] = 'red';
      mapper['redundant'] = 'red';
      mapper['miscellaneous'] = 'grey';
      let str = '';
      for (let i = 0; i < value.length; i++) {
        str += `<a class="keyword ${mapper[value[i]]}" href="https://opensource.org/licenses/category" target="_blank" cross-origin>${value[i]}</a> `;
      }
      return str;
    }
    // window:load event for Javascript to run after HTML
    // because this Javascript is injected into the document head
    window.addEventListener('load', () => {
      // Javascript code to execute after DOM content
    });
    // Custom loading class for CSS handling
    const zgLoaded = document.querySelector('zing-grid');
    zgLoaded.addEventListener('grid:ready', () => {
      setTimeout(() => zgLoaded.classList.remove('loading'), 0);
    });
  </script>
</body>

</html>