Handsontable example

HTML

<script src="https://docs.handsontable.com/pro/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link rel="stylesheet" href="https://docs.handsontable.com/pro/bower_components/handsontable-pro/dist/handsontable.full.min.css">
<div id="example1"></div>
<div class="pages"></div>

CSS

body {
  padding: 0;
  margin: 0;
  background: #fff;
  font: 0.9em Helvetica;
}

#example1 {
  border-bottom: 2px solid #C51162;
  background: #eee;
}

.pages {
  margin-top: 15px;
  float: right;
}

.myBt {
  background: #fff;
  color: #333;
  width: 30px;
  font: 1em Helvetica;
  font-weight: bold; //border: 2px solid #B2EBF2;
  border: 0;
  border-radius: 50%;
  margin: 1px;
  padding: 5px;
  text-align: center;
}

.myBt:focus {
  background: #C51162;
  color: #fff;
  border: 0;
  outline: 0;
}

JavaScript

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

  var
    container = document.getElementById('example1'),
    hot;
  var data = [
    ['Accra', 'Ghana', 26, true],
    ['Addis Ababa', 'Ethiopia', 19, false],
    ['Adelaide', 'Australia', 19, true],
    ['Algiers', 'Algeria', 16, true],
    ['Almaty', 'Kazakhstan', -8, false],
    ['Amman', 'Jordan', 17, false],
    ['Amsterdam', 'Netherlands', 5, false],
    ['Anadyr', 'Russia', -16, false],
    ['Anchorage', 'United States', -7, true],
    ['Ankara', 'Turkey', 13, false],
    ['Asuncion', 'Paraguay', 25, true],
    ['Athens', 'Greece', 16, false],
    ['Atlanta', 'United States', 9, true],
    ['Auckland', 'New Zeland', 14, true],
    ['Bangkok', 'Thailand', 28, true],
    ['Barcelona', 'Spain', 15, false],
    ['Beijing', 'China', 1, false],
    ['Beirut', 'Lebanon', 22, false],
    ['Belgrade', 'Serbia', 4, false],
    ['Bengaluru', 'India', 28, false],
    ['Berlin', 'Germany', 3, true],
    ['Bogota', 'Colombia', 13, false],
    ['Boston', 'United States', 2, true],
    ['Brasilia', 'Brazil', 20, false],
    ['Brisbane', 'Australia', 23, false],
    ['Brussels', 'Brussels', 4, false],
    ['Bucharest', 'Romania', 5, true],
    ['Budapest', 'Hungary', 4, false],
    ['Buenos Aires', 'Argentina', 21, false],
    ['Cairo', 'Egypt', 23, false],
    ['Calgary', 'Canada', -2, true],
    ['Canberra', 'Australia', 12, true],
    ['Cape Town', 'Republic of South Africa', 25, false],
    ['Caracas', 'Venezuela', 29, false],
    ['Casablanca', 'Maroko', 20, false],
    ['Chicago', 'United States', 7, true],
    ['Copenhagen', 'Denmark', 2, true],
    ['Dallas', 'United States', 21, true],
    ['Dar es Salaam', 'Tanzania', 32, true],
    ['Darwin', 'Australia', 27, false],
    ['Denver', 'United States', 1, false],
    ['Detroit', 'United States', 6, true],
    ['Dhaka', 'Bangladesh', 23, false],
    ['Doha', 'Qatar', 25, true],
    ['Dubai', 'United Arab Emirates', 27, true],
    ['Dublin', 'Ireland', 7,...