JSFiddle - React, Tailwind, and code Playground

by Hassan Rehman

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://docs.handsontable.com/0.20.3/bower_components/handsontable/dist/handsontable.full.js"></script>
<link rel="stylesheet" href="https://docs.handsontable.com/0.20.3/bower_components/handsontable/dist/handsontable.full.min.css">
<div id='edit-portfolio-container' style='height: 100%; width: 100%; overflow:hidden;'></div>

JavaScript

(function() {


Handsontable.renderers.EstimateStyler = function(instance, td, row, col, prop, value, cellProperties) {
  return $(td).css("color", "pink");
};

Handsontable.renderers.Float2DPRenderer = function(instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.NumericRenderer.apply(this, arguments)
  updatedValue = parseFloat(value)
  if( isNaN(updatedValue) ) {
  	$(td).html(null)
  }
  else {
    $(td).html(updatedValue.toFixed(2) + "%")
  }
}

EstimateRenderer = function(instance, td, row, col, prop, value, cellProperties) {
  if( !instance.estimated_data ){
    currentData = instance.getData();
    totalCols = instance.countCols();
  	for( var c = totalCols - 2 ; c >= 0 ; c-- ) {
      for( var r = 0 ; r < instance.countRows() ; r++ ) {
        prev_value = parseFloat(currentData[r][c + 1])
        if( !isNaN(prev_value) ) {
          currentData[r][c] = prev_value * 10;
        }
      }
    }
    instance.estimated_data = currentData;
  }
  if( instance.getDataAtCell(row, col) ) {
  	Handsontable.renderers.Float2DPRenderer.apply(this, arguments);
  }
  else {
    est_value = instance.estimated_data[row][col];
    args = [instance, td, row, col, prop, est_value, cellProperties];
    Handsontable.renderers.Float2DPRenderer.apply(this, args);
    Handsontable.renderers.EstimateStyler.apply(this, args);
  }
};

headers = [Mar 17", "Feb 17", "Jan 17", "Dec 16", "Nov 16", "Oct 16", "Sep 16", "Aug 16", "Jul 16", "Jun 16", "May 16", "Apr 16", "Mar 16", "Feb 16", "Jan 16"];
rowHeaders = ["One", "Two", "Three", "Four"];
headers.unshift("Target")
renderers = $.map(headers, function(){ return {renderer: EstimateRenderer } })
$('#edit-portfolio-container').handsontable({
  rowHeaders: rowHeaders,
  colHeaders: headers,
  columns: renderers,
  maxCols: headers.length,
  maxRows: rowHeaders.length,
  colWidths: 72,
  fixedRowsTop: 0,
  fixedColumnsLeft: 1,
  maxRows: rowHeaders.length,
  beforeChangeRender: function(){
  	this.estimated_data...