Interactive HTML Tables using DataTables JavaScript

I was working with some interactive tables in a Jupyter Notebook using the Python "itables" package and wondered if such tables could be used in Pipeline Pilot HTML Reports.

 

I've attached a protocol with a component that will generated an DataTable from generic input data.  The component loads the Databables and jQuery (optional) JavaScript from CDNs and replaces the table generated by the Table reporting component with an interactive one.

More information on DataTables can be found here:

 

https://datatables.net/

 

More than one interactive table can be included in the report and not interfere with each other, as the protocol demonsrates.

At the time of this writing, the table can only sort columns, search through the entire table and limit the number or rows displayed.  However, the tables seem highly configurable.  If you're interested in this component and would like to see some additional functionality, post here and I will be happy to look into it for you.

You can learn more about the avilable options from the link in the help text of the DataTable Options parameter of the component.

https://datatables.net/reference/option/

 

If you would like to use the same interactive tables in a Python Jupyter Notebook component, then you first must install iptables to a Python environment, specify that environment on the Python Environment parameter of that component, then add something like the following to a code cell.

from itables import init_notebook_mode
init_notebook_mode(all_interactive=True)
from itables import show
import pandas as pd

# Could use the following to get a sample data frame from the itables package
# countries = get_countries() # returns a pandas DataFrame
# show(countries)

# We'll show the Pipeline Pilot data records instead:
show(plp_df)

I hope someone in the community will find this information useful,

Cheers,

Craig Shepherd