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:
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
        # 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'
        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 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 = df.to_dict("records").copy()
columns, rows = data_output(

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[][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
                # build_table
                    onCellEditCommit=lazy(onCellEditCommit),  # Callback triggered when modifying cell changes

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