Dash Ag Grid - formatting column based on numeric values

Dash Python
1

Screenshot 2023-09-06 at 16.21.54
Screenshot 2023-09-06 at 16.21.54730×1896 76.2 KB

Hi i’m trying to move over all my dash datatables to Ag Grid just for consistency throughout some of my work. However, i’m a little stuck with the conditional formatting involved for the uploaded image.

In the dash datatable I created this function:

def light_data_bars(df, column):
    n_bins = 100
    bounds = [i * (1.0 / n_bins) for i in range(n_bins + 1)]
    ranges = [
        ((df[column].max() - df[column].min()) * i) + df[column].min() for i in bounds
    ]
    styles = [
        {
            "if": {"row_index": "odd"},
            "backgroundColor": "white",
        },
        {
            "if": {"row_index": "even"},
            "backgroundColor": "rgb(220, 220, 220)",
        },
    ]
    for i in range(1, len(bounds)):
        min_bound = ranges[i - 1]
        max_bound = ranges[i]
        max_bound_percentage = bounds[i] * 100
        styles.append(
            {
                "if": {
                    "filter_query": (
                        "{{{column}}} >= {min_bound}"
                        + (
                            " && {{{column}}} < {max_bound}"
                            if (i < len(bounds) - 1)
                            else ""
                        )
                    ).format(column=column, min_bound=min_bound, max_bound=max_bound),
                    "column_id": column,
                },
                "background": (
                    """
                    linear-gradient(90deg,
                    #83C7AF 0%,
                    #83C7AF {max_bound_percentage}%,
                    white {max_bound_percentage}%,
                    white 100%)
                """.format(
                        max_bound_percentage=max_bound_percentage
                    )
                ),
                "paddingBottom": 2,
                "paddingTop": 2,
            }
        )
    return styles

And then applied this to style data conditional for the columns needed.
I’m not sure how I can recreate this in Ag grid. any help would be appreciated

2

Hello @RConvex,

Sure, give this a test:

def light_data_bars(df, column):
    n_bins = 100
    bounds = [i * (1.0 / n_bins) for i in range(n_bins + 1)]
    ranges = [
        ((df[column].max() - df[column].min()) * i) + df[column].min() for i in bounds
    ]
    styles = []
## grids are striped by default using ag-theme-alpine class
    for i in range(1, len(bounds)):
        min_bound = ranges[i - 1]
        max_bound = ranges[i]
        max_bound_percentage = bounds[i] * 100
        styles.append(
            {
                "condition": f"params.value >= {min_bound}"
                             + (
                                 f" && params.value < {max_bound}"
                                 if (i < len(bounds) - 1)
                                 else ""
                             ),
                "style": {
                        "background": 
                            f"""
                                linear-gradient(90deg,
                                #83C7AF 0%,
                                #83C7AF {max_bound_percentage}%,
                                white {max_bound_percentage}%,
                                white 100%)
                            """
                        ,
                        "paddingBottom": 2,
                        "paddingTop": 2,
                    }
            }
        )
    return styles

You can either apply this to each columnDef or defaultColDef.

Check here for something similar to what you are doing:

1 Like
3

Another good example :slight_smile:

dag-docs

1 Like
4

thank you!