Handsontable example

HTML

<div id="productionLogTable"></div>

CSS

</style>

<script src="https://cdn.jsdelivr.net/npm/handsontable@7.4.2/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@7.4.2/dist/handsontable.full.min.css">

JavaScript

const data = [
  ['AM STD 3x6 ID BLUE BKGD FACE||DWG AS090292||', '1', 'A', '22990461', '2020-04-06', '2020-03-11', '5', '', '0000-00-00', '0000-00-00', '0'],
  ['AMOCO 1',
    '9 x4', '4 TOGO SF CTS SGN(NO LEAF)||DWG BP1024SF_LDSV||FACE: BP184910||', '1', 'A', '35522430', '2020-01-21', '2020-01-02', '5', '•1/20-This will be completed 1/21.', '2020-01-21', '2020-01-21', '1'
  ],

];

const container = document.getElementById('productionLogTable');
const hot = new Handsontable(container, {
  data: data,
  colHeaders: ['Description', 'Qty', 'LN #', 'Order Number', 'AS400 Ship Date', 'Date Showed on Report', 'Days to Manufacture', 'Notes', 'Date Shown Completed', 'Actual Ship Date', 'Qty Shipped'],
  colWidths: [300, 70, 70, 110, 110, 90, 90, 300, 90, 90],
  rowHeaders: true,
  headerTooltips: {
    columns: true,
    onlyTrimmed: true
  },
  filters: true,
  dropdownMenu: true,
});