Search code examples
pythonbokeh

How to build Bokeh datatable without default row fill colour?


Is there a way in Bokeh to strip down the alternate row background formatting when building a datatable?

from datetime import date
from random import randint

from bokeh.models import ColumnDataSource
from bokeh.models.widgets import DataTable, DateFormatter, TableColumn
from bokeh.io import output_file, show

output_file("data_table.html")

data = dict(idx=[randint(0, 100) for i in range(10)],
            values=[randint(0, 100) for i in range(10)])
source = ColumnDataSource(data)

columns = [TableColumn(field="idx", title="Index"),
           TableColumn(field="values", title="Values")]
data_table = DataTable(source=source, columns=columns, width=400, height=280)

show(data_table)

When the datatable is created, its rows are presented in alternate white-grey fill, but for a specific datatable I am building I need all rows to be white/transparent, is that achievable in Bokeh?

I have looked up in the Datatable documentation, but there doesn't seem to be a parameter dedicated to this. There is the background parameter, but it doesn't affect the generated datatable after trying options such as:

from bokeh.colors.rgb import RGB

data_table = DataTable(source=source, columns=columns, width=400, height=280, background='red')
data_table = DataTable(source=source, columns=columns, width=400, height=280, background='#000000')
data_table = DataTable(source=source, columns=columns, width=400, height=280,
                       background=RGB(125, 54, 89))

Funilly enough, when I provide an invalid parameter (say, background='000000'), Bokeh returns a ValueError stating what is acceptable or not, among those:

ValueError: expected an element of either Enum(...'red',...),
Regex('^#[0-9a-fA-F]{6}$'),
Regex('^rgba\\(((25[0-5]|2[0-4]\\d|1\\d{1,2}|\\d\\d?)\\s*,\\s*?){2}(25[0-5]|2[0-4]\\d|1\\d{1,2}|\\d\\d?)\\s*,\\s*([01]\\.?\\d*?)\\)'),
Regex('^rgb\\(((25[0-5]|2[0-4]\\d|1\\d{1,2}|\\d\\d?)\\s*,\\s*?){2}(25[0-5]|2[0-4]\\d|1\\d{1,2}|\\d\\d?)\\s*?\\)'),
Tuple(Byte(Int, 0, 255), Byte(Int, 0, 255), Byte(Int, 0, 255)),
Tuple(Byte(Int, 0, 255), Byte(Int, 0, 255), Byte(Int, 0, 255), Percent) or RGB, got '000000'

Is there an initiator to the datatable I am missing here?

Also, I know there is an option to format cells with HTMLTemplateFormatter, but this should be avoided as I am already using a format option for some of the columns.


Solution

  • There's no built-in way to do that. But you can use a custom document template and add some CSS rules to it. The rows with grey background are subjected to this CSS rule:

    .bk-root .slick-row.odd {
        background: #fafafa;
    }