Handsontable example

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
<script src="https://fonts.googleapis.com/css?family=Montserrat"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<div id="productionLogTable" class="handsontable htRowHeaders htColumnHeaders ht__selection--columns">
  <div class="ht_master handsontable" style="overflow: visible;">
    <div class="wtHolder" style="position: relative; overflow: visible;">
      <div class="wtHider" style="width: 995px; height: 303px;">
        <div class="wtSpreader" style="position: relative; top: 0px; left: 0px;">
          <table class="htCore">
            <colgroup>
              <col class="rowHeader" style="width: 50px;">
              <col style="width: 100px;">
              <col style="width: 100px;">
              <col style="width: 40px;">
              <col style="width: 100px;">
              <col style="width: 100px;">
              <col style="width: 101px;">
              <col style="width: 101px;">
              <col style="width: 101px;">
              <col style="width: 101px;">
              <col style="width: 101px;">
            </colgroup>
           ...

CSS

<style type="text/css">
		#productionLogTable {
			font-size:11px;
			color: black;
			font-weight: bold;
		}
		th.ht_nestingLevels {
			background-color: lightgray;
			font-weight: bold;
		}
		th.ht_nestingLevels.ht_nestingParent {
			color: black;
			font-weight: bold;
			font-size: 12px;
			background-color: white;
		}
		th.ht_nestingParent ~ td {
			font-size: 12px;
			font-weight: bold;
			padding: 5px 0px 10px 10px;
			color: black;
			background-color: white;
		}
		.htCore tbody tr th:not(.ht_nestingParent) ~ td {
			padding: 0;
		}
	</style>

</style>

JavaScript

function handsonTableLoad(url) {
  return new Promise(function(resolve, reject) {
    var request = new XMLHttpRequest();
    request.open('GET', url);
    request.responseType = 'json';
    request.onload = function() {
      if (request.status === 200) {
        resolve(request.response);
      } else {
        reject(Error('Data didn\'t load successfully; error code:' + request.statusText));
      }
    };
    request.onerror = function() {
      reject(Error('There was a network error.'));
    };
    request.send();
  });
}

$(document).ready(function() {
      const container = document.getElementById('productionLogTable');

      handsonTableLoad('scripts/order_status.php?action=fetch_production_data').then(function(response) {
            const hot = new Handsontable(container, {
              data: response,
              colHeaders: ['Enterprise', 'Job Number', 'LN #', 'AS400 Ship', 'Est. Ship', 'Q.C.', 'Thermoforming', 'Vinyl/Paint', 'Final Assm.', 'Crating/Shipping'],
              colWidths: [100, 100, 40, 100, 100, 101, 101, 101, 101, 101, 101],
              columns: [{
                  data: "Enterprise"
                },
                {
                  data: "Job Number",
                  renderer: "numeric"
                },
                {
                  data: "LN #",
                  renderer: "html"
                },
                {
                  data: "AS400 Ship Date",
                  renderer: "date"
                },
                {
                  data: "Est. Ship",
                  renderer: "date"
                },
                {
                  data: "Q.C.",
                  renderer: "html"
                },
                {
                  data: "Thermoforming",
                  renderer: "html"
                },
                {
                  data: "Vinyl/Paint",
                  renderer: "html"
                },
                {
                  data: "Final Assm.",
              ...