JSFiddle - React, Tailwind, and code Playground

by agnesb

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/14.3.0/handsontable.min.js"></script>
<!DOCTYPE HTML>

<html>

  <head>
    <meta charset="utf-8" />
    <!-- CSS -->
    <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.css" /> 

    <!-- JS -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.js"></script>

  </head>

  <body>
    <!-- Handsontable 1 -->
    <fieldset>
      <legend>Handsontable 1</legend>
      <div style="display: flex; flex-direction: row">
        <div id="exampleHOT"></div>
        <div id="exampleHOTformula"></div>
      </div>
    </fieldset>
    
    <!-- Handsontable 2 -->
    <fieldset>
      <legend>Handsontable 2</legend>
      <div style="display: flex; flex-direction: row">
        <div id="exampleHOT2"></div>
        <div id="exampleHOTformula2"></div>
      </div>
    </fieldset>
    
    <input type="file" name="load" onchange='onChooseFile(event, onFileLoad.bind(this))'>
    
    <div style=" margin-top: 20px; height: 400px; background-color: black"></div>
  </body>

</html>

JavaScript

// Reverse a value
var naiveReverse = function(string) {
  return string.split('').reverse().join('');
}

// Define formats
function thousandsFormat(instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.TextRenderer.apply(this, arguments);

  var reverseValue = naiveReverse(Math.floor(value).toString()) // Reverse the input
  var chuncks = reverseValue.match(/.{1,3}/g); // Split each 3rd digit and grep the last group of 1 to 3 digit-s
  var new_value = naiveReverse(chuncks.join(" ")); // Add space each 3rd digit and reverse back the input
  td.innerHTML = new_value
};

const hyperformulaInstance = HyperFormula.buildEmpty({
  // to use an external HyperFormula instance,
  // initialize it with the `'internal-use-in-handsontable'` license key
  licenseKey: 'internal-use-in-handsontable',
});

// HANDSONTABLE 1
const exampleHOT = document.querySelector("#exampleHOT");

const exampleHOTtab = new Handsontable(exampleHOT, {
  data: [
    [1, 2, 3],
    [2, 3, 4],
    [3, 4, 5]
  ],
  type: "numeric", // type of data for the whole table
  className: 'htCenter htMiddle',
  formulas: {
    engine: hyperformulaInstance,
    sheetName: 'exampleHOTtab',
  },
  rowHeaderWidth: 150,
  rowHeights: 30,
  colHeaders: ['Colonne 1', 'Colonne 2', 'Colonne 3'],
  licenseKey: 'non-commercial-and-evaluation'
});

// Second table with formula
const exampleHOTformula = document.querySelector("#exampleHOTformula");

const exampleHOTformulaTab = new Handsontable(exampleHOTformula, {
  data: [
    ["=SUM(exampleHOTtab!A1:exampleHOTtab!C1)", "=A1/3"],
    ["=SUM(exampleHOTtab!A2:exampleHOTtab!C2)", "=A2/3"],
    ["=SUM(exampleHOTtab!A3:exampleHOTtab!C3)", "=A3/3"]
  ],
  type: "numeric", // type of data for the whole table
  className: 'htCenter htMiddle',
  formulas: {
    engine: hyperformulaInstance,
    sheetName: 'exampleHOTformulaTab',
  },
  rowHeights: 30,
  rowHeaders: false,
  colHeaders: ['SUM', 'MEAN'],
  licenseKey:...