[REACT] Gantt: how to make custom number cell in Gantt

[clovisapp]

We use last bryntum version, is there a way to make a custom React cell of the "number" column of the list Gantt grid ? (like inside the screenshot provided)

Thanks a lot for your help !

[tasnim]

Hi,

Sure, it's very easy to achieve this.
You can use the renderer https://bryntum.com/products/grid/docs/api/Grid/column/Column#config-renderer and return a JSX from it

            {
                field : 'team',
                text :
                    'Team<div class="small-text">(inline JSX)</div>',
                htmlEncodeHeaderText : false,
                flex                 : 1,
                // Using simple inline JSX
                renderer             : ({ value }) => 
                <div style={{
                    width : 40,
                    height: 40,
                    backgroundColor: 'cyan',
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems : 'center',
                    borderRadius : '50%',
                    fontSize : '18px',
                    fontWeight : 'bold'
                    }}>29</div>
            },

And this is what it looks like

Screenshot 2024-02-23 100015.png (54.14 KiB) Viewed 75 times

Best regards,
Tasnim