plotly/dash-ag-grid

cellStyle just work for one condition

hoatranobita opened this issue · 1 comments

Hello,
I'm trying to vertical center values in the cell by using "cellStyle":{'display':'flex', 'align-items':'center', 'justify-content':'right'} but it just work with cell without styleConditions. But with cell with styleConditions it unchanged.

import dash_ag_grid as dag
from dash import Dash, html, dcc
import pandas as pd
import numpy as np

df = pd.DataFrame({'Definition': ['Loan', 'Deposit'], 
                   '20231015': [28, 17],
                   '20231016': [5, 6],
                   '20231017': [10, 13],
                   'Notes':['','']})
df2 = pd.DataFrame({'BR_CD': ['Hanoi', 'Hochiminh'], 
                   'CUS_NM': ['A', 'B'],
                   'AMT': ['2', '3']})
df2['Conclusion'] = "[" + df2['BR_CD'] + "]" + ' ' + df2['CUS_NM'] + ' ' + df2['AMT'] 
x = "[" + df2['BR_CD'] + "]" + ' ' + df2['CUS_NM'] + ' ' + df2['AMT']

df['Notes'].iloc[1] = '\n'.join(x)

app = Dash(__name__)

app.layout = html.Div([
    dag.AgGrid(
            columnDefs=[{'field':'Definition'}, 
                       {'field':'20231015',
                        "cellStyle":{'display':'flex', 'align-items':'center', 'justify-content':'right'}}, 
                       {'field':'20231016',
                        "cellStyle":{'display':'flex', 'align-items':'center', 'justify-content':'right'}},
                       {'field':'20231017',
                        "cellStyle":{
                           'styleConditions':
                           [{"condition":'params.value > 0', 
                             'style':{'color':'red'}}],
                        'display':'flex', 'align-items':'center', 'justify-content':'right'}},
                        {'field':'Notes', "wrapText":True, "autoHeight":True, 
                         "cellStyle":{'wordBreak':'normal', 
                                      'whiteSpace':'pre'}}],
            rowData=df.to_dict('records'),
            defaultColDef={"editable": True},
        )
])

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

Screenshot 2023-10-18 104010

See the solution on the forum

If you are looking for an additional way to handle a default style, I think this would be confusing given how the defaultStyle prop works in the styleConditions. I think it's best to be explicit like the example posted on the forum.