x = [
{"name":"Oli Bob", "location":"United Kingdom", "gender":"male", "col":"red", "dob":"14/04/1984", "_children":[
{"name":"Mary May", "location":"Germany", "gender":"female", "col":"blue", "dob":"14/05/1982"},
{"name":"Christine Lobowski", "location":"France", "gender":"female", "col":"green", "dob":"22/05/1982"},
{"name":"Brendon Philips", "location":"USA", "gender":"male", "col":"orange", "dob":"01/08/1980", "_children":[
{"name":"Margret Marmajuke", "location":"Canada", "gender":"female", "col":"yellow", "dob":"31/01/1999"},
{"name":"Frank Harbours", "location":"Russia", "gender":"male", "col":"red", "dob":"12/05/1966"},
]},
]},
{"name":"Jamie Newhart", "location":"India", "gender":"male", "col":"green", "dob":"14/05/1985"},
{"name":"Gemma Jane", "location":"China", "gender":"female", "col":"red", "dob":"22/05/1982", "_children":[
{"name":"Emily Sykes", "location":"South Korea", "gender":"female", "col":"maroon", "dob":"11/11/1970"},
]},
{"name":"James Newman", "location":"Japan", "gender":"male", "col":"red", "dob":"22/03/1998"}
]
from panel.reactive import ReactiveHTML
import param
import panel as pn
class DrillDown(ReactiveHTML):
value = param.List(default=[{'0':'0'}])
_template = """
<div id="example-table">xxx</div>
"""
# _dom_events = {'text-input': ['change']}
# By declaring an _extension_name the component should be loaded explicitly with pn.extension('material-components')
_extension_name = 'drill-down'
_scripts = {
'render': '''
state.table = new Tabulator("#example-table-" + data.id, {
height:"311px",
data:data.value,
dataTree:true,
dataTreeStartExpanded:true,
columns:[
{title:"Name", field:"name", width:200, responsive:0}, //never hide this column
{title:"Location", field:"location", width:150},
{title:"Gender", field:"gender", width:150, responsive:2}, //hide this column first
{title:"Favourite Color", field:"col", width:150},
{title:"Date Of Birth", field:"dob", hozAlign:"center", sorter:"date", width:150},
],
});
'''
,
'value': 'state.table.replaceData(data.value)'
}
__javascript__ = [
'https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js'
]
__css__ = [
'https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css'
]
pn.extension('drill-down')
drill_down = DrillDown(value = x)
drill_down.save('drilldown.html')
pn.pane.HTML(
'<iframe width = "1000px" height = "600px" src="https://mrileysamc.github.io/modelingstuff/oas/drilldown.html"></iframe>',
)