Pure JS Tabulator

Panel
1

I’m trying to create a pure js tabulator with panel.

Tabulator does not show.

import param
import json
import panel as pn

js_files = {'llstabulator': 'https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js'}
    

from panel.reactive import ReactiveHTML

class llsTabulator(ReactiveHTML):
    
    __javascript__ = ["https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"]
    
    __css__ = ["https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css"]

    _extension_name = 'llstabulator'

    _template = """<div id="example-table"></div>"""
    _scripts = {
        'render':"""
//import {TabulatorFull as Tabulator} from 'tabulator-tables';
//@import  "~/tabulator-tables/dist/css/tabulator.min.css";
//define data array
var tabledata = [
    {id:1, name:"Oli Bob", progress:12, gender:"male", rating:1, col:"red", dob:"19/02/1984", car:1},
    {id:2, name:"Mary May", progress:1, gender:"female", rating:2, col:"blue", dob:"14/05/1982", car:true},
    {id:3, name:"Christine Lobowski", progress:42, gender:"female", rating:0, col:"green", dob:"22/05/1982", car:"true"},
    {id:4, name:"Brendon Philips", progress:100, gender:"male", rating:1, col:"orange", dob:"01/08/1980"},
    {id:5, name:"Margret Marmajuke", progress:16, gender:"female", rating:5, col:"yellow", dob:"31/01/1999"},
    {id:6, name:"Frank Harbours", progress:38, gender:"male", rating:4, col:"red", dob:"12/05/1966", car:1},
];

//initialize table
state.ctx =  new Tabulator("#example-table", {
    data:tabledata, //assign data to table
    autoColumns:true, //create columns from data field names
});
"""
    }
         
pn.extension('llstabulator', js_files=js_files)

test = llsTabulator()
poo = pn.Column(test)
poo.show()