Handsontable example

HTML

<script src="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.css" /> 
<script src="https://handsontable.com/docs/scripts/fixer.js"></script>

<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],
    ['Addis Ababa', 'Ethiopia', 19],
    ['Adelaide', 'Australia', 19],
    ['Algiers', 'Algeria', 16],
    ['Almaty', 'Kazakhstan', -8],
    ['Amman', 'Jordan', 17],
    ['Amsterdam', 'Netherlands', 5],
    ['Anadyr', 'Russia', -16],
    ['Anchorage', 'United States', -7],
    ['Ankara', 'Turkey', 13],
    ['Asuncion', 'Paraguay', 25],
    ['Athens', 'Greece', 16],
    ['Atlanta', 'United States', 9],
    ['Auckland', 'New Zeland', 14],
    ['Bangkok', 'Thailand', 28],
    ['Barcelona', 'Spain', 15],
    ['Beijing', 'China', 1],
    ['Beirut', 'Lebanon', 22],
    ['Belgrade', 'Serbia', 4],
    ['Bengaluru', 'India', 28],
    ['Berlin', 'Germany', 3],
    ['Bogota', 'Colombia', 13],
    ['Boston', 'United States', 2],
    ['Brasilia', 'Brazil', 20],
    ['Brisbane', 'Australia', 23],
    ['Brussels', 'Brussels', 4],
    ['Bucharest', 'Romania', 5],
    ['Budapest', 'Hungary', 4],
    ['Buenos Aires', 'Argentina', 21],
    ['Cairo', 'Egypt', 23],
    ['Calgary', 'Canada', -2],
    ['Canberra', 'Australia', 12],
    ['Cape Town', 'Republic of South Africa', 25],
    ['Caracas', 'Venezuela', 29],
    ['Casablanca', 'Maroko', 20],
    ['Chicago', 'United States', 7],
    ['Copenhagen', 'Denmark', 2],
    ['Dallas', 'United States', 21],
    ['Dar es Salaam', 'Tanzania', 32],
    ['Darwin', 'Australia', 27],
    ['Denver', 'United States', 1],
    ['Detroit', 'United States', 6],
    ['Dhaka', 'Bangladesh', 23],
    ['Doha', 'Qatar', 25],
    ['Dubai', 'United Arab Emirates', 27],
    ['Dublin', 'Ireland', 7],
    ['Edmonton', 'Canada', -5],
    ['Frankfurt', 'Germany', 4],
    ['Guatemala City', 'Republic of Guatemala', 14],
    ['Halifax', 'Canada', 0],
    ['Hanoi', 'Vietnam', 18],
    ['Harare', 'Zimbabwe', 17],
    ['Havana', 'Cuba', 15],
    ['Helsinki', 'Finland', -2],
    ['Hong Kong', 'Hong...