Skip to content

Instantly share code, notes, and snippets.

@schlichtanders

schlichtanders/mwe_layout_table.html

Created October 24, 2016 07:40
Show Gist options
  • Save schlichtanders/897b33daa846d4a08ba6e0f2ee5b2d75 to your computer and use it in GitHub Desktop.
Save schlichtanders/897b33daa846d4a08ba6e0f2ee5b2d75 to your computer and use it in GitHub Desktop.
Download ZIP
bokeh datatable has some little layout issues when combined with bootstrap
Raw
mwe_layout_table.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bokeh Table Header Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.pydata.org/bokeh/release/bokeh-0.12.3.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.3.min.css" type="text/css" />
<script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-0.12.3.min.js"></script>
<script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.3.min.js"></script>
<script type="text/javascript">
Bokeh.set_log_level("info");
</script>
</head>
<body>
<div class="bk-root">
<div class="plotdiv" id="de43be5f-c4b9-4969-8559-204f8098e283"></div>
</div>
<script type="text/javascript">
Bokeh.$(function() {
Bokeh.safely(function() {
var docs_json = {"2305e0f4-ef92-4bc2-8218-0b975c5398cb":{"roots":{"references":[{"attributes":{},"id":"cd79e706-c872-48ee-a7dc-7ac7d8cd07a9","type":"StringFormatter"},{"attributes":{},"id":"b1c56670-f4bf-4504-af64-e2a46818daff","type":"StringEditor"},{"attributes":{"editor":{"id":"b1c56670-f4bf-4504-af64-e2a46818daff","type":"StringEditor"},"field":"y","formatter":{"id":"544e636a-cb47-4a61-a317-09cd7a6d63c6","type":"StringFormatter"},"title":"y"},"id":"5aaf98bd-abb0-4c77-b4ce-1145e39257de","type":"TableColumn"},{"attributes":{"editor":{"id":"71de66f7-e457-4abe-8e13-a7201b8ea5b5","type":"StringEditor"},"field":"x","formatter":{"id":"cd79e706-c872-48ee-a7dc-7ac7d8cd07a9","type":"StringFormatter"},"title":"x"},"id":"94143f37-7f76-4ec4-9459-c5052e711483","type":"TableColumn"},{"attributes":{"callback":null,"column_names":["y","x"],"data":{"x":[0,1,2,3],"y":[0.9189630184940659,0.4331500840699509,0.9045222584186026,0.5341645488920981]}},"id":"2ed634fa-bb5a-4ba6-8c8b-2825dbd5ee3a","type":"ColumnDataSource"},{"attributes":{},"id":"71de66f7-e457-4abe-8e13-a7201b8ea5b5","type":"StringEditor"},{"attributes":{"columns":[{"id":"94143f37-7f76-4ec4-9459-c5052e711483","type":"TableColumn"},{"id":"5aaf98bd-abb0-4c77-b4ce-1145e39257de","type":"TableColumn"}],"source":{"id":"2ed634fa-bb5a-4ba6-8c8b-2825dbd5ee3a","type":"ColumnDataSource"}},"id":"8c381ba0-cd6e-4ab5-869c-ab6b4148a654","type":"DataTable"},{"attributes":{},"id":"544e636a-cb47-4a61-a317-09cd7a6d63c6","type":"StringFormatter"}],"root_ids":["8c381ba0-cd6e-4ab5-869c-ab6b4148a654"]},"title":"Bokeh Application","version":"0.12.3"}};
var render_items = [{"docid":"2305e0f4-ef92-4bc2-8218-0b975c5398cb","elementid":"de43be5f-c4b9-4969-8559-204f8098e283","modelid":"8c381ba0-cd6e-4ab5-869c-ab6b4148a654"}];
Bokeh.embed.embed_items(docs_json, render_items);
});
});
</script>
</body>
</html>
Raw
mwe_layout_table.jinja2
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bokeh Table Header Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% if use_bootstrap %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
{% endif %}
{{ bokeh_css }}
{{ bokeh_js }}
</head>
<body>
{{ table_div }}
{{ plot_script }}
</body>
</html>
Raw
mwe_layout_table.py
#!/usr/bin/python
# -*- coding: utf-8 -*-
import numpy as np
from jinja2 import Template
from bokeh.embed import components
from bokeh.models import ColumnDataSource, Spacer, TableColumn, DataTable
from bokeh.layouts import column
from bokeh.resources import CDN
from bokeh.plotting import figure
__author__ = 'Stephan Sahm <Stephan.Sahm@gmx.de>'
USE_BOOTSTRAP = True
N = 4
source = ColumnDataSource({
'x': range(N),
'y': np.random.uniform(size=N),
})
columns = [
TableColumn(field="x", title="x"),
TableColumn(field="y", title="y"),
]
table = DataTable(source=source, columns=columns)
script, context = components({'table_div': table})
context['plot_script'] = script
context['bokeh_css'], context['bokeh_js'] = CDN.render_css(), CDN.render_js()
context['use_bootstrap'] = USE_BOOTSTRAP
with open("mwe_layout_table.jinja2") as f:
template = f.read()
html = Template(template).render(context)
with open("mwe_layout_table.html", "w") as f:
f.write(html)
# visible bugs:
# in combination with bootstrap CSS the table header is not correctly rendered
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment