Custom js editor for Tabulator

Panel
1

Hello, I need an DateEditor for the Tabulator, as it seems that bokehs date editor has some Issues I wanted, to use the Tabulator one, but hey dont have a standard editor set for dates. Is there a way to create a custom Editor in js and use that as an editor.
I basicly want execute additional js code to register the dateEditor below.

var dateEditor = function(cell, onRendered, success, cancel, editorParams){
    //cell - the cell component for the editable cell
    //onRendered - function to call when the editor has been rendered
    //success - function to call to pass the successfuly updated value to Tabulator
    //cancel - function to call to abort the edit and return to a normal cell
    //editorParams - params object passed into the editorParams column definition property

    //create and style editor
    var editor = document.createElement("input");

    editor.setAttribute("type", "date");

    //create and style input
    editor.style.padding = "3px";
    editor.style.width = "100%";
    editor.style.boxSizing = "border-box";

    //Set value of editor to the current value of the cell
    editor.value = moment(cell.getValue(), "x").format("YYYY-MM-DD hh:mm:ss")

    //set focus on the select box when the editor is selected (timeout allows for editor to be added to DOM)
    onRendered(function(){
        editor.focus();
        editor.style.css = "100%";
    });

    //when the value has been set, trigger the cell to update
    function successFunc(){
        success(moment(editor.value, "YYYY-MM-DD hh:mm:ss").format("x"));
    }

    editor.addEventListener("change", successFunc);
    editor.addEventListener("blur", successFunc);

    //return the editor element
    return editor;
};
2

So I managed to do what I wanted using an panel template, it is kind of an ugly workaround.
Maybe I will have to write a bokeh Custom model anyway.
If someone is interested here is my solution:

import panel as pn
import pandas as pd

template = """
{% extends base %}

<!-- goes in body -->
{% block postamble %}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
{% endblock %}

<!-- goes in body -->
{% block contents %}
{{ app_title }}
<p>This is a Panel app with a custom template allowing us to compose multiple Panel objects into a single HTML document.</p>
<br>
<div class="container">

      {{ embed(roots.A) }}

</div>
<script type="text/javascript">
var dateEditor = function(cell, onRendered, success, cancel, editorParams){
    //cell - the cell component for the editable cell
    //onRendered - function to call when the editor has been rendered
    //success - function to call to pass the successfuly updated value to Tabulator
    //cancel - function to call to abort the edit and return to a normal cell
    //editorParams - params object passed into the editorParams column definition property

    //create and style editor
    var editor = document.createElement("input");

    editor.setAttribute("type", "date");

    //create and style input
    editor.style.padding = "3px";
    editor.style.width = "100%";
    editor.style.boxSizing = "border-box";

    //Set value of editor to the current value of the cell
    editor.value = moment(cell.getValue(), "x").format("YYYY-MM-DD hh:mm:ss")

    //set focus on the select box when the editor is selected (timeout allows for editor to be added to DOM)
    onRendered(function(){
        editor.focus();
        editor.style.css = "100%";
    });

    //when the value has been set, trigger the cell to update
    function successFunc(){
        success(moment(editor.value, "YYYY-MM-DD hh:mm:ss").format("x"));
    }

    editor.addEventListener("change", successFunc);
    editor.addEventListener("blur", successFunc);

    //return the editor element
    return editor;
};
        console.log("foooobar")
        Tabulator.prototype.moduleBindings["edit"].prototype.editors['datetime'] = dateEditor
        </script>
{% endblock %}
"""

        editors = {
            'start': {'type': 'datetime', 'invalidPlaceholder': "(invalid date)"},
        }
        table = Tabulator(
            value=pd.DataFrame([pd.Timestamp('2017-06-11 00:00:00'),
 pd.Timestamp('2017-06-11 00:15:00'),
 pd.Timestamp('2017-06-11 00:30:00'),
 pd.Timestamp('2017-06-11 00:45:00'),
 pd.Timestamp('2017-06-11 01:00:00')],columns=['start']),
            sizing_mode="scale_height",
            editors=editors,
            min_width=400,
            min_height=400,
            selectable='checkbox',
            configuration={'movableRows': True, "layoutColumnsOnNewData": True})

tmpl = pn.Template(template)

tmpl.add_panel('A', table)
tmpl.show()
1 Like
3

Hi @HugoMichi.

Glad you found a solution. You can also include javascript in other ways.

  • panel.config.js_files["my-script-name"]=URL_TO_SCRIPT_FILE
  • pn.template.FastListTemplate.config.js_files["my-script-name"]=URL_TO_SCRIPT_FILE
  • panel.pane.HTML(f"<script type='text/javascript'>{RAW_JS_SCRIPT}</script>")

You can serve your js file via the --static-dirs flag. See Deploy and Export — Panel 0.11.2

4
  • panel.pane.HTML(f"<script type='text/javascript'>{RAW_JS_SCRIPT}</script>")

That was what I was looking for
thx @Marc

1 Like