Handsontable example

by Shashank D

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.full.min.js"></script>


<div id="example" class="hot1 hot handsontable"></div>

CSS

body {
  padding: 0;
  margin: 0;
  background: #ffffff;
}
th,
td {
  font: 12px sans-serif
}
.name {
  color: #3F51B5;
  font-weight: bold;
}

JavaScript

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

  var data = [{
      name: 'Drosera',
      genus: 'Drosera',
      kingdom: 'Plantae',
      order: 'Caryophyllales',
      family: 'Droseraceae'
    }, {
      name: 'Rose',
      genus: 'Rosa',
      kingdom: 'Plantae',
      order: 'Rosales',
      family: 'Rosaceae'
    }, {
      name: 'Penny bun',
      genus: 'Boletus edulis',
      kingdom: 'Fungi',
      order: 'Boletales',
      family: 'Boletaceae'
    }, {
      name: 'Blank Morel',
      genus: 'Morchella',
      kingdom: 'Fungi',
      order: 'Pezizales',
      family: 'Morchellaceae'
    }, {
      name: 'Ananas ',
      genus: 'Ananas',
      kingdom: 'Plantae',
      order: 'Poales',
      family: '	Bromeliaceae'
    }, {
      name: 'Oil Palm',
       genus: 'Elaeis',
      kingdom: 'Plantae',
      order: 'Arecales',
      family: '	Arecaceae'
    }],
    container,
    hot;

  container = document.getElementById('example');
  hot = new Handsontable(container, {
    data: data,
    colWidths: 147,
    licenseKey: 'non-commercial-and-evaluation',
    colHeaders: ['Name', 'Genus', 'Kingom', 'Order', 'Family'],
    columns: [{
      data: 'name',
      renderer: myRenderer
    }, {
      data: 'genus'
    }, {
      data: 'kingdom'
    }, {
      data: 'order'
    }, {
      data: 'family'
    }]
  });

  function myRenderer(instance, td, row, col, prop, value, cellProperties) {

			$(td).html('<select class="player-select form-control"></select>');
      
	    $(td).find(".player-select").select2({
        width: '100%',
        ajax: {
            url: "https://raw.githubusercontent.com/kshkrao3/JsonFileSample/master/select2resp.json",
            dataType: 'json',
            delay: 250,
            data: function(params) {
                return {
                    q: params.term // search term
                };
            },
            processResults: function(data, params) {
                // parse the results into the...