JSFiddle - React, Tailwind, and code Playground

by phaas

HTML

<link rel="stylesheet" href="https://docs.handsontable.com/0.24.2/bower_components/handsontable/dist/handsontable.full.min.css">
<script src="https://docs.handsontable.com/0.24.2/bower_components/handsontable/dist/handsontable.full.min.js"></script>
<div id="freight">
</div>

JavaScript

var container = document.getElementById('freight');

var data = [[]];

var hot = new Handsontable(container, {
  data: data,
  colHeaders: ["Pieces", "Pkg", "Weight", "Volume", "L", "W", "H", "DG", "Description"],
  rowHeaders: false,
  columnSorting: true,
  contextMenu: true,
  autoWrapRow: true,
  columns: [
    {data: 0, type: 'numeric', width: 80},
    {data: 1, type: 'text', width: 40},
    {data: 2, type: 'numeric', width: 80},
    {data: 3, type: 'numeric', width: 80},
    {data: 4, type: 'numeric', width: 30},
    {data: 5, type: 'numeric', width: 30},
    {data: 6, type: 'numeric', width: 30},
    {data: 7, type: 'text', width: 30},
    {data: 8, type: 'text', width: 80},
  ],
  cells: function (row, col, prop) {
    var cellProperties = {};
    cellProperties.className = '';
    return cellProperties;
  }
});