Extending Handsontable

Question

I'm trying to create a wrapper around Handsontable, to provide some additional features. I've tried doing the following and although the constructor works, the loadData function doesn't seem to get overridden. Any advice?

I've tested this in Chrome 45.0.2454.101m.

"use strict";

class CustomHandsontable extends Handsontable {

    constructor(container, options) {
        console.log("in constructor");
        super(container, options);
    }

    loadData(data) {
        console.log("load data");
        super.loadData(data);
    }
}

EDIT: After reading that Chrome doesn't yet fully support ECMA6, I've tried the following, but can't quite figure out how to call the parent loadData method.

function CustomHandsontable (container, options) {
    console.log("constructor");

    this.loadData = function(data) {
        console.log("loadData");
        // TODO how do you call the parent load data function?
    }
};

CustomHandsontable.prototype = Object.create(Handsontable.prototype);
CustomHandsontable.prototype.constructor = CustomHandsontable;

EDIT: Following @ZekeDroids tip to use Babel, I get the following error when its attempting to call the super classes loadData function:

Uncaught TypeError: Cannot read property 'call' of undefined

Babel code:

"use strict";

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Hot = (function (_Handsontable) {
    _inherits(Hot, _Handsontable);

    function Hot(localOptions, container, options) {
        _classCallCheck(this, Hot);

        console.log("in constructor");
        _get(Object.getPrototypeOf(Hot.prototype), "constructor", this).call(this, container, options);
    }

    _createClass(Hot, [{
        key: "loadData",
        value: function loadData(data) {
            console.log("load data");
            _get(Object.getPrototypeOf(Hot.prototype), "loadData", this).call(this, data);
        }
    }]);

    return Hot;
})(Handsontable);

Answer 1

Answering my own question...

I wasn't able to get inheritance to work, but did find a solution using composition:

function Hot(container, options, customOptions) {
    var _instance = this;

    // create a hot instance
    var hot = new Handsontable(container, options);
    hot._hotContainer = this;

    //
    // put any custom stuff here...
    //

    //
    // since inheritance doesn't quite work, the following are all pass-through
    // functions to cover the fact that composition is being used
    //

    this.loadData = function(data) {
        hot.loadData.apply(this, arguments);
    }
    this.render = function() {
        hot.render.apply(this, arguments);
    }
    this.getDataAtRow = function() {
        return hot.getDataAtRow.apply(this, arguments);
    }
    this.countCols = function() {
        return hot.countCols.apply(this, arguments);
    }
    this.sort = function() {
        hot.sort.apply(this, arguments);
    }
};