Adding multiple dmc.badges to a single Ag Grid cell

Dash Python
1

I am trying to create a custom cell renderer to dynamically add multiple colored badges horizontally to a single Ag Grid cell with props input from my dash app in the form [('text', 'A'), ('other text', 'B'), ...]. I tried to return a [badge, badge, …] array from my js but that failed, and I also tried wrapping the badges in a single dmc.Group element to be returned (see below), but that also failed. Unfortunately I don’t have much js experience! Any thoughts?

var dagcomponentfuncs = window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {};

dagcomponentfuncs.Mult_Badges = function (props) {
    const badges = [];
    for (let i = 0; i < props.length; i++) {
        if (props.value[i][1] == 'A') {
            badge_clr = 'blue';
        } else if (props.value[i][1] == 'B') {
            badge_clr = 'red';
        } else {
            badge_clr = 'green';
        }
        badge = React.createElement(
            window.dash_mantine_components.Badge,
            {
                color: badge_clr,
            },
            props.value[i][0]
        );
        badges.push(badge);
    };
    return = React.createElement(
        window.dash_mantine_components.Group,
        {
        },
        badges
    );
};
2

Hello @tks,

You were very close, good job!

Here is it fixed:

var dagcomponentfuncs = window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {};

dagcomponentfuncs.Mult_Badges = function (props) {
    const badges = [];
    for (let i = 0; i < props.value.length; i++) { // <- needed to iterate through the props.value not props
        if (props.value[i][1] == 'A') {
            badge_clr = 'blue';
        } else if (props.value[i][1] == 'B') {
            badge_clr = 'red';
        } else {
            badge_clr = 'green';
        }
        badge = React.createElement(
            window.dash_mantine_components.Badge,
            {
                color: badge_clr,
            },
            props.value[i][0]
        );
        badges.push(badge);
    };
    return React.createElement( // <- return is like return in Python, should just be what you are returning
        window.dash_mantine_components.Group,
        {children: badges
        }
    );
};
1 Like
3

Thanks @jinnyzor! My js return statement was a typo but the props.value.length bit and passing badges into the second arg of createElement were my hangups.

1 Like
4

I’m not sure if you needed to pass the children in the second dictionary, or just like you did above it.

It was one of the first things I altered. :slight_smile: