Hi pjaol
Many thanks for making tabulator available in dash. I wonder if you could help me with setting the background color of a cell such that the entire cell is colored but the text is still visible? I have failed so far.
What I have tried so far:
Options 1: Use plain html:
columns = [
{ "title": "Name", "field": "name", "width": 150, "headerFilter":True},
{ "title": "Age", "field": "age", "hozAlign": "left", "formatter": "progress" },
{ "title": "Favourite Color", "field": "col", "headerFilter":True, "formatter":"html"},
{ "title": "Date Of Birth", "field": "dob", "hozAlign": "center" },
{ "title": "Rating", "field": "rating", "hozAlign": "center", "formatter": "star" },
{ "title": "Passed?", "field": "passed", "hozAlign": "center", "formatter": "tickCross" }
]
data = [
{"id":1, "name":"Oli Bob", "age":"12", "col":"<style>body{margin:0px} p{background-color: rgb(255,0,0); margin: 0;border: 0}</style> <body><p>Red text </p></body>", "dob":"",},
{"id":2, "name":"Mary May", "age":"1", "col":"blue", "dob":"14/05/1982"},
{"id":3, "name":"Christine Lobowski", "age":"42", "col":"green", "dob":"22/05/1982"},
{"id":4, "name":"Brendon Philips", "age":"125", "col":"orange", "dob":"01/08/1980"},
{"id":5, "name":"Margret Marmajuke", "age":"16", "col":"yellow", "dob":"31/01/1999"},
{"id":6, "name":"Fred Savage", "age":"16", "col":"yellow", "rating":"1", "dob":"31/01/1999"},
{"id":6, "name":"Brie Larson", "age":"30", "col":"blue", "rating":"1", "dob":"31/01/1999"},
]
However, this does not color the entire cell. Fiddling around with margin did not help either:
Option 2: The color formater. Here the problem is that the text is not visible
, and I cannot set the font color:
columns = [
{ "title": "Name", "field": "name", "width": 150, "headerFilter":True},
{ "title": "Age", "field": "age", "hozAlign": "left", "formatter": "progress" },
{ "title": "Favourite Color", "field": "col", "headerFilter":True, "formatter":"color"},
{ "title": "Date Of Birth", "field": "dob", "hozAlign": "center" },
{ "title": "Rating", "field": "rating", "hozAlign": "center", "formatter": "star" },
{ "title": "Passed?", "field": "passed", "hozAlign": "center", "formatter": "tickCross" }
]
data = [
{"id":1, "name":"Oli Bob", "age":"12", "col":"red", "dob":"",},
{"id":2, "name":"Mary May", "age":"1", "col":"blue", "dob":"14/05/1982"},
{"id":3, "name":"Christine Lobowski", "age":"42", "col":"green", "dob":"22/05/1982"},
{"id":4, "name":"Brendon Philips", "age":"125", "col":"orange", "dob":"01/08/1980"},
{"id":5, "name":"Margret Marmajuke", "age":"16", "col":"yellow", "dob":"31/01/1999"},
{"id":6, "name":"Fred Savage", "age":"16", "col":"yellow", "rating":"1", "dob":"31/01/1999"},
{"id":6, "name":"Brie Larson", "age":"30", "col":"blue", "rating":"1", "dob":"31/01/1999"},
]
Option 3: Write a customized formatter in JS:
columns = [
{ "title": "Name", "field": "name", "width": 150, "headerFilter":True},
{ "title": "Age", "field": "age", "hozAlign": "left", "formatter": "progress" },
{ "title": "Favourite Color", "field": "col", "headerFilter":True, "formatter":"function(cell){var col = cell.getValue();cell.getElement().style.backgroundColor = '#A6A6DF';return col}"},
{ "title": "Date Of Birth", "field": "dob", "hozAlign": "center" },
{ "title": "Rating", "field": "rating", "hozAlign": "center", "formatter": "star" },
{ "title": "Passed?", "field": "passed", "hozAlign": "center", "formatter": "tickCross" }
]
data = [
{"id":1, "name":"Oli Bob", "age":"12", "col":"red", "dob":"",},
{"id":2, "name":"Mary May", "age":"1", "col":"blue", "dob":"14/05/1982"},
{"id":3, "name":"Christine Lobowski", "age":"42", "col":"green", "dob":"22/05/1982"},
{"id":4, "name":"Brendon Philips", "age":"125", "col":"orange", "dob":"01/08/1980"},
{"id":5, "name":"Margret Marmajuke", "age":"16", "col":"yellow", "dob":"31/01/1999"},
{"id":6, "name":"Fred Savage", "age":"16", "col":"yellow", "rating":"1", "dob":"31/01/1999"},
{"id":6, "name":"Brie Larson", "age":"30", "col":"blue", "rating":"1", "dob":"31/01/1999"},
]
–>Does not work. I guess I cannot pass a JS function at all, or my syntax is wrong.
Could you please let me know if there is a way to solve this?
Many thanks
)