JSpreadsheet

Trying to add a ReactiveHTML component for JSpreadsheet (https://bossanova.uk/jspreadsheet/v4/docs/getting-started).
It’s a little buggy, but since I have no idea what I’m doing I’m relatively happy with the result. Thanks to @Marc for the inspiration to post.
Here’s the Binder: https://mybinder.org/v2/gh/riziles/jspreadsheet-in-holoviz-panel/cdec81b9a19bda688b73f433857fbd8741dcc093?urlpath=lab%2Ftree%2FJSpreadsheet.ipynb
and the repo: https://github.com/riziles/jspreadsheet-in-holoviz-panel

import param
import json
import panel as pn

from panel.reactive import ReactiveHTML

class JSpreadsheet(ReactiveHTML):
    
    __javascript__ = ["https://bossanova.uk/jspreadsheet/v4/jexcel.js"
                     ,"https://jsuites.net/v4/jsuites.js"]
    
    __css__ = ["https://bossanova.uk/jspreadsheet/v4/jexcel.css"
              ,"https://jsuites.net/v4/jsuites.css"]
    
    ssdata_init = param.List(default=[
                ['Mazda', 2001, 2000],
                ['Pegeout', 2010, 5000]
            ])

    ssdata_out = param.List(default=[
                ['Mazda', 2001, 2000],
                ['Pegeout', 2010, 5000]
            ])
    
    sscolumns = param.List(default = [
                    { 'title':'Model', 'width':300 },
                    { 'title':'Price', 'width':80 },
                    { 'title':'Model', 'width':100 }
    ])
    
    _extension_name = 'jspreadsheet'

    _template = """
        <div id='container'>
        </div>
    """
    _scripts = {
        'render':"""
                var changed = function(instance, cell, x, y, value) {
                    data.ssdata_out = instance.jexcel.getData();
                    
                };
                state.ctx = jspreadsheet(container, {
                    data:data.ssdata_init,
                    columns:data.sscolumns,
                    allowInsertRow: false,
                    onchange: changed
                });
            """
    }
         
pn.extension('jspreadsheet')