JSFiddle - React, Tailwind, and code Playground

by gianlu_ursino

HTML

<div id="example"></div>

<script src="
https://cdn.jsdelivr.net/npm/handsontable@14.6.1/dist/handsontable.full.min.js
"></script>
<link href="
https://cdn.jsdelivr.net/npm/handsontable@14.6.1/dist/handsontable.full.min.css
" rel="stylesheet">

TypeScript

const element = document.getElementById('example');
const hot = new Handsontable(element, {
	
  data: [
    [10, 'test', 12, 13, 14, 15],
    [10, 11, 12, 13, 14],
    [10, 11, 12, 13],
    [10, 11, 12],
    [10, 11]
  ],
  nestedHeaders: [
      ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'L', 'M','N'],
      ['Spesa campionata','Tipologia', 'Numero Documento', 'Data Documento', 'Denominazione Fornitore', 'Voce di spesa', 'Importo rendicontato su voce (€)', 'Importo validato su voce (€)', 'Stato Validazione', 'RICHIESTA INTEGRAZIONI SU SINGOLO DOCUMENTO DI SPESA', 'NOTE VALIDAZIONE', 'row_index'],
    ],
  rowHeaders: true,
  colHeaders: true,
  filters: true,
  stretchH: 'none',  // Disable auto stretching of columns to fit container
  width: '100%',
  height: 'auto',
  colWidths:[50,50,50,50,50,50,50,50,50,50,50,50],
  contextMenu: ['hidden_columns_show', 'hidden_columns_hide'],
  formulas: {engine: HyperFormula},
  dropdownMenu: true,
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
  multiColumnSorting: true,
  manualColumnResize: true,
  manualRowResize: true,
  afterChange: (changes: [any, any][], source: string) => {
      changes.forEach(([row, prop]) => {
        const hotInstance = this.hotRegisterer.getInstance(this.id);
        if (prop === 'Importo rendicontato su voce (€)' || prop === 'Importo validato su voce (€)') {
          const rendicontato = hotInstance.getDataAtRowProp(row, 'Importo rendicontato su voce (€)');
          const validato = hotInstance.getDataAtRowProp(row, 'Importo validato su voce (€)');
          console.log( 'prova', rendicontato, validato);
          if (rendicontato == 0 || validato < rendicontato) {
            hotInstance.setDataAtRowProp(row, 'Stato Validazione', 'non validato');
          }if (rendicontato == validato) {
            hotInstance.setDataAtRowProp(row, 'Stato Validazione', 'validato');
          }

        }
      });
    },
    beforeOnCellMouseDown(event,...