In [4]:

    

%%javascript

// load css if it's not already there: http://stackoverflow.com/a/4724676/7782
function loadcss(url) {
    if (!$("link[href='" + url + "']").length)
        $('<link href="' + url + '" rel="stylesheet">').appendTo("head");
}

loadcss("http://handsontable.com/dist/jquery.handsontable.full.css");
loadcss("http://handsontable.com/demo/css/samples.css?20140331");


    

In [18]:

    

from ipywidgets import widget


    

In [20]:

    

%%javascript
var widgets = require('@jupyter-widgets/base');
var _ = require('underscore');
// var handsontable_css = require('http://handsontable.com/dist/jquery.handsontable.full.css');

// var handsontable = require(['http://handsontable.com/dist/jquery.handsontable.full.js']);


import Handsontable from 'http://handsontable.com/dist/jquery.handsontable.full.js';

// var SciSheetTableModel = widgets.DOMWidgetModel.extend({
//     defaults: _.extend(_.result(this, 'widgets.DOMWidgetModel.prototype.defaults'), {
//         _model_name : 'SciSheetTableModel',
//         _view_name : 'SciSheetTableView',
//         _model_module : 'jupyter_scisheets_widget',
//         _view_module : 'jupyter_scisheets_widget',
//         _model_module_version : '0.1.0',
//         _view_module_version : '0.1.0'
//     })
// });


    

In [23]:

    

%%javascript
var table_id = 0;

var widgets = require('@jupyter-widgets/base');
var _ = require('underscore');

var SciSheetTableModel = widgets.DOMWidgetModel.extend({
    defaults: _.extend(_.result(this, 'widgets.DOMWidgetModel.prototype.defaults'), {
        _model_name : 'SciSheetTableModel',
        _view_name : 'SciSheetTableView',
        _model_module : 'jupyter_scisheets_widget',
        _view_module : 'jupyter_scisheets_widget',
        _model_module_version : '0.1.0',
        _view_module_version : '0.1.0'
    })
});


// Custom View. Renders the widget model.
var SciSheetTableView = widgets.DOMWidgetView.extend({
    render: function(){
        // CREATION OF THE WIDGET IN THE NOTEBOOK.

        // Add a <div> in the widget area.
        this.$table = $('<div />')
            .attr('id', 'table_' + (table_id++))
            .appendTo(this.$el);

        this.$table.handsontable({
        });
    },

    update: function() {
        // PYTHON --> JS UPDATE.

        // Get the model's value (JSON)
        var json_model = this.model.get('_model_data');
        var json_header = this.model.get('_model_header');
        var json_row_header = this.model.get('_model_row_header');

        console.log(json_row_header);

        // Get the model's JSON string, and parse it.
        var datamod = JSON.parse(json_model);
        var headermod = JSON.parse(json_header);
        var rowheadermod = JSON.parse(json_row_header);

        console.log(headermod);
        console.log(rowheadmod);

        // Give it to the Handsontable widget.
        this.$table.handsontable({
            data: datamod,
            colHeaders: headermod,
            rowHeaders: rowheadermod
        });

        // Don't touch this...
        return SciSheetTableView.__super__.update.apply(this);
    }, 

    // Tell Backbone to listen to the change event of input controls.

    events: {"change": "handle_table_change"},

    handle_table_change: function(event) {
        // JS --> PYTHON UPDATE.

        // Get table instance
        var ht = this.$table.handsontable('getInstance');

        // Get the data and serialize it
        var json_vals = JSON.stringify(ht.getData());
        var col_vals = JSON.stringify(ht.getColHeader());
        var row_vals = JSON.stringify(ht.getRowHeader());

        // Update the model with the JSON string.
        this.model.set('_model_data', json_vals);
        this.model.set('_model_header', col_vals);
        this.model.set('_model_row_header', row_vals);

        // Don't touch this...
        this.touch();
    }, 

});

module.exports = {
    SciSheetTableModel: SciSheetTableModel,
    SciSheetTableView: SciSheetTableView
};


    

In [ ]:

    

define('hello', ["@jupyter-widgets/base"], function(widgets) {

    var HelloView = widgets.DOMWidgetView.extend({

        // Render the view.
        render: function() {
            this.value_changed();
            this.model.on('change:value', this.value_changed, this);
        },    
          
        value_changed: function() {
            this.el.textContent = this.model.get('value');
        },
    });

    return {
        HelloView: HelloView
    };
});


    

In [ ]:

    




    

In [ ]:

    




    

In [11]:

    

%%html

<p style="font-size: 20px"><strong>Handsontable</strong> is a minimalistic Excel-like <span class="nobreak">data grid</span>
  editor
  for HTML, JavaScript &amp; jQuery</p>

<div id="hs_example" class="handsontable"></div>


    

    






Handsontable is a minimalistic Excel-like data grid
  editor
  for HTML, JavaScript & jQuery

In [16]:

    

%%javascript
require.config({
    paths: {
        handsontable: "http://handsontable.com/dist/jquery.handsontable.full.js"
    }
});


require(['handsontable'], function (handsontable){
    console.log("in require->handsontable");
    
  var data = [
    ["", "Maserati", "Mazda", "Mercedes", "Mini", "Mitsubishi"],
    ["2009", 0, 2941, 4303, 354, 5814],
    ["2010", 5, 2905, 2867, 412, 5284],
    ["2011", 4, 2517, 4822, 552, 6127],
    ["2012", 2, 2422, 5399, 776, 4151]
  ];
  
  $('#hs_example').handsontable({
    data: data,
    minSpareRows: 1,
    colHeaders: true,
    contextMenu: true
  });
  
  
//   function bindDumpButton() {
//       $('body').on('click', 'button[name=dump]', function () {
//         var dump = $(this).data('dump');
//         var $container = $(dump);
//         console.log('data of ' + dump, $container.handsontable('getData'));
//       });
//     }
//   bindDumpButton();    
    
});

handsontable()


    

In [ ]: