I’m writing a dash app in Python. I’m using a dash_tabulator.DashTabulator() object to display data. Only some columns will be editable, and I want to highlight those cells with a distinct background color (or text color). I’ve created a very pared down version of the app that illustrates my issue.

Here is my simple_dash.py file:

import dash
from dash import html
import dash_tabulator
import pandas as pd

# Sample DataFrame
df = pd.DataFrame({
    'col1': ['A', 'B', 'C', 'D'],
    'col2': [1, 2, 3, 4]
})

app = dash.Dash(__name__)
app.layout = html.Div([
    html.Link(href='/assets/styles.css', rel='stylesheet'),
    html.Script(src='/assets/custom_tabulator.js'),
    dash_tabulator.DashTabulator(
        id='table',
        columns=[
            {
                "title": "Column 1", 
                "field": "col1",
            },
            {
                "title": "Column 2", 
                "field": "col2", 
                "editor": "input",
                "formatter": "customCellFormatter",
            },
        ],
        data=df.to_dict('records'),
        options={
            "layout": "fitColumns",
        }
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

Here is my custom_tabulator.js:

console.log('DEBUG: custom_tabulator.js loaded');
function customCellFormatter(cell, formatterParams, onRendered) {
    console.log('DEBUG: customCellFormatter called');
    if (cell.getColumn().getDefinition().editor === 'input') {
        cell.getElement().classList.add('input-cell');
        cell.getElement().classList.add('text-color');
    }
    return cell.getValue();
}

And here is my styles.css:

.input-cell {
    background-color: #00FF00; /* Green background */
}
.text-color {
    color: #FF0000; /* Red text */
}

When I run the app, none of the cells have a green background and none of the text is red. When I open my browser’s developer console, I do see the “DEBUG: custom_tabulator.js loaded” message, but I do not see the “DEBUG: customCellFormatter called’ message. So, I know my javascript is in the correct location (in an assets subdirectory, along with my styles.css file) and my .py file is successfully referencing it, but I can’t get the cells to format.

I’ve tried defining the formatter method within the column definition. I’ve tried defining the formatter method within the tabulator options definition. I’ve had lengthy circular discussions with Copilot and tried all of those suggestions.

My actual app is more complex, but this is a simplified recreation of the problem.

Has anybody had success setting the background color and/or text color of a cell in a dash_tabulator?