JSFiddle - React, Tailwind, and code Playground

by Christopher Keith

HTML

<div class="handsontable" data-bind="handsontable: {
            data: self.listOfPersons(),
            colHeaders: ['First Name', 'Last Name'],
            columns: [
              {data: 'fname'},
              {data: 'lname'}
            ]
        }"></div> <pre data-bind="text: ko.toJSON(listOfPersons, null, 2)"></pre>

CSS

</style><!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> <script src="http://handsontable.com/lib/jquery.min.js"></script> <script src="http://handsontable.com/dist/jquery.handsontable.full.js"></script> <link rel="stylesheet" media="screen" href="http://handsontable.com/dist/jquery.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 () {
     function Person() {
         var self = this;
         self.fname = ko.observable('Bob');
         self.lname = ko.observable('Smith');

     }

     function exampleVM() {
         self.listOfPersons = ko.observableArray([]);
         self.listOfPersons.push(new Person());
         self.listOfPersons.push(new Person());
         self.listOfPersons.push(new Person());
     }
     //window.AppVM = new AppViewModel();
     ko.applyBindings(new exampleVM());

 });


 (function (factory) {
     if (typeof define === "function" && define.amd) {
         // AMD anonymous module
         define(["knockout", "jquery", "handsontable"], factory);
     } else {
         // No module loader (plain <script> tag) - put directly in global namespace
         factory(window.ko, jQuery, window.handsontable);
     }
 })(function (ko, $, undefined) {
     var unwrap = ko.utils.unwrapObservable;

     var peekByString = function (o, s) {
         s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
         s = s.replace(/^\./, ''); // strip a leading dot
         var a = s.split('.');
         while (a.length) {
             var n = a.shift();
             if (n in o) {
                 o = o[n];
             } else {
                 return;
             }
         }
         return o;
     }
     //connect items with observableArrays
     var prepareColumnOptions = function (columns) {
         var prop = '',
             mappedColumns;
         if (columns) {
             mappedColumns = $.map(columns, function (propertyName, index) {
                 return {
                     data: (function (attr) {
                         return function (row, value) {
                             prop = peekByString(row, propertyName.data);
                             if (prop) {
                                 if (typeof value === 'undefined') {
                                     // GET
                                     return...