Open Source Licenses
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
Full
HTML
CSS
JS
Edit
Download
Open Source Licenses approved by the Open Source Initiative
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>
<!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 src="https://cdn.zinggrid.com/zinggrid.min.js"></script> </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> </body> </html>
.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; }
// 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); });
Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!