Handsontable example

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", "black"],
      ["Nissan", 2014, "blue", "blue", "blue"],
      ["Chrysler", 2015, "yellow", "black", "black"],
      ["Volvo", 2016, "white", "gray", "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)
  
  function customDropdownRenderer(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
		if (row === 0) {
      cellProperties.type = 'dropdown';
      cellProperties.source = ['black', 'yellow', 'red'];
    }
  }
  
  function customHoTRenderer(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
		if (row === 0) {
      cellProperties.type = 'handsontable';
      cellProperties.data = ['black', 'yellow', 'red'];
    }
  }
  
  hot = new Handsontable(container, {
    data: carData,
    colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color', 'Color'],
    rowHeights: 50,  
    columns: [
      {
        type: 'text'
      },
      {type: 'numeric'},
      {
        type: 'handsontable',
        handsontable: {
  ...