JSFiddle - React, Tailwind, and code Playground

by DongJun Park

HTML

<div id="example2" class="hot handsontable htColumnHeaders"></div>

CSS

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.17.0/handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.17.0/handsontable.full.css">

<!-- https://raw.githubusercontent.com/tdjun/Handsontable-addRemoveRow/master/handsontable.removeRow.css -->
<style type="text/css">
.handsontable.htRemoveRow th.htRemoveRow,
.handsontable.htRemoveRow th.htAddRow {
  text-align: center;
  border-right: 0;
}

.handsontable.htRemoveRow th.htRemoveRow .removebtn {
  border-radius: 20px;
  padding: 2px 0 0;
  color: #222;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  margin: 1px 0 0 0;
  width: 20px;
  height: 18px;
}

.handsontable.htRemoveRow th.htAddRow .addbtn {
  border-radius: 20px;
  padding: 2px 0 0;
  color: #222;
  cursor: pointer;
  font-size: 15px;
  font-weight: bold;
  line-height: 1;
  margin: 2px 0 0 4px;
  width: 20px;
  height: 18px;
}

.handsontable.htRemoveRow th.htRemoveRow .removebtn:hover,
.handsontable.htRemoveRow th.htAddRow .addbtn:hover {
  background-color: #777;
  color: #FFF;
}

.handsontable col.rowHeader {
  width: 30px;
}

JavaScript

console.log('start');


  var
    hiddenData = [
      ['', 'Kia', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
      ['2012', 10, 11, 12, 13, 15, 16],
      ['2013', 10, 11, 12, 13, 15, 16],
      ['2014', 10, 11, 12, 13, 15, 16],
      ['2015', 10, 11, 12, 13, 15, 16],
      ['2016', 10, 11, 12, 13, 15, 16]
    ],
    container = document.getElementById('example2'),
    hot2;
setTimeout(function(){
  hot2 = new Handsontable(container, {
    data: hiddenData,
    colHeaders: true,
    removeRowPlugin: true,
	});
},100);
  
/// https://raw.githubusercontent.com/tdjun/Handsontable-addRemoveRow/master/handsontable.removeRow.js
(function (Handsontable) {
  "use strict";
  /**
   * Handsontable RemoveRow plugin. See `demo/buttons.html` for example usage
   * This plugin is not a part of the Handsontable build (to use it, you must load it after loading Handsontable)
   * See `test/removeRowSpec.js` for tests
   */
  function removeRow() {

    var eventManager = 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';
            }
          }
        }
      });

//      instance.rootElement.on('mouseover.removeRow', 'tbody th, tbody td', function () {
//        getButton(this).show();
//      });
//
//     ...