Handsontable example

by handsoncode

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<div id="example" class="hot1 hot handsontable"></div>

CSS

body {
  background: #ffffff;
  padding: 0;
  margin: 0;
}

th,
td {
  font: 12px sans-serif
}

.handsontable th,
.handsontable td {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

.handsontable THEAD TH.color {
  background: #00B8D4;
  color: #ffffff;
  padding: 10px 0 0 0;
  font-size: 15px;
}

.photo {
  height: 30px;
  border-radius: 50%;
}

.owner {
  font-weight: bold;
  display: block;
  float: right;
  padding: 5px 20px 0 0;
}

.pdf,
.swift,
.java,
.ruby,
.go {
  padding: 3px 3px;
  color: #222222;
  font: 10px;
  float: left;
  width: 131px;
  line-height: 45px;
}

.pdf {
  background: #FFCC80;
  border: 2px solid #FF9800;
}

.swift {
  background: #FFE082;
  border: 2px solid #FFC107;
}

.java {
  background: #FFF59D;
  border: 2px solid #FFEB3B;
  width: 80px;
}

.ruby {
  background: #F4FF81;
  border: 2px solid #C6FF00;
  width: 41px;
}

.go {
  background: #E6EE9C;
  border: 2px solid #CDDC39;
}

.handsontable td.starColumn {
  font-size: 17px;
  text-align: center;
  padding-top: 2%;
  color: #777777;
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {

  var data = [{
        name: '<img src="https://avatars1.githubusercontent.com/u/3771963?v=3&s=460" class="photo"><span class="owner"><a href="https://github.com/jwasham" target="_blank">John Washam</a></span>',
        project: '<a href="https://github.com/jwasham/google-interview-university" target="_blank">Google Interview University</a>',
        technology: '<div class="pdf">PDF</div>',
        stars: '23095'
      },

      {
        name: '<img src="https://avatars1.githubusercontent.com/u/120676?v=3&s=200" class="photo"><span class="owner"><a href="https://github.com/kickstarter" target="_blank">Kickstarter</a></span>',
        project: '<a href="https://github.com/kickstarter/ios-oss" target="_blank">Kickstarter for iOS</a>',
        technology: '<div class="swift">Swift</div>',
        stars: '2285'
      },

      {
        name: '<img src="https://avatars1.githubusercontent.com/u/120676?v=3&s=200" class="photo"><span class="owner"><a href="https://github.com/kickstarter" target="_blank">Kickstarter</a></span>',
        project: '<a href="https://github.com/kickstarter/android-oss" target="_blank">Kickstarter for Android</a>',
        technology: '<div class="java">Java</div><div class="ruby">Ruby</div>',
        stars: '1955'
      },

      {
        name: '<img src="https://avatars1.githubusercontent.com/u/94096?v=3&s=460" class="photo"><span class="owner"><a href="https://github.com/cloudson" target="_blank">Claudson Oliveira</a></span>',
        project: '<a href="https://github.com/cloudson/gitql" target="_blank">Gitql</a>',
        technology: '<div class="go">Go</div>',
        stars: '3346'
      },
    ],
    container,
    hot;

  container = document.getElementById('example');
  hot = new Handsontable(container, {
    data: data,
    rowHeights: 50,
    colWidths: [300, 140, 150, 150],
    licenseKey: 'non-commercial-and-evaluation',
    colHeaders: ['Owner', 'Project', 'Github...