JSFiddle - React, Tailwind, and code Playground

by Aman Middha

HTML

<div id="dvSpreadSheetWindow" class="SpreadSheetWindow"></div>

CSS

</style><!-- Ugly Hack due to jsFiddle issue --> 
<script src="https://handsontable.com/static/bower_components/handsontable-pro/dist/handsontable.full.js"></script>
<link type="text/css" rel="stylesheet" href="https://handsontable.com/static/bower_components/handsontable-pro/dist/handsontable.full.css">

<style type="text/css">
body {background: white; margin: 20px;}
h2 {margin: 20px 0;}

JavaScript

var $container = $("#dvSpreadSheetWindow");
     var $parent = $container.parent();
     var data;
     var setColumn = [];
     var hot;
            
     validEmpty = function (value, callback) {
      callback(/^\s*$/.test(value) ? false : true);
      }
            
$container.handsontable({
	 data:data,
    startRows: 16,
    startCols: 4,
    maxCols: 4,
    colWidths: [100, 150, 100, 100],
    rowHeaders: false,
    colHeaders: ["A1", "A2", "A3", "Comments"],
    columns:[{ validator: validEmpty }, { validator: validEmpty }, { validator: validEmpty }, {}],
   currentHeaderClassName: 'currentHeader',
   fillHandle: false,
   contextMenu: false

  });


hot = $('#dvSpreadSheetWindow').handsontable('getInstance');

  hot.addHook('afterChange', function (changes, source) {
         var ele = this;
         var ht = $container.handsontable('getInstance');
         var rowNo, colNo;
         var oldValue, NewValue;
         var errorCount = 0;
         var rowcount = ht.countRows() - ht.countEmptyRows();
         var emptyrowcount = ht.countEmptyRows();
         var colscount = ht.countCols();

                $.each(changes, function (index, element) {
                    rowNo = element[0];
                    colNo = element[1];
                    oldValue = element[2];
                    NewValue = element[3].trim();


                    if (ht.isEmptyRow(rowNo) == true)
                    {
                        alert('Empty Row');
                        $(ele).find('tbody tr:nth-child(2)').css({ 'background': 'white' });
                    }

                });

            });