JSFiddle - React, Tailwind, and code Playground

by Spreadsheet Online

HTML

<script src="https://jspreadsheet.com/v8/jspreadsheet.js"></script>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v8/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />
 
<div id="spreadsheet"></div>

<textarea id='console' style='width:100%;height:80px;'></textarea>

<script>
var data = [
    ['United States', 'Apples', 'Yes', '2019-02-12'],
    ['Canada', 'Carrots', 'Yes', '2019-03-01'],
    ['UK', 'Oranges', 'No', '2018-11-10'],
    ['Brazil', 'Coconuts', 'Yes', '2019-01-12'],
];
 
jspreadsheet.license = 'ZmUwZTZiNDMyMmIxNzQxZDJjOThhNTlhMjdlMWY5NDQyOTY0OGZhMGE0ZmJhN2ZmNmIwMzcxYjQ3ODBlY2EzYTU3YTQ1YjJhZDJhM2Q4YTE2MjY5NzQ0ZDJmZGJhZGRlMDlkYjEwY2ViMDVkOTVkZjk2NTdkYzkxZjBjYzc1ZmEsZXlKdVlXMWxJam9pY0dGMWJDNW9iMlJsYkNJc0ltUmhkR1VpT2pFMk5qQTFNVGd3TURBc0ltUnZiV0ZwYmlJNld5SnFjM0J5WldGa2MyaGxaWFF1WTI5dElpd2lZM05pTG1Gd2NDSXNJbXB6YUdWc2JDNXVaWFFpTENKc2IyTmhiR2h2YzNRaVhTd2ljR3hoYmlJNklqTWlMQ0p6WTI5d1pTSTZXeUoyTnlJc0luWTRJaXdpY0dGeWMyVnlJaXdpYzJobFpYUnpJaXdpWm05eWJYTWlMQ0p5Wlc1a1pYSWlMQ0ptYjNKdGRXeGhJbDE5';

 
var table = jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        data:data,
        columns: [
            { type: 'text', title: 'Product Origin', width: '300px' },
            { type: 'text', title: 'Description', width: '200px' },
            { type: 'dropdown', title: 'Stock', width: '100px', source: ['No','Yes'] },
            { type: 'calendar', title: 'Best before', width: '100px' },
        ],
        meta:{
            A1: { myMeta: 'this is just a test', otherMetaInformation: 'other test' },
            A2: { info: 'test' }
        },
    }]
});
</script>
 
<button type="button" onclick="table[0].setMeta({ C1: { id:'1', y:'2019' }, C2: { id:'2' } });">Set meta data for multiple columns</button>
<button type="button" onclick="table[0].setMeta('B2', 'myMetaData', prompt('myMetaData:'));">Set a meta...