CODEWITHSUNDEEP
pythonbokeh
Arya Stark
Arya Stark

Reputation: 55

Adding color to bokeh datatable header

I created a bokeh datatable and was wondering how can I format the column header to have a blue background, any help is appreciated.

thanks

Upvotes: 5

Views: 4419

Answers (2)

tonneofash
tonneofash

Reputation: 671

If you're deploying the app using bokeh server, another solution is to edit your CSS style file directly.

The styles CSS file is located in the static folder in your Bokeh app directory (see below) and is an optional file that you can include in the directory if you so wish.

  • my_app

    • data

      • things.csv

    • main.py

    • static

      • css

        • styles.css

In order to override SlickGrid's CSS file, you can use the following classes in your styles.css file, as long as you use the !important tag.

Example:

.slick-header-column {
            background-color: lightblue !important;
            background-image: none !important;
            }

.slick-row {
            background-color: white !important;
            background-image: none !important;
            color:black !important;
}

.bk-cell-index {
            background-color: white !important;
            background-image: none !important;
            color:black !important;
}

slick-header-column controls the column of the table.

slick-row controls the rows of the table.

bk-cell-index controls the index values of the table.

Upvotes: 1

bigreddot
bigreddot

Reputation: 34568

Unfortunately this is not completely non-trivial to do. SlickGrid (which is the basis of DataTable) has many dozens of CSS configurable properties, so exposing them all as Python properties on Bokeh models is prohibitive. So, you will have to target the SlickGrid CSS directly in a template. Things vary somewhat depending on details you have not provided (is this a standalone HTML doc? Served by a web app with components? A Bokeh server application?) so here is a complete minimal example using file_html that you could use as a basis adapt to other situations:

import jinja2

from bokeh.document import Document
from bokeh.embed import file_html
from bokeh.resources import CDN
from bokeh.util.browser import view
from bokeh.models import ColumnDataSource, DataTable, TableColumn
from bokeh.sampledata.autompg2 import autompg2 as mpg

source = ColumnDataSource(data=mpg)
columns = [
    TableColumn(field="manufacturer", title="Manufacturer"),
    TableColumn(field="model", title="Model"),
    TableColumn(field="displ", title="Displacement"),
    TableColumn(field="year", title="Year"),
    TableColumn(field="cyl", title="Cylinders"),
    TableColumn(field="cty", title="City MPG"),
    TableColumn(field="hwy", title="Highway MPG"),
]
table = DataTable(source=source, columns=columns, width=800, css_classes=["mycustom"])

doc = Document()
doc.add_root(table)

template = jinja2.Template("""
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>{{ title|e if title else "Bokeh Plot" }}</title>
        {{ bokeh_css }}
        {{ bokeh_js }}
        <style>
          .slick-header-column {
            background-color: lightblue !important;
            background-image: none !important;
          }
        </style>
    </head>
    <body>
        {{ plot_div|indent(8) }}
        {{ plot_script|indent(8) }}
    </body>
</html>
""")

if __name__ == "__main__":
    filename = "widgets.html"
    with open(filename, "w") as f:
        f.write(file_html(doc, CDN, "Table", template=template))
    view(filename)

enter image description here

Upvotes: 8

Related Questions