JSFiddle - React, Tailwind, and code Playground

HTML

<div id="example" style="width: 100%;"></div>

CSS

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

JavaScript

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

					var data = [
						    ['158529','01-Aug','John Smith','Brand1','YYYY','1',47.99,39.99,20.66,19.34,5.30,3.27,29.23,10.76,26.92,'Shop'],
						    ['256321','02-Aug','Mel Turner','Brand2','XXXX','1',24.99,21.69,18.23,13.62,4.30,1.99,21.25,8.29,23.12,'Shop'],
					];

					var container = document.getElementById('example');

					var hot = new Handsontable(container, {
						data: data,
						stretchH: "all",
						rowHeaders: true,
						colHeaders: true,
						filters: true,
						dropdownMenu: true,
						formulas: true,
						colHeaders: [ 'Order No', 'Order Date', 'Customer Name', 'Supplier', 'Product', 'Qty', 'Gross Price', 'Net', 'Net Trade', 'Gross Profit', 'Delivery Cost', 'Fees', 'Total Cost', 'Net Profit', '% Profit', 'Order Source'],


					});


					setter = false;
          
          window.setInterval(function(){
            setter = false;
            console.log( setter );
          }, 1000);
          
					hot.addHook('afterChange', function(changes, src) {
          
						
						if (!setter) {
            
							setter = true;

								changedRowStartingZero = changes[0][0];
								changedRow = changedRowStartingZero;

								console.log( '-------' );

								var currentRow = changedRow;

								var net = parseFloat( hot.getDataAtCell( currentRow, 7 ) ).toFixed(2);
								var netTrade = parseFloat( hot.getDataAtCell( currentRow, 8 ) ).toFixed(2);
								var deliveryCost = parseFloat( hot.getDataAtCell( currentRow, 10 ) ).toFixed(2);
								var fees = parseFloat( hot.getDataAtCell( currentRow, 11 ) ).toFixed(2);
								var totalCost = parseFloat( netTrade + deliveryCost + fees ).toFixed(2);
								var netProfit = parseFloat( net - totalCost ).toFixed(2);
								var percentProfit = parseFloat( netProfit / net ).toFixed(2);

								// Set the new cell values

								hot.setDataAtCell( currentRow, 12, totalCost );
								hot.setDataAtCell( currentRow, 13, netProfit...