Handsontable example

HTML

<div class="handsontable" data-originalstyle="width: 700px; height: 300px; overflow: scroll" id="example1" style="width: 700px; height: 300px; overflow: scroll"></div>

CSS

</style><!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<script src="http://handsontable.com/dist/handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="http://handsontable.com/dist/handsontable.full.css">
<link rel="stylesheet" media="screen" href="http://handsontable.com/demo/css/samples.css?20140331">
<link rel="stylesheet" media="screen" href="http://handsontable.com/demo/css/samples.css?20140331">
<link rel="stylesheet" media="screen" href="http://handsontable.com/demo/css/samples.css?20140331">

<style type="text/css">
body {background: white; margin: 20px;}
h2 {margin: 20px 0;}

JavaScript

$(document).ready(function () {
  var NavDataCache = [
                        { LCN_CODE: "Port\nCall", PILOT_IN_DT: "Pilot-In\nDate", PILOT_IN_TIME: "PilotIn\nTime", ETA_DT: "ETA\nDate", ETA_TIME: "ETA\nTime", ETA_DELAY_TIME: "ETA Delay\nTime", NO_OF_CRANES: "No. of\nCranes", CRANE_PROD: "Crane\nProd", TOTAL_MOVES: "Total\nMoves", WORK_HRS: "Work\nHours", ETD_DT: "ETD\nDate", ETD_TIME: "ETD\nTime", ETD_DELAY_TIME: "ETD Delay\nTime", PILOT_OUT_DT: "Pilot Out\nDate", PILOT_OUT_TIME: "Pilot Out\nTime", PORT_TIME: "Port\nTime", DISTANCE: "Dist-\ance", PLUS_MINUS: "+\n-", BUFFER_DIST: "Buffer\nDist", ACT_DIST: "Actual\nDist", SEA_TIME: "Sea\nTime", SPEED: "Speed", FOC: "FOC", CARGO_COST: "Cargo Cost\nIncrease", PILOT_IN_HRS: "", PILOT_OUT_HRS: "", GMT_TIME_DIFF: "", SEA_TIME_ORG: "" },
                        { LCN_CODE: "JPUKBPT", PILOT_IN_DT: "03-SEP-2014", PILOT_IN_TIME: "0700", ETA_DT: "03-SEP-2014", ETA_TIME: "1000", ETA_DELAY_TIME: "0000", NO_OF_CRANES: 4, CRANE_PROD: 30, TOTAL_MOVES: 2000, WORK_HRS: 17, ETD_DT: "04-SEP-2014", ETD_TIME: "0300", ETD_DELAY_TIME: "0000", PILOT_OUT_DT: "04-SEP-2014", PILOT_OUT_TIME: "0600", PORT_TIME: "17.0", DISTANCE: 245, PLUS_MINUS: "+", BUFFER_DIST: 0, ACT_DIST: 245, SEA_TIME: "11.0", SPEED: "22.0", FOC: 96.7, CARGO_COST: 0, PILOT_IN_HRS: "3.0", PILOT_OUT_HRS: "3.0", GMT_TIME_DIFF: 9, SEA_TIME_ORG: "11.0" },
                        { LCN_CODE: "JPNGOPT", PILOT_IN_DT: "04-SEP-2014", PILOT_IN_TIME: "1700", ETA_DT: "04-SEP-2014", ETA_TIME: "2000", ETA_DELAY_TIME: "0000", NO_OF_CRANES: 2, CRANE_PROD: 25, TOTAL_MOVES: 1000, WORK_HRS: 20, ETD_DT: "05-SEP-2014", ETD_TIME: "1600", ETD_DELAY_TIME: "0000", PILOT_OUT_DT: "05-SEP-2014", PILOT_OUT_TIME: "1900", PORT_TIME: "20.0", DISTANCE: 136, PLUS_MINUS: "+", BUFFER_DIST: 0, ACT_DIST: 136, SEA_TIME: "6.0", SPEED: "22.0", FOC: 64.7, CARGO_COST: 0, PILOT_IN_HRS: "3.0", PILOT_OUT_HRS: "3.0", GMT_TIME_DIFF: 9, SEA_TIME_ORG: "6.0" },
                        { LCN_CODE: "JPSMZPT", PILOT_IN_DT:...