Handsontable example

by fxi

HTML

<div id="example1" class="hot handsontable htColumnHeaders"></div>
<button type="button" id="testDump">dump</button>

CSS

</style><!-- Ugly Hack due to jsFiddle issue -->

<script src="https://docs.handsontable.com/0.35.0/bower_components/handsontable/dist/handsontable.full.js"></script>
<link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/0.35.0/bower_components/handsontable/dist/handsontable.full.min.css">

JavaScript

function getCarData() {
    return [
      {car: "Mercedes A 160", year: 2017, available: true, comesInBlack: 'yes'},
      {car: "Citroen C4 Coupe", year: 2018, available: false, comesInBlack: 'yes'},
      {car: "Audi A4 Avant", year: 2019, available: true, comesInBlack: 'no'},
      {car: "Opel Astra", year: 2020, available: false, comesInBlack: 'yes'},
      {car: "BMW 320i Coupe", year: 2021, available: false, comesInBlack: 'no'}
    ];
  }
  var btn = document.getElementById("testDump");
  var example1 = document.getElementById('example1'),
    hot1;
  
  hot1 = new Handsontable(example1, {
    data: getCarData(),
    colHeaders: ['Car model', 'Year of manufacture', 'Available'],
     columnSorting: true,
    sortIndicator: true,
    columns: [
      {
        data: 'car'
      },
      {
        data: 'year',
        type: 'numeric'
      },
      {
        data: 'available',
        type: 'checkbox'
      }
    ]
  });
  btn.addEventListener("click",function(){
  console.log(hot1.getDataAtCol(1));
  })