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", "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'];
    }
  }
  
  function onlyFirstRowRenderer(instance, td, row, col, prop, value, cellProperties) {
    //Handsontable.renderers.TextRenderer.apply(this, arguments);
    if (row...