Created
October 24, 2016 07:40
-
-
Save schlichtanders/897b33daa846d4a08ba6e0f2ee5b2d75 to your computer and use it in GitHub Desktop.
bokeh datatable has some little layout issues when combined with bootstrap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #!/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 <[email protected]>' | |
| 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