JSFiddle - React, Tailwind, and code Playground

by Camille Bechayda

HTML

<script src="http://handsontable.com/dist/jquery.handsontable.full.js"></script>
<link rel="stylesheet" href="http://handsontable.com/dist/jquery.handsontable.full.css">
<input type="button" value="Generate" id="generate"/>
        <div id="dataTableDev" ></div>

JavaScript

$(function(){
 var data = [
            ["Nissan", "2009", "black", "black"],
            ["Nissan", "2006", "blue", "blue"],
            ["Chrysler", "2004", "yellow", "black"],
            ["Volvo", "2012", "white", "gray"]];
        $('#dataTableDev').handsontable({           
            data: data,
            minRows: 5,
            colWidths: [140, 140, 140, 140],           
            minSpareRows: 1,
            autoWrapRow: false,
            colHeaders: false,
            manualColumnResize: true,
            contextMenu: true,
            colHeaders: ["Name", "Year", "Color1", "Color2"]
        });
    $('#generate').on('click', function(){ 
        var rows = $('#dataTableDev').handsontable('countRows');
        for(i = 0; i < rows-1; i++){
            $('#dataTableDev').handsontable('setDataAtCell', i,0, i+1);
        }
    });
});