Как добавить пользовательский CSS в DataTable с помощью приложения сервера bokeh? - PullRequest
Новая
       18

Как добавить пользовательский CSS в DataTable с помощью приложения сервера bokeh?

0 голосов
/ 01 июля 2019

Я хотел бы иметь возможность добавить класс CSS в таблицу данных Bokeh в серверном приложении Bokeh и написать CSS внешне. Как я могу это сделать?

Из того, что я прочитал, я мог бы добавить классы css_class следующим образом. 

data_table = DataTable(source=in_src, fit_columns=True, columns=columns, width=820, height=300, index_position=None, editable=False, selectable=True, css_classes=["hidden_table"])

Затем во внешнем файле с помощью CSS сделайте что-то вроде этого. 

.hidden_table {
  visibility: hidden;
}

Я ожидал увидеть скрытую таблицу данных в выходных данных, но она все еще показывает.

Ответы [ 2 ]

0 голосов
/ 03 июля 2019

Если вы используете каталог в формате , вы можете включить файл css в файл шаблона index.html. Если вы используете одиночный формат модуля, добавьте CSS в компонент DIV. Вот пример, который изменяет вес шрифта таблицы на полужирный. 

from datetime import date
from random import randint
from bokeh.plotting import curdoc
from bokeh.models import ColumnDataSource
from bokeh.layouts import Column
from bokeh.models.widgets import DataTable, DateFormatter, TableColumn, Div

data = dict(
        dates=[date(2014, 3, i+1) for i in range(10)],
        downloads=[randint(0, 100) for i in range(10)],
    )
source = ColumnDataSource(data)

columns = [
        TableColumn(field="dates", title="Date", formatter=DateFormatter()),
        TableColumn(field="downloads", title="Downloads"),
    ]
data_table = DataTable(source=source, columns=columns, width=400, height=280, css_classes=["my_table"])
style = Div(text="""
<style>
.my_table{
font-weight:bold !important;
}
</style>
""")
curdoc().add_root(Column(data_table, style))
0 голосов
/ 03 июля 2019

Надеюсь, это поможет кому-то еще. Эта проблема была вызвана ошибкой в ​​версии 1.0.2. Я обновил до 1.2.0, и код работал как ожидалось. При обновлении обязательно обновите и свои файлы JavaScript, иначе возникнет проблема несовпадения версий.

...