JSFiddle - React, Tailwind, and code Playground

by basant_beniwal0704

HTML

<div>
  <div id="example1" class="hot handsontable htRowHeaders htColumnHeaders"></div>
</div>

CSS

</style><script src="https://cdn.jsdelivr.net/npm/handsontable-pro@6.2.2/dist/handsontable.full.min.js"></script><link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable-pro@6.2.2/dist/handsontable.full.min.css">

JavaScript

var example1 = document.getElementById('example1');

var hot = new Handsontable(example1, {
  data: [],
  colHeaders: true,
  rowHeaders: true,
  columnSummary: []
});

hot.updateSettings({
	data: [[]],
			minRows: 10,
            minCols: 26,
            colHeaders: true,
            rowHeaders: true,
            contextMenu: true,
			minSpareRows: 1,
			minSpareCols: 1,
			manualColumnResize: true,
           // formulas: true,
           useFormula:true,
            selectionMode: 'multiple',
			
			afterSelectionEnd: function (r, c, r2, c2) {
				var selected = this.getSelected();
                var cell = [];
                for (var index = 0; index < selected.length; index += 1) {
                    var item = selected[index];
                    var startRow = Math.min(item[0], item[2]);
                    var endRow = Math.max(item[0], item[2]);
                    var startCol = Math.min(item[1], item[3]);
                    var endCol = Math.max(item[1], item[3]);

                    for (var rowIndex = startRow; rowIndex <= endRow; rowIndex += 1) {
                        for (var columnIndex = startCol; columnIndex <= endCol; columnIndex += 1) {
                            firstRow = this.getRowHeader(startRow);
                            firstCol = this.getColHeader(startCol);
                            lastRow = this.getRowHeader(endRow);
                            lastCol = this.getColHeader(endCol);
                            
							if ((startCol === endCol) && (startRow === endRow)) {
									cell.push(firstCol + firstRow);
							} else {
				                cell.push(firstCol + firstRow + ':' + lastCol + lastRow);
                            }
						}
                    }
                }
				
				var filteredCells = cell.filter(function (item, pos) {
					//if(pos > 0){
					   return cell.indexOf(item) === pos;
					//}   
				});
				
                toAdd = filteredCells.join();
				
				if ((toAdd) && (enteredData &&...