JSFiddle - React, Tailwind, and code Playground
HTML
<div id="example" class="handsontable"></div>
CSS
</style><!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->
<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>
<script src="https://handsontable.com/dist/handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="https://handsontable.com/dist/handsontable.full.css">
<link rel="stylesheet" media="screen" href="http://handsontable.com/demo/css/samples.css">
<style type="text/css">
body {background: white; margin: 20px;}
h2 {margin: 20px 0;}
JavaScript
$(document).ready(function () {
var optionsList = [{id: 1, text: 'jsmith'}, {id: 2, text: 'wjones'}];
var columnsList = [{
editor: 'select2',
select2Options: {
data: optionsList,
allowClear: true,
}
}
],
container = document.getElementById('example'),
hot;
hot = new Handsontable(container, {
minSpareRows: 1,
colHeaders: true,
contextMenu: true,
columns: columnsList
});
/*
$("#example").select2({
data:optionsList
});
*/
});
//https://github.com/trebuchetty/Handsontable-select2-editor
//select2-editor (source) modified line#41
/// select2 plugin
(function (Handsontable) {
"use strict";
var Select2Editor = Handsontable.editors.TextEditor.prototype.extend();
//Select2Editor.prototype.prepare = function (td, row, col, prop, value, cellProperties) {
//TODO: TEMP change
Select2Editor.prototype.prepare = function (row, col, prop, td, originalValue, cellProperties) {
Handsontable.editors.TextEditor.prototype.prepare.apply(this, arguments);
this.options = {};
if (this.cellProperties.select2Options) {
this.options = $.extend(this.options, cellProperties.select2Options);
}
};
Select2Editor.prototype.createElements = function () {
this.$body = $(document.body);
this.TEXTAREA = document.createElement('input');
this.TEXTAREA.setAttribute('type', 'text');
this.$textarea = $(this.TEXTAREA);
Handsontable.Dom.addClass(this.TEXTAREA, 'handsontableInput');
this.textareaStyle = this.TEXTAREA.style;
this.textareaStyle.width = 0;
this.textareaStyle.height = 0;
this.TEXTAREA_PARENT = document.createElement('DIV');
Handsontable.Dom.addClass(this.TEXTAREA_PARENT,...