JSFiddle - React, Tailwind, and code Playground

by IshanZ

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.css" /> 
<script src="https://handsontable.com/docs/12.2/scripts/fixer.js"></script>
<div id="example"></div>

JavaScript

var data =[['A1', 'Yes','C1', 'D1', 'E1', '=3+3'], ['A2', 'Should change format','C2', "No", 'E2', 'F2'], ['A3', 'B3','C3', 'D3', 'E3', 'F3']]

  var conditionalFormatting = [
    {
        "ref": "B2",
        "rules": [
            {
                "type": "expression",
                "priority": 3,
                "formulae": [
                    "$B$1=\"Yes\""
                ],
                "style": {
                    "alignment": null,
                    "border": null,
                    "fill": {
                        "type": "pattern",
                        "bgColor": {
                            "argb": "FFFFC7CE"
                        }
                    },
                    "font": {
                        "color": {
                            "argb": "FF9C0006"
                        }
                    },
                    "numFmt": null,
                    "protection": null
                }
            }
        ]
    }
]

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

var hot = new Handsontable(container, {
  data,
  rowHeaders: true,
  colHeaders: true,
  contextMenu: true,
  licenseKey: 'non-commercial-and-evaluation',
  formulas: {
  	engine: HyperFormula
  },
});