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;

  hot = new Handsontable(container, {
    data: Handsontable.helper.createSpreadsheetData(500000, 5),
    colHeaders: true,
    stretchH: 'all',
    dropdownMenu: true,
    columnSorting: true,
    sortIndicator: true,
    //filters: true,
    height: 470
  });

  var rowsOnSinglePage = 3500; //can be changed
  var pages = document.querySelector('.pages');

  var newDataSet = hot.getData();

  hot.updateSettings({
    afterColumnSort: function() {
      refreshPaging()
    },
    afterFilter: function() {
      refreshPaging()
    }
  });

  function refreshPaging() {
    newDataSet = hot.getData();
    pages.innerHTML = '';
    createPages(rowsOnSinglePage);
    hot.updateSettings({
      hiddenRows: {
        rows: getArray(1),
        indicators: false
      }
    });
    pages.firstElementChild.focus()
  }

  function createPages(rowsOnSinglePage) {
    var bt, els = Math.ceil(newDataSet.length / rowsOnSinglePage);

    for (var i = 0; i < els; i++) {
      bt = document.createElement('BUTTON');
      bt.className = 'myBt';
      bt.innerHTML = i + 1;
      pages.appendChild(bt);
    }
  };

  createPages(rowsOnSinglePage); //we define how many rows should be on a single page

  pages.addEventListener('click', function(e) {
    var clicked = e.target.innerHTML;
    if (e.taget !== pages) {
      hot.updateSettings({
        hiddenRows: {
          rows: getArray(clicked),
          indicators: false
        }
      })
    }
  });

  function getArray(clicked) {
    var parts = pages.childElementCount;
    var arr = [];

    if (clicked === 1) {
      for (var i = (clicked * rowsOnSinglePage); i < newDataSet.length; i++) {
        arr.push(i);
      }
      return arr;
    } else {
      for (var j = 0; j < (clicked * rowsOnSinglePage) - rowsOnSinglePage; j++) {
        arr.push(j);
      }
      for (var i = (clicked *...