JSFiddle - React, Tailwind, and code Playground

by Justin Peszleny

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="ui-widget">
  <div id="hotTest">
  </div>
</div>

CSS

.duplicateError {
    background-color: #FF0000 !important;
    color: #FFFFFF !important;
}

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

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

JavaScript

var hot;

$(document).ready(function () {
  var dataObject = [
    {partNumber: 'TEST1'},
    {partNumber: 'TEST2'},
    {partNumber: 'TEST3'}
  ]

  var hotContainer = document.getElementById('hotTest');
  hot = new Handsontable(hotContainer, {
    minSpareRows: 1,
    rowHeaders: true,
    colHeaders: true,
    startRows: 1,
    startCols: 2,
    columns: [
      	{ data: "partNumber" }
    ],    
    colHeaders: [
      'Part Number',
      'Price'
    ],
		className: "htCenter",
    outsideClickDeselects: false,
    afterRemoveRow: function (index, amount) {		
      hot.setCellMeta(0, 0, 'className', 'htCenter duplicateError');
      hot.setCellMeta(1, 0, 'className', 'htCenter duplicateError');
    },     
		contextMenu: {
      items: {
        "remove_row": {
          name: 'Delete selected rows'
        }
      }
    },    
    data: dataObject
  });
  
  hot.setCellMeta(0, 0, 'className', 'htCenter duplicateError');
	hot.setCellMeta(1, 0, 'className', 'htCenter duplicateError');
  
  // Refresh hot.
  hot.render();
});

// Function to remove the duplicate error class from the hot table.
function clearDuplicateError() {
    // Loop through the hot rows.
    for (var i = 0; i < hot.countRows() ; i++) {
        // Loop through the column count.
        for (var x = 0; x < hot.countCols() ; x++) {
            // Get the cell meta.
            var cellMeta = hot.getCellMeta(i, x);
            
          // Remove the duplicateError class from the cell meta.
          var newClass = removeClass(cellMeta.className, 'duplicateError');

          // Remove the duplicateError class.
          hot.setCellMeta(i, x, 'className', newClass);
				}
    } 
    
    // Refresh hot.
    hot.render();
}