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')