Demos Back to Demos

Open Source Licenses

3 of 25

This grid of open source licenses currently approved by the Open Source Initiative features column filtering and sorting, as well as conditionality within individual body cells.

Result HTML CSS JS
Edit Download

Result

HTML

<!DOCTYPE html>
<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 src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
  </head>
  <body>
    <zing-grid
      sort
      filter
      pager
      layout-controls
      page-size="5"
      src="https://zinggrid-examples.firebaseio.com/open-source-licenses">
      <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">
          <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>
        </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>
  </body>
</html>

CSS

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 250px;
}

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;
}

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;
}

.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;
}

JS

function renderIdentifiersNull(arrayOfValues) {
  if(arrayOfValues == null) {
    return `N/A`;
  } 
  let stringNames = [...arrayOfValues].map(value => {
    return ` ${value.identifier}`;
  })
  return stringNames;
}

function renderOtherNamesNull(arrayOfValues) {
  if(arrayOfValues == null) {
    return `N/A`;
  } 
  let stringNames = [...arrayOfValues].map(value => {
    return ` ${value.name}`;
  })
  return stringNames;
}

function renderSupersededByNull(value) {
  if(value == null) {
    return `N/A`;
  } else {
    return `${value}`;
	}
}

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[i]} `
  }
 
  return str;

}

// window.onload 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
});

Interested in this demo? Modify it to your needs in the ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio