JSFiddle - React, Tailwind, and code Playground

by Deiussum

HTML

<html>
  <head>
    <link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />
    <link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v4/jexcel.css" type="text/css" />
  </head>
  <body>
    <form>   
      <div>
        <input type="text"/>
      </div>
      <div id="grid">

      </div>
      <div>
        <input type="text"/>
      </div>
    </form>

    <script src="https://jsuites.net/v4/jsuites.js"></script>
    <script src="https://bossanova.uk/jspreadsheet/v4/jexcel.js"></script>
  </body>
</html>

JavaScript

$(function() {
  var settings = {
    allowInsertRow: false,
    allowInsertColumn: false,
    allowDeleteRow: false,
    allowDeleteColumn: false,
    allowRenameColumn: false,
    parseFormulas: false,
    wordWrap: false,
    minDimensions: [4, 2],
    columns: [
      {
        title: 'Column 1',
        type: 'numeric',
        align: 'right',
        mask: '#.00',
        width: 100
      },
      {
        title: 'Column 2',
        type: 'numeric',
        align: 'right',
        mask: '#.00',
        width: 100
      },
      {
        title: 'Column 3',
        type: 'numeric',
        align: 'right',
        mask: '#.00',
        width: 100
      },
      {
        title: 'Column 3',
        type: 'numeric',
        align: 'right',
        mask: '#.00',
        width: 100
      }
    ],
  };
  
  var spreadsheet = $('#grid').jspreadsheet(settings);
});