JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.css">


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

JavaScript

var
    objectData = [
      {id: 1, name: 'Ted Right', address: '', values: [1, 2, 3]},
      {id: 2, name: 'Frank Honest', address: '', values: ['a', 'b', 'c']},
      {id: 3, name: 'Joan Well', address: ''},
      {id: 4, name: 'Gail Polite', address: ''},
      {id: 5, name: 'Michael Fair', address: ''},
    ],
    container3 = document.getElementById('example3'),
    hot3;
  
  hot3 = new Handsontable(container3, {
    data: objectData,
    colHeaders: true,

		columns: ['id', 'name', 'address', 'values'].map(function (key) {
			return {
      	data: key,
        type: key === 'values' ? 'dropdown' : 'text',
        renderer: function (instance, td, row, col, prop, value, cellProperties) {
        		if(Array.isArray(value)) {
            
            	var select = '<select class="form-control input-sm"></select>';
              
            	$(td).html(select);
              $(td).find('select').html(
              	value.map(function (val) { return '<option>'+val+'</option>'}).join('')
              );
              
              return td;
            } else {
            	Handsontable.renderers.TextRenderer.apply(this, arguments);
            }
        }
      }
    })
  });