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'],


					});

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

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

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

								var currentRow = changedRow;

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

								// Set the new cell values

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

						} else {
            	setter = false;
            
            }
					});

});