Extract user input to python from a table created in browser?

Question

I want to create a table in a browser that's been created with python. That part can be done by using DataTable of the bokeh library. The problem is that I want to extract data from the table when a user gives his/her input in the table itself. Any library of python I could use to do this? It would better if I could do this with bokeh though.

Answer 1

You can use BeautifulSoup it's great for parse HTML content, see this example

Answer 2

If your requirement is to create an application using Python and users will access via browser and update some data into a table?

Use Django or any web framework, basically, you are trying to build a web app!!

or

if you are looking for something else do mention your requirement thoroughly.

Answer 3

The slick grid datatable used in bokeh can be edited directly by users:

http://docs.bokeh.org/en/latest/docs/reference/models/widgets.tables.html.

Since the data for each column of a datatable can correspond to a field of a ColumnDataSource, one could create python or javascript callbacks, to detect any changes to the datavalues in the table. You can then access the updated data for your desired use case.

Here is an example using javascript callback when the data is edited. When the data is edited the updated column is printed to the browser console. Note it only detects the data as changed after you edit the value then click out of the cell.

You can do exactly the same with a python callback if you want to run outside python functions based off user input. That does require running a bokeh server to work though.

from datetime import date
from bokeh.io import output_file, show
from bokeh.layouts import widgetbox
from bokeh.models import ColumnDataSource, CustomJS
from bokeh.models.widgets import DataTable, DateFormatter, TableColumn, StringEditor

output_file("data_table.html")

data = dict(
        dates=[date(2014, 3, i+1) for i in range(10)],
        strings=['edit_this' for i in range(10)],
    )
source = ColumnDataSource(data)

columns = [
        TableColumn(field="dates", title="Date", formatter=DateFormatter()),
        TableColumn(field="strings", title="Downloads", editor=StringEditor()),
    ]

data_table = DataTable(source=source, columns=columns, width=400, height=280,
                       editable=True)

# callback code to detect user edit of table
code = """
    data = source.data
    console.log('data has been updated!')
    console.log(data['strings'])
"""

callback = CustomJS(code=code,args={'source':source})
source.js_on_change('data', callback)

show(widgetbox(data_table))

edit:

Here is a similar example using a python callback. When you edit the cell all of the cells are replaced in this example. Obviously you could do what ever you wanted this is just an illustration.

You need to set a callback on source that responds to a change in the data. Hence source.on_change('data', update). Read more

https://docs.bokeh.org/en/latest/docs/user_guide/interaction/widgets.html

from datetime import date
from bokeh.io import curdoc
from bokeh.layouts import widgetbox
from bokeh.models import ColumnDataSource
from bokeh.models.widgets import DataTable, DateFormatter, TableColumn, StringEditor

data = dict(
        dates=[date(2014, 3, i+1) for i in range(10)],
        strings=['edit_this' for i in range(10)],
    )
source = ColumnDataSource(data)

columns = [
        TableColumn(field="dates", title="Date", formatter=DateFormatter()),
        TableColumn(field="strings", title="Downloads", editor=StringEditor()),
    ]

data_table = DataTable(source=source, columns=columns, width=400, height=280,
                       editable=True)

# callback code to detect user edit of table
def update(attrname, old, new):
    data = source.data
    data['strings'] = ['you just edited the table.']*10
    source.data = data

source.on_change('data', update)

curdoc().add_root(widgetbox(data_table))