{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "8d9f549f-bb8c-45c9-a86d-5a377f4a9105",
   "metadata": {},
   "outputs": [],
   "source": [
    "import param\n",
    "import json\n",
    "import panel as pn\n",
    "\n",
    "from panel.reactive import ReactiveHTML\n",
    "\n",
    "class JSpreadsheet(ReactiveHTML):\n",
    "    \n",
    "    __javascript__ = [\"https://bossanova.uk/jspreadsheet/v4/jexcel.js\"\n",
    "                     ,\"https://jsuites.net/v4/jsuites.js\"]\n",
    "    \n",
    "    __css__ = [\"https://bossanova.uk/jspreadsheet/v4/jexcel.css\"\n",
    "              ,\"https://jsuites.net/v4/jsuites.css\"]\n",
    "    \n",
    "    ssdata_init = param.List(default=[\n",
    "                ['Mazda', 2001, 2000],\n",
    "                ['Pegeout', 2010, 5000],\n",
    "                ['Honda Fit', 2009, 3000],\n",
    "                ['Honda CRV', 2010, 6000]\n",
    "            ])\n",
    "\n",
    "    ssdata_out = param.List(default=[\n",
    "                ['Mazda', 2001, 2000],\n",
    "                ['Pegeout', 2010, 5000],\n",
    "                ['Honda Fit', 2009, 3000],\n",
    "                ['Honda CRV', 2010, 6000]\n",
    "            ])\n",
    "    \n",
    "    sscolumns = param.List(default = [\n",
    "                    { 'title':'Model', 'width':300 },\n",
    "                    { 'title':'Price', 'width':80 },\n",
    "                    { 'title':'Model', 'width':100 }\n",
    "    ])\n",
    "    \n",
    "    _extension_name = 'jspreadsheet'\n",
    "\n",
    "    _template = \"\"\"\n",
    "        <div id='container'>\n",
    "        </div>\n",
    "    \"\"\"\n",
    "    _scripts = {\n",
    "        'render':\"\"\"\n",
    "                var changed = function(instance, cell, x, y, value) {\n",
    "                    data.ssdata_out = instance.jexcel.getData();\n",
    "                    \n",
    "                };\n",
    "                state.ctx = jspreadsheet(container, {\n",
    "                    data:data.ssdata_init,\n",
    "                    columns:data.sscolumns,\n",
    "                    allowInsertRow: false,\n",
    "                    onchange: changed\n",
    "                });\n",
    "            \"\"\"\n",
    "    }\n",
    "         \n",
    "pn.extension('jspreadsheet')\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "c59283eb-b151-41ee-a973-6109870d2ff9",
   "metadata": {},
   "outputs": [],
   "source": [
    "datatest = [\n",
    "                ['Purple', 2001, 2000],\n",
    "                ['Pegeout', 2010, 5000],\n",
    "                ['Honda Fit', 2009, 3000],\n",
    "                ['Honda CRV', 2010, 6000]\n",
    "            ]\n",
    "\n",
    "test = JSpreadsheet(ssdata_init = datatest)\n",
    "\n",
    "out = pn.pane.JSON(datatest, name='JSON', height=300, width=500)\n",
    "\n",
    "button = pn.widgets.Button(name='Print Data', button_type='primary', width = 200)\n",
    "\n",
    "x = pn.Column(test,button, out)\n",
    "\n",
    "def print_data(event):\n",
    "    # print(test.ssdata)\n",
    "    # x[2] = pn.pane.JSON(test.ssdata_out, name='JSON', height=300, width=500)\n",
    "    out.object = test.ssdata_out\n",
    "\n",
    "button.on_click(print_data)\n",
    "\n",
    "x"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "851e455d-0454-4e9c-90e3-92cb5fd820b5",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.9.5"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}