Handsontable example

by handsoncode

HTML

<div id="example1" class="hot handsontable htColumnHeaders"></div>

CSS

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

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

JavaScript

document.addEventListener("DOMContentLoaded", function() {

  function getCarData() {
    return [
      ["Nissan", 2013, "black", "black"],
      ["Nissan", 2014, "blue", "blue"],
      ["Chrysler", 2015, "yellow", "black"],
      ["Volvo", 2016, "white", "gray"]
    ];
  }
  
  var
    carData = getCarData(),
    container = document.getElementById('example1'),
    manufacturerData,
    colors,
    color,
    colorData = [],
    hot;
  
  manufacturerData = [
    {name: 'BMW', country: 'Germany', owner: 'Bayerische Motoren Werke AG'},
    {name: 'Chrysler', country: 'USA', owner: 'Chrysler Group LLC'},
    {name: 'Nissan', country: 'Japan', owner: 'Nissan Motor Company Ltd'},
    {name: 'Suzuki', country: 'Japan', owner: 'Suzuki Motor Corporation'},
    {name: 'Toyota', country: 'Japan', owner: 'Toyota Motor Corporation'},
    {name: 'Volvo', country: 'Sweden', owner: 'Zhejiang Geely Holding Group'}
  ];
  colors = ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'];
  
  while (color = colors.shift()) {
    colorData.push([color]);
  }
    console.log(colorData)
  
  hot = new Handsontable(container, {
    data: carData,
    colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],
    rowHeights: 50,  
    columns: [
      {
        type: 'text',
      },
      {type: 'numeric'},
      {
        type: 'handsontable',
        handsontable: {
          colHeaders: false,
            rowHeights: 50,
          	data: [['yellow'], ['red'],['orange'],['blue'],['green']]
        }
      }
    ]
  });
    
  //update colWidths for handsontable cell type
  hot.getSettings().columns[2].handsontable.colWidths = hot.getColWidth(2);
    
});