I am trying to display a table in a jupyter notebook using python and the visualization library Bokeh. I use the following code to display my table in an jupyter notebook where result is a dataframe:
source = ColumnDataSource(result)
columns = [
TableColumn(field="ts", title="Timestamp"),
TableColumn(field="bid_qty", title="Bid Quantity"),
TableColumn(field="bid_prc", title="Bid Price"),
TableColumn(field="ask_prc", title="Ask Price"),
TableColumn(field="ask_qty", title="Ask Quantity"),
]
data_table = DataTable(source=source, columns=columns, fit_columns=True, width=1300, height=800)
show(widgetbox([data_table], sizing_mode = 'scale_both'))
Previously I was using vform although this now seems to be depreciated and no longer works as expected either. This occurred after my jupyter notebook version was updated. Regardless of what I set the width my column headers don't line up and have a weird overlap with the table:
This did not happen before, I was able to get a nice table where everything lined up. Even if I adjust the headers they still wont line up. This does not happen when I save the table as an html file instead of calling show() directly in the Jupyter notebook. What do I need to change? Is there a better way to do this?
Full Example
from bokeh.io import show, output_notebook
from bokeh.layouts import widgetbox
from bokeh.models import ColumnDataSource
from bokeh.models.widgets import TableColumn, DataTable
import pandas as pd
output_notebook()
d = {'one' : pd.Series([1., 2., 3.], index=['a', 'b', 'c']),
'two' : pd.Series([1., 2., 3., 4.], index=['a', 'b', 'c', 'd'])}
df = pd.DataFrame(d)
source = ColumnDataSource(df)
columns = [
TableColumn(field="one", title="One"),
TableColumn(field="two", title=" Two"),
]
data_table = DataTable(source=source, columns=columns,
fit_columns=True, width=800, height=800)
show(widgetbox([data_table], sizing_mode = 'scale_both'))
This is running on a system with the following versions:
The css styling of Bokeh widgets for Jupyter notebooks is in http://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.0.min.css, where height:16px
for elements .bk-root .bk-slick-header-column.bk-ui-state-default
is hardcoded. So it cannot be changed without changing the css.
It can be styled adhoc by HTML
function
from IPython.core.display import HTML
HTML("""
<style>
.bk-root .bk-slick-header-column.bk-ui-state-default {
height: 25px!important;
}
</style>
""")
For the persistent change css can be added to custom
directory in Jupyter config. You can figure out where it is by calling
jupyter --config-dir
By default it is ~/.jupyter
The new css need to be in ~/.jupyter/custom/custom.css
then.
Before
After
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With