Handsontable example

by Camille Bechayda

HTML

<div id="example1" class="hot htRemoveRow handsontable htRowHeaders htColumnHeaders ht__selection--rows"></div>

CSS

/**
 * Handsontable RemoveRow extension.
 */
.handsontable.htRemoveRow th.htRemoveRow {
  text-align: center;
}

.handsontable.htRemoveRow tr:first-child th.htRemoveRow {
  border-top: 1px solid #CCC;
}

.handsontable.htRemoveRow th.htRemoveRow .removeRowBtn {
  background-color: #BBB;
  border-radius: 9px;
  padding: 0 6px 0 6px;
  color: #FFF;
  cursor: pointer;
  font-size: 11px;
  font-weight: bold;
  display: none;
  margin: 0 auto;
  width: 10px;
}

.handsontable.htRemoveRow th.htRemoveRow .removeRowBtn:hover {
  background-color: #777;
}


</style><!-- Ugly Hack due to jsFiddle issue -->

<script src="https://docs.handsontable.com/0.34.5/bower_components/handsontable/dist/handsontable.full.js"></script>
<link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/0.34.5/bower_components/handsontable/dist/handsontable.full.min.css">

JavaScript

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

  function removeRow() {
    var eventManager = new Handsontable.EventManager(this);
  
    function bindMouseEvents() {
      var instance = this;
  
      eventManager.addEventListener(instance.rootElement, 'mouseover', function(e) {
        if (checkRowHeader(e.target)) {
          var element = getElementFromTargetElement(e.target);
  
          if (element) {
            var btn = getButton(element);
  
            if (btn) {
              btn.style.display = 'block';
            }
          }
        }
      });
  
      eventManager.addEventListener(instance.rootElement, 'mouseout', function(e) {
        if (checkRowHeader(e.target)) {
          var element = getElementFromTargetElement(e.target);
  
          if (element) {
            var btn = getButton(element);
  
            if (btn) {
              btn.style.display = 'none';
            }
          }
        }
      });
    }
  
    var getElementFromTargetElement = function(element) {
      if (element.tagName != 'TABLE') {
        if (element.tagName == 'TH' || element.tagName == 'TD') {
          return element;
        } else {
          return getElementFromTargetElement(element.parentNode);
        }
      }
  
      return null;
    };
  
    var checkRowHeader = function(element) {
      if (element.tagName != 'BODY') {
        if (element.parentNode.tagName == 'TBODY') {
          return true;
        } else {
          element = element.parentNode;
  
          return checkRowHeader(element);
        }
      }
  
      return false;
    };
  
    function unbindMouseEvents() {
      eventManager.clear();
    }
  
    function getButton(td) {
      var btn = td.querySelector('.removeRowBtn');
  
      if (!btn) {
        var parent = td.parentNode.querySelector('th.htRemoveRow');
  
        if (parent) {
          btn = parent.querySelector('.removeRowBtn');
        }
      }
  
      return btn;
    }
  
    this.init =...