TagsInput inside AG-Grid

Dash Python
1

I am trying to add tags to an ag-grid. I can make the Mantine TagsInput component to work on it’s own, but am having trouble making it work as a custom rendered component inside ag-grid.
2024-05-28 20_44_07-Bill of Quantities

I can’t seem to be able to adjust the size of things in the compact ag-grid layout so the TagsInput component fills the cell and doesn’t overflow. I am also having trouble making the tags show independently, and making the component interactive. I don’t have my callbacks set up correctly and when I click the cell, I get an error. Can someone point me to some examples that will help me better understand what I need to do to make this work?

Here is part of the dashAgGridComponentFunctions.js

dagcomponentfuncs.TagsInput = function (props) {
    const {setData, value} = props;

    return React.createElement(
        window.dash_mantine_components.TagsInput,
        {
            value: value,
            size: props.size || 'xs',
            radius: props.radius || 'sm',
            onChange: (value) => setData(value),
            styles: {
                pill: {backgroundColor: "gray", color:"black"},
                input: {backgroundColor: "transparent"},
            }
        }
    );
}

Example placeholder data:

placeholder_data = [
    {'label': 'Label A', 'item': 'Item 1', 'tags': ['Tag 1, Tag 2']}]
};

Example column definition:

column_defs = ... {                
                'field': 'tags',
                'width': 150,
                'resizable': False,
                'editable': True,
                'cellRenderer': 'TagsInput'}...
2

Hello there,

Could you show how to include the TagsInput into the Dash AG Grid in general?
I tried to replicate your code and it unfortunately didnt work.
(Would also be happy to know which kind of versions you use for the packages)
Would be happy about a reply!

best,
Viet