Question

我希望能够向Bokeh服务器应用程序中的Bokeh DataTable添加CSS类并在外部编写CSS。我该怎么办？

尽管我可以阅读如下内容，但我可以添加css_classes。

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;
}

我希望看到DataTable隐藏在输出中，但仍显示出来。

Answer 1

希望这会对其他人有所帮助。此问题是由版本1.0.2中的错误引起的。我升级到1.2.0，并且代码按预期运行。升级时，请确保也升级JavaScript文件，否则会出现版本不匹配的问题。

Answer 2

如果使用directory format，则可以在index.html模板文件中包含css文件。如果使用单模块格式，则将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))

如何使用bokeh服务器应用程序将自定义css添加到DataTable？

2 个答案: