How to modify the style of cells conditionally in DataGrid

I have been trying to modify the table to my preferred style for the past two days.

Currently, I can only modify the header style. However, when I tried to modify it through cellClassName and getCellClassName, it was unsuccessful and the refresh rate was frequent, which may cause issues such as freezing.

Here is my code, please help me see how to modify the style of cells according to conditions

import streamlit as st
import pandas as pd
from streamlit_elements import elements, mui, html, lazy

# Document reference: https://mui.com/x/react-data-grid/style/#styling-cells
print("-" * 100)


# Special style judgment
def change_special_css(val):
    # If the value is greater than 5
    if val['row']['number'] >= 5 and val['field'] == 'number':

        # Use special CSS
        print(val)
        # After my testing, I found that it can be judged as successful, but no style has been added to the cell class
        # Even using the cellClassName parameter in column configuration items remains the same
        return 'special-style-css'
    else:
        return ""


def data_output(data):
    columns = [
        {'field': 'index',
         'headerName': 'index',
         'description': 'index',
         'width': 30,
         'type': 'number',
         'headerAlign': 'center',
         'align': 'center',
         "headerClassName": 'header-main-css',  # Write to the page using html.style functions
         },

        {'field': 'number',
         'headerName': 'number',
         'editable': True,
         'width': 90,
         'type': 'number',
         'headerAlign': 'center',
         'align': 'center',
         "headerClassName": 'header-main-css',
         # "cellClassName": change_special_css
         },
    ]
    rows = data

    return columns, rows


random_s = [5, 7, 8, 1, 5, 4, 6, 9, 8, 1, 0, 4, 2]

df = pd.DataFrame({"number": random_s})
df['index'] = df.index + 1
df['id'] = df.index
st.session_state.data = df.to_dict("records").copy()
columns, rows = data_output(st.session_state.data)

css_text = """
.header-main-css {
    background-color: #C9E9F8;
    color: #185F83;
    font-size: 13px;
    line-height: 1.4;
    font-weight: bold;
}

.widen-aircraft-css {
    background-color: #bdd7ee ;
}"""

with elements(key='test'):
    def onCellEditCommit(params, event, details):  # edit_df
        value = params.value
        st.session_state.data[params.id][params.field] = value  # update_df


    with mui.Box(sx={'width': '100%', }):
        with mui.Stack(direction='column', spacing=1):
            with mui.Box(sx={'height': '400px', 'width': '100%'}):
                # write_using_css
                html.style(css_text)
                # build_table
                mui.DataGrid(
                    key='table',
                    columns=columns,
                    rows=rows,
                    headerHeight=33,
                    editMode='cell',
                    onCellEditCommit=lazy(onCellEditCommit),  # Callback triggered when modifying cell changes
                    getCellClassName=change_special_css
                )

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.