JSFiddle - React, Tailwind, and code Playground

by ysuper

HTML

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/1.5.7/js/jquery.jexcel.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/1.5.7/js/excel-formula.min.js"></script> -->
<script src="https://bossanova.uk/components/jexcel/dist/js/excel-formula.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jexcel/1.5.7/css/jquery.jexcel.min.css" type="text/css" />

<div id="my"></div>

<script>
data = [
    ['BR', 'Cheese', 1, 3.99],
    ['CA', 'Apples', 0, 1.00],
    ['US', 'Carrots', 1, 0.90],
    ['GB', 'Oranges', 0, 1.20],
    ['CH', 'Chocolats', 1, 0.40],
    ['AR', 'Apples', 1, 1.10],
    ['AR', 'Bananas', 1, 0.30],
    ['BR', 'Oranges', 1, 0.95],
    ['BR', 'Pears', 1, 0.90],
    ['', '', '', '=ROUND(SUM(D1:D8), 2)'],
];

$('#my').jexcel({
    data:data,
    colHeaders: ['Country', 'Food', 'Stock', 'Price'],
    colWidths: [ 300, 100, 100, 100 ],
    columns: [
        { type: 'autocomplete', url:'https://bossanova.uk/jexcel/countries' },
        { type: 'autocomplete', source:['Apples','Bananas','Carrots','Oranges','Cheese','Kiwi','Chocolats','Pears'] },
        { type: 'checkbox' },
        { type: 'number' },
    ]
});

$('#my').jexcel('updateSettings', {
    table: function (instance, cell, col, row, val, id) {
        $(cell).css('font-size', '50%');

        // Number formating
        if (col == 3) {
            // Get text
            txt = $(cell).text();
            // Format text
            txt = numeral(txt).format('0,0.00');
            // Update cell value
            $(cell).html(' $ ' + txt);
        }

        // Odd row colours
        if (row % 2) {
            $(cell).css('background-color', '#edf3ff');
        }

        // Remove controls for the last row
        if (row == 9) {
         ...