I am using the bokeh library and I want to change the Data table column name font and size and put it in the center in a data table using bokeh. below is the output according to the below code
I have used the below code:
template="""
<div style="background:<%=
(function colorfromint(){
if(value < 0){
return("red")}
else{return("#51c2d5")}
}()) %>;
color: white";
>
<div style="font-size: 20px;">
<%= value.toFixed(1) %>
</div>
<%= value.toFixed(1) %></div>
"""
template2="""
<div style="background:<%=
(function colorfromint(){
if(value > 0){
return("#f9dfdc")}
else{return("#f9dfdc")}
}()) %>;
color: black";
>
<div style="font-size: 20px;">
<%= value.toFixed(1) %>
</div>
<%= value.toFixed(1) %></div>
"""
template3="""
<div style="font-size: 20px;">
<%= value %>
</div>
"""
template4="""
<div style="background:<%=
(function colorfromint(){
if(value > 0){
return("#e1e5ea")}
else{return("#e1e5ea")}
}()) %>;
color: black";
>
<div style="font-size: 20px;">
<%= value.toFixed(1) %>
</div>
<%= value.toFixed(1) %></div>
"""
template5="""
<div style="background:<%=
(function colorfromint(){
if(value > 0){
return("#f9dfdc")}
else{return("#f9dfdc")}
}()) %>;
color: black";
>
<div style="font-size: 20px;">
<%= value.toFixed(1) %>
</div>
<%= value.toFixed(1) %></div>
"""
template6="""
<div style="background:<%=
(function colorfromint(){
if(value > 0){
return("#fff5b7")}
else{return("#fff5b7")}
}()) %>;
color: black";
>
<div style="font-size: 20px;">
<%= value.toFixed(1) %>
</div>
<%= value.toFixed(1) %></div>
"""
style = Div(text="""
<style>
.my-table .slick-header-column:nth-child(3) .slick-column-name{
float:left !important;
}
</style>
""")
#formatter=NumberFormatter(format='0,0[.]00',text_align='center')
#formatter=NumberFormatter(format='0,0[.]00',text_align='center',font_style="bold")
#,formatter=StringFormatter(font_style="bold")
formater = HTMLTemplateFormatter(template=template)
formater2 = HTMLTemplateFormatter(template=template2)
formater3 = HTMLTemplateFormatter(template=template3)
formater4 = HTMLTemplateFormatter(template=template4)
formater5 = HTMLTemplateFormatter(template=template5)
formater6 = HTMLTemplateFormatter(template=template6)
columns = [
TableColumn(field='Phase', title='Phase',formatter=formater3),
TableColumn(field=' RW ', title='Weight Factor',formatter=formater6),
TableColumn(field='Plan_Prev_Week', title='Plan Last Week',formatter=formater2),
TableColumn(field='Actual_Prev_Week', title='Actual Last Week',formatter=formater2),
TableColumn(field='Diff_Prev_Week', title='Difficiency Last Week',formatter=formater),
TableColumn(field='Plan_This_Week', title='Plan This Week',formatter=formater4),
TableColumn(field='Actual_This_Week', title='Actual This Week',formatter=formater4),
TableColumn(field='Diff_This_Week', title='Difficiency This Week',formatter=formater),
TableColumn(field='Plan_To_Date', title='Plan To Date',formatter=formater5),
TableColumn(field='Actual_To_Date', title='Actual To Date',formatter=formater5),
TableColumn(field='Diff_To_Date', title='Difficiency To Date',formatter=formater)
]
columns2 = [
TableColumn(field='Camp', title='Camp',formatter=formater3),
TableColumn(field=' RW ', title='Weight Factor',formatter=formater6),
TableColumn(field='Plan_Prev_Week', title='Plan Last Week',formatter=formater2),
TableColumn(field='Actual_Prev_Week', title='Actual Last Week',formatter=formater2),
TableColumn(field='Diff_Prev_Week', title='Difficiency Last Week',formatter=formater),
TableColumn(field='Plan_This_Week', title='Plan This Week',formatter=formater4),
TableColumn(field='Actual_This_Week', title='Actual This Week',formatter=formater4),
TableColumn(field='Diff_This_Week', title='Difficiency This Week',formatter=formater),
TableColumn(field='Plan_To_Date', title='Plan To Date',formatter=formater5),
TableColumn(field='Actual_To_Date', title='Actual To Date',formatter=formater5),
TableColumn(field='Diff_To_Date', title='Difficiency To Date',formatter=formater)
]
myTable = DataTable(source=source, columns=columns, sizing_mode='stretch_width',fit_columns=True)
myTable2 = DataTable(source=source2, columns=columns2, sizing_mode='stretch_width',fit_columns=True)
myTable3 = DataTable(source=source3, columns=columns2, sizing_mode='stretch_width',fit_columns=True)
div_article = Div(text="<h1 style=text-align:center> Progress report as of 2-June 21 </h1>",sizing_mode='stretch_width')
div_article2 = Div(text="<h2 style=text-align:center> Construction Progress Per Camp </h2>",sizing_mode='stretch_width')
div_article3 = Div(text="<h2 style=text-align:center> Progress Per Discipline </h2>",sizing_mode='stretch_width')
div_article4 = Div(text="<h2 style=text-align:center> Procurement Progress Per Camp </h2>",sizing_mode='stretch_width')
div_article.style={'color': '#0269A4', 'font-family': 'Helvetica Neue, Helvetica, Arial, sans-serif;','margin-left': '50em', 'font-size': '1.1em'}
div_article3.style={'color': '#0269A4', 'font-family': 'Helvetica Neue, Helvetica, Arial, sans-serif;','font-size': '1.1em'}
div_article2.style={'color': '#0269A4', 'font-family': 'Helvetica Neue, Helvetica, Arial, sans-serif;','font-size': '1.1em'}
div_article4.style={'color': '#0269A4', 'font-family': 'Helvetica Neue, Helvetica, Arial, sans-serif;','font-size': '1.1em'}
#div_article.sizing_mode = "stretch_both"
div_article.margin = 30
l = layout([
[div_article],
[div_article3],
[myTable],
[div_article2],
[myTable2],
[div_article4],
[myTable3]
])
l.sizing_mode = "scale_both"
curdoc().add_root(l)
output_file('result.html')
show(l)
I have used the above-mentioned code for formatting but the table column names not changed, the format of table data only has been changed but the table headers not changed.
I am asking for a template to allow me to change the format of table contents and the columns' names/headers.