BokehJS: How to make a data table using BokehJS with dummy data inside a customJS such that when I tap on my plot the table is displayed

[Kewal_Bajaj]

Hi,
Please help me out with this. I am using Bokeh 3.0.3. I have not used javascipt ever before and I am facing problem with writing customJS callbaks using BokehJS.

I have a line plot and a taptool atttached to it. I want the callback of tap tool to display a table with x and y coordinates of the clicked point of plot. Here is my code snippet for the callbak,

# Define the tap tool
tap = TapTool(callback=CustomJS(args=dict(source=ColumnDataSource(data)), code="""
	console.log('TapTool callback executed.');
    var data = source.data;
    var x = data['x'][0];
    var y = data['y'][0];
    var table_data = {'X Value': [x], 'Y Value': [y]};
    var table_source = new Bokeh.ColumnDataSource(table_data);
    var columns = [
        new Bokeh.TableColumn({field: 'X Value', title: 'X Value'}),
        new Bokeh.TableColumn({field: 'Y Value', title: 'Y Value'})
    ];
    var table = new Bokeh.DataTable({
        columns: columns,
        source: table_source,
        width: 300,
        height: 200
    });
    table_div.innerHTML = '';
    table_div.appendChild(table.el);
"""))

# Add the tap tool to the plot
plot.add_tools(tap)

# Define the div element to hold the table
table_div = Div()
js_resources = CDN.js_files
html = file_html(column(plot, table_div), CDN, title="My Plot")

from bokeh.embed import file_html
with open("/home/kewal/temp.html","w+") as f:
    f.write(html)

I execute the html file in web browser (google chrome) and shift to developer console, and when i click on the line graph glyph, I can see the console log which means callback is being executed but there is an error saying "columndatasource constructor not found

I have tried looking for api references online for BokehJS but could not figure out a fix nor could find a similar example"

[Gen]

Can’t you just render a DataTable in your Python code and set visibility=False?
Then in your TapTool, set the JS to set the DataTable visibility = true and update the x,y?

That seems a lot simpler than what you’re doing.